Menu CSS (karty sa nedajú dostať do plnej výšky) - html, css, xhtml

<style type="text/css">
html, body {
background: #fff;
margin: 0;
padding: 0;
}

#nav {
font-family: Verdana, sans-serif;
height: 29px;
font-size: 12px;
padding: 0 0 0 10px; /* this is used for something else */
background-color: #456;
}

#nav ul, #nav ul li {
list-style: none;
margin: 0;
padding: 9px 0 0 0px;
}

#nav ul {
text-align: center;
}

#nav ul li {
display: inline;
}

#nav ul li.last {
margin-right: 0;
}


#nav ul li a {
color: #FFF;
text-decoration: none;
padding: 0px 0 0 20px;
height: 29px;
}
#nav ul li a span {
padding: 8px 20px 0 0;
height: 21px;
}

#nav ul li a:hover {
background: #789;
}
</style>

<div id="nav">
<ul>
<li><a href="/1/"><span>One</span></a></li>
<li><a href="/2/"><span>Two</span></a></li>
<li><a href="/3/"><span>Three</span></a></li>
<li><a href="/4/"><span>Four</span></a></li>
</ul>
</div>

Mám s tým malý problém, pretože to nerobí „pozadie vznášania“ na 100% výšky nav lišty.

odpovede:

Toto funguje na mojom stroji:

<style type="text/css">
html, body {
background: #fff;
margin: 0;
padding: 0;
}

#nav {
font-family: Verdana, sans-serif;
height: 29px;
font-size: 12px;
padding: 0 0 0 10px; /* this is used for something else */
background-color: #456;
}

#nav ul, #nav ul li {
list-style: none;
margin: 0;
padding: 0 0 0 0px;
}

#nav ul {
text-align: center;
position:relative;
width:300px;
margin:0 auto 0 auto;
}

#nav ul li {
float:left;
}

#nav ul li.last {
margin-right: 0;
}


#nav ul li a {
float:left;
color: #FFF;
text-decoration: none;
padding: 9px 0 0 20px;
height: 20px;

}
#nav ul li a span {
padding: 8px 20px 0 0;
height: 20px;
}

#nav ul li a:hover {
background: #789;
}
</style>

Nenastavujte výšku na najvzdialenejšom prvku. Nastavte ju na najvnútornejšom prvku (okrem výšky bude vyžadovať blokovanie displeja: na vašom a-pravidle).

Mali by ste vložiť výplň a výšku čiary na a značka. Rozpätia nie sú potrebné a taktiež skutočne nepotrebujete žiadne polstrovanie v li. Ak používateľ zmení veľkosť textu, pozadie vznášania však vyjde z oblasti tabe.

<style type="text/css">
html, body {
background: #fff;
margin: 0;
padding: 0;
}

#nav {
font-family: Verdana, sans-serif;
height: 29px;
font-size: 12px;
padding: 0 0 0 10px; /* this is used for something else */
background-color: #456;
}

#nav ul, #nav ul li {
list-style: none;
margin: 0;
padding: 0px;
}

#nav ul {
text-align: center;
}

#nav ul li {
display: inline;
}

#nav ul li.last {
margin-right: 0;
}


#nav ul li a {
color: #FFF;
text-decoration: none;
padding: 8px 20px 7px 20px;
line-height:29px;
}

#nav ul li a:hover {
background-color: #789;
}
</style>

<div id="nav">
<ul>
<li><a href="/1/">One</a></li>
<li><a href="/2/">Two</a></li>
<li><a href="/3/">Three</a></li>
<li><a href="/4/">Four</a></li>
</ul>
</div>

vyskúšali ste:

#nav ul li a {
color: #FFF;
text-decoration: none;
padding: 0px 0 0 20px;
height: 29px;
line-height: 29px;
}