Prevence zalamování řádku
24. 04. 2006 | Redakce Interval.cz | Pro CSS | Komentáře: 0
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>
Další aktuální články na interval.cz
- Chamurappiho Webylon: čtyři články s kritikou W3C
- Nenápadný cloud: synchronizace dat z prohlížečů
- Pozvánka: Random Hacks of Kindness 2012
- Zajímavost o češtině pro redakční systém WordPress
- Pozvánka na konferenci o vyhledávačích zboží 2012
Tematicky související články
- Fotogalerie se stejnou výškou řádku
- Horizontální vysouvací menu
- Experimentální vysouvací hover menu bez skriptování
- Mapa webu
- Hover menu
Dejte vědět i ostatním o článku
Diskuse (počet komentářů: 0)
Buďte prvním návštěvníkem, který přidá nový komentář.
