Autor Zpráva
zoufalec
Profil *
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
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 *
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 *
Problém vyřešen, děkuji za nakopnutí!

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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