| Autor | Zpráva | ||
|---|---|---|---|
| zoufalec Profil * |
#1 · Zasláno: 12. 2. 2014, 21:56:20
Zdravím. Už nějakou dobu se tu patlám s menu a pořád se mi nedaří najít řešení. Jde o to, že chci, aby pozadí který je pod menu bylo přes celou stránku (viz přiložený obrázek). Aby všechny 4 položky menu byly stejně široké, a aby jejich výška byla cca 25px.
HTML <nav>
<div class="wrapper">
<ul>
<li accesskey="1"><a href="#">Menu 1</a></li>
<li accesskey="2"><a href="#">Menu 2</a></li>
<li accesskey="3"><a href="#">Menu 3</a></li>
<li accesskey="4"><a href="#">Menu 4</a></li>
</ul>
</div>
</nav>CSS .wrapper{
margin:0 auto;
width:750px;
}
nav{
margin:0 auto;
background-color:#25116C;
color:white;
}Dokázal by mi s tím někdo, prosím, pomoci? Obrázek pro ilustraci zde |
||
| MyShare Profil |
#2 · Zasláno: 12. 2. 2014, 22:41:07
Nazdar zoufalec
Hádam pomôže samozrejme si to prispôsob robil som to narýchlo: HTML: <div class="top-header">
<div class="container">
<span>LOGO</span>
</div>
</div>
<div class="menu-wrapper">
<nav>
<ul class="menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</nav>
</div>
<div class="body-wrapper">
<div class="container">
<span>TU JE BODY</span>
</div>
</div>CSS: * {
margin: 0;
padding: 0;
}
body {
font-size: 100%;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
span {
font-size: 36px;
}
.container {
width: 90%;
margin: 0 auto;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.top-header {
width: 100%;
float: left;
position: relative;
text-align: center;
background: #cbcbcb;
}
.top-header span {
font-size: 36px;
}
.menu-wrapper {
width: 100%;
float: left;
background: #3d72ba;
}
.menu-wrapper nav {
width: 640px;
margin: 0 auto;
background: red;
}
.menu-wrapper nav .menu li {
float: left;
list-style-type: none;
position: relative;
}
.menu-wrapper nav .menu li a {
float: left;
line-height: 35px;
padding: 0 45px;
color: #fff;
text-decoration: none;
}
.body-wrapper {
float: left;
width: 100%;
height: 600px;
position: relative;
background: #cbcbcb;
} |
||
| zoufalec Profil * |
#3 · Zasláno: 13. 2. 2014, 10:45:12
Aha, já na to šel obráceně. Wrapper jsem měl až uvnitř <nav>, nešlo by zachovat můj stávající kód (tak aby bylo nejdřív <nav> a pak až wrapper)?
|
||
| zoufalec Profil * |
#4 · Zasláno: 13. 2. 2014, 12:11:53
Problém vyřešen, děkuji za nakopnutí!
|
||
|
Časová prodleva: 12 let
|
|||
0