Menu poziome - Wersja do druku

Menu poziome - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Menu poziome (/thread-menu-poziome--4596)

Menu poziome - cyfran - 05-08-2010

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:
[Obrazek: menu2.png]

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?

RE: Menu poziome - Kartofelek - 05-08-2010

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"

RE: Menu poziome - cyfran - 05-08-2010

Działa.
Dziękuję! Wink