Menu poziome

[cyfran]

Witam,

Chcę uzyskać taki efekt:


Tak wygląda kod html:

Kod:

<div class="menu">
<ul>
<li><a href="strefatv.php"><span>Strefa - TV</span></a></li>
<li><a href="strefafm"><span>Strefa FM Group</span></a></li>
<li><a href="forum.php"><span>Forum Strefy Sukcesu</span></a></li>
<li><a href="kontakt.php"><span>Kontakt</span></a></li>
  </ul>
</div>

Taki jest kod CSS:

Kod:

.menu { width: 960px; height: 35px; background: url(images/menu_gora.png) no-repeat top;  }
.menu li a:hover { text-decoration: none; }
.menu li {  display: inline; }
.menu li a span { height: 25px; width: 168px; background: url(images/menu_przycisk.png) no-repeat left top; color: gray;  }

I dostaję coś takiego:


Czyli tło dla przycisku jest tylko wyświetlane częściowo - tyle ile zajmuje tekst - pomimo wartości width:168px oraz height: 25px.

Jak sprawić, żeby całe tło dla przycisku się wyświetlało, a tekst był na jego środku?

[Kartofelek]

zle pocięte.

background dajesz na LI, dajesz mu float:left; wymiary 168x25 + jakis margines by je rozsunac.
A linki dajesz : display:block; width:100%; height:25px; text-align:center; i resztę bez tła.
Span nie jest potrzebny

Kod:

.menu { width: 960px; height: 35px; background: url(images/menu_gora.png) no-repeat top;  }
.menu li {  float:left; height: 25px; width: 168px; background: url(images/menu_przycisk.png) no-repeat left top;}
.menu li a {  color: gray; text-decoration:none; display:block; width:168px; height:25px; text-align:center; line-height:25px;}
.menu li a:hover {text-decoration:none; }

I jeszcze jedno. Jeżeli wspierasz IE6, to zmień te png na gif. Szczególnie tyczy się to podkładu dla linków. Czemu? Google -> "png fix and link"

[cyfran]

Działa.
Dziękuję!