Autor Zpráva
strungur
Profil *
Ahoj, mám takový problém, že když zoomuju, tak mi menu vyjede z divu a text je pod ním... Toto se stává i na mobilu a celkově na příliš malých rozlišeních, jak by se to dalo opravit?

html:
<!DOCTYPE html>
<html>
    <head>
        <title>Audio Panel</title>
        <link rel="stylesheet" href="css/style.css">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta charset="utf-8">
    </head>
    
    <body>
        <div id="header">
            <div id="addSong">
                <img src="images/addsong.png" alt="Add a song" />
            </div>
            
            <div id="repeatSong">
                <img src="images/repeat.png" alt="Repeat a song" />
            </div>
            
            <div id="starSong">
                <img src="images/star.png" alt="Star a song" />
            </div>
            
            <div id="navigation">
                <a href="#">Playlist</a>
                <a href="#">Lyrics</a>
                <a href="#">Top 20</a>
                <a href="#">History</a>
            </div>
        </div>
    
        <div id="wrapper">
        
        </div>
        
        <div id="songbar">
            <div id="fileInfo">
                ERR: N/A... (time_passed/time_left)
            </div>
        </div>
        
        <div id="footer">
            <div id="copyright">
                Copyright © 2015-2016, stranger.tk.
            </div>
        </div>
    </body>
</html>

css:
html, body {
    margin: 0;
    padding: 0;
    background: #050505;
}

@font-face {
    font-family: opensans_bold;
    src: url(/fonts/OpenSans-Bold.ttf);
}

@font-face {
    font-family: opensans_regular;
    src: url(/fonts/OpenSans-Regular.ttf);
}

@font-face {
    font-family: opensans_light;
    src: url(/fonts/OpenSans-Light.ttf);
}

#header {
    width: 100%;
    height: 50px;
    background: #E74C3C;
}

#addSong, #repeatSong, #starSong {
    padding: 9px;
    opacity: 0.4;
    width: 32px;
    height: 32px;
    float: left;
}

#addSong:hover, #repeatSong:hover, #starSong:hover {
    transition-duration: 0.2s;
    transition-timing-function: ease-in;
    opacity: 1;
}

#navigation {
    float: right;
    font-family: opensans_regular;
    text-transform: uppercase;
    padding: 13px;
}

#navigation a {
    padding: 15px 10px 15px 10px;
    text-decoration: none;
    color: #fff;
    opacity: 0.4;
}

#navigation a:hover {
    transition-duration: 0.2s;
    transition-timing-function: ease-in;
    opacity: 1;
}

#songbar {
    width: 100%;
    height: 30px;
    bottom: 30px;
    position: fixed;
    background: #E74C3C;
}

#footer {
    width: 100%;
    height: 30px;
    bottom: 0px;
    position: fixed;
    background: #E2E2E2;
}

#fileInfo {
    color: #FFF;
    text-align: center;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
    text-transform: uppercase;
    font-family: opensans_regular;
    font-size: 15px;
}

#copyright {
    color: #020;
    text-align: center;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
    text-transform: uppercase;
    font-family: opensans_regular;
    font-size: 15px;
}

Živá ukázka: http://audio.stranger.tk/

Jak by se to dalo opravit tak aby menu nevyjíždělo z headeru a třeba se při malém rozlišení / zoomu přidala do menu ikonka místo textu na kterou když by se kliklo tak by vyjelo menu dolu pod sebe?
Třeba tahle ikonka: http://www.flaticon.com/free-icon/menu-button_60510

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: