| Autor | Zpráva | ||
|---|---|---|---|
| strungur Profil * |
#1 · Zasláno: 5. 9. 2015, 10:04:35
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 |
||
|
Časová prodleva: 10 let
|
|||
0