Prevence zalamování řádku

24. dubna 2006

•

Toto řešení ukazuje, jak lze snadno obejít problém MSIE s interpretací mezer v menu a podobných konstrukcích. Celý trik je přitom založen na využití CSS vlastnosti „white-space: nowrap“, která brání zalamování řádků.

Zde si můžete prohlédnout výsledek.

Toto řešení publikovala Veerle Pieters. Bližší popis najdete v článku CSS: the white-space property.

CSS

#menunav
{
margin: 20px;
}
#menunav ul
{
margin: 0;
padding: 0;
list-style: none;
}
#menunav li
{
float: left;
margin: 0 3px 0 0;
padding: 0 0 0 9px;
background: url(„menu-l.gif“) no-repeat top left;
white-space: nowrap;
}
#menunav a
{
float: left;
display: block;
width: .1em;
height: 15px;
background: url(„menu-r.gif“) no-repeat right top;
padding: 8px 10px 4px 1px;
text-decoration: none;
font: bold 10px „Helvetica“, sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
}
#menunav > ul a
{
width: auto;
}
#menunav li a:hover
{
color: #000;
}
#menunav #current
{
background-position: 0 -28px;
}
#menunav #current a
{
background-position: 100% -28px;
color: #fff;
}

XHTML

<html>
<body>
<div id=“menunav“>
<ul>
<li id=“current“><span><a href=“#“>Barebone systémy</a></span></li>
<li><a href=“#“>MP3 přehrávače</a></li>
<li><a href=“#“>Televizní a video karty</a></li>
<li><a href=“#“>Paměťové karty</a></li>
</ul>
</div>
</body>
</html>