Witam.

Podczas kodowania szablonu napotkałem problem, z którym nie mogę się uporać.

Potrzebuję robić belkę z buttonami, belka musi mieć tło, każdy z buttonów również a na każdym buttonie musi być link. Jak się z tym uporać? Obecnie kod wygląd tak:

HTML:

[HTML] pobierz, plaintext 
<div id="podnav">
   <img src="<?=TEMPLATEPATH?>/i/podnav.png" width="100%" height="100%" />
   </div>
      	<ul id="nav">
        	<div id="podbutton"><img src="<?=TEMPLATEPATH?>/i/button.png" width="100%" height="100%" /><div id="button"><a href="#">Link1</a></div></div>
        	<div id="podbutton"><img src="<?=TEMPLATEPATH?>/i/button.png" width="100%" height="100%" /><div id="button"><a href="#">Link2</a></div></div>
        	<div id="podbutton"><img src="<?=TEMPLATEPATH?>/i/button.png" width="100%" height="100%" /><div id="button"><a href="#">Link3</a></div></div>
        	<div id="podbutton"><img src="<?=TEMPLATEPATH?>/i/button.png" width="100%" height="100%" /><div id="button"><a href="#">Link4</a></div></div>
        	<div id="podbutton"><img src="<?=TEMPLATEPATH?>/i/button.png" width="100%" height="100%" /><div id="button"><a href="#">Link5</a></div></div>
        	<div id="podbutton"><img src="<?=TEMPLATEPATH?>/i/button.png" width="100%" height="100%" /><div id="button"><a href="#">Link6</a></div></div>
        </ul>
[HTML] pobierz, plaintext 

CSS:

[HTML] pobierz, plaintext 
#podbutton {
	float: left;
	left: 25px;
	height: 26px;
        z-index: 1;
}
#button {
	float: left;
	top: 5px;
	left: 15px;
        z-index: 2;
}
#podnav {
	position: absolute;
	top: 165px;
	left: 0;
	width: 100%;
	height: 32px;
	padding: 7px 0 0 0;
}
[HTML] pobierz, plaintext 

Ok pierwsza rzecz.

Po co stosujesz ul skoro nie umiesz?? Zastosowałem znaczniku ul a reszta gdzie?

Menu zazwyczaj ma taką strukturę.


I teraz pod diva daje tło jakie ma być pod całym menu, zaś pod odnośnik dajesz oddzielne tło i na to wszystko poleci tekst z linkiem.

Wohoho.... No to zamieszałeś z tą liczbą elementów. O_O

Ja bym zrobił to tak:
1) Z HTMLa usunąłbym wszystko z wyjątkiem UL, LI i linków A. Wszystkie obrazki i divy idą do kosza. Jak najmniej elementów == szybsze pobieranie strony i łatwiejsza modyfikacja wyglądu strony w przyszłości.
2) dla UL dałbym display: block; list-style: none; ustawił mu background: url('sciezka') no-repeat; tak, żeby mieć ten obrazek pod menu właśnie... pod menu, a nie jako oddzielny obiekt. Oczywiście trzeba też ustawić odpowiednią wysokość oraz szerokość dla tego UL.
3) Dla elementów LI też dałbym wyświetlanie jako block, a dodatkowo: float: left;
4) Dla elementów A dałbym odpowiednie tła, wyświetlanie block, oraz ustawiłbym im wysokości i szerokości tak aby były równe tym z grafiki którą użyję.

i gotowe
HTML znacznie bardziej czysty, a CSS mniej podatny na wykrzaczenie się