[html][css] Menu obrazkowe

[mkas]

Dzięki za czas poświęcony na odpowiedź :)

zle zle zle.
1) ID jest unikalne. Może być 1 raz. Jeżeli stylujesz LI to A musisz złapać #menu_1 A

Dopiero zaczynam projektować strony stąd te głupoty;) Wiem, że ID jest unikalne, ale jak to pisałem coś mnie zaślepiło i przekonany byłem, że unikalne jest w obrębie jednej klasy - dla A są osobne id, a dla LI osobne. Teraz już wiem, że to głupota:D

2) a#menu2 ????? zle. Jeżeli używasz ID, wtedy nie używasz tagów bo wolniej to działa. Użyj więc samego #menu2 - ale patrz pkt 1 - nie może być 2 takich samych elementów o tym samym ID
3) słyszał o tym, że każdy element może mieć kilka backgroundów? Niech poczyta, dzięki temu pozbędzie się jakiś ...separatorów

Ok, rozumiem.

5) Teoretycznie boki mogą być ideowo jak u ciebie, ale na pewno nie tak jak zrobiłeś:

Kod:

<li id="menu3"><a href="#" id="menu3" ></a></li>
    <div id="menuRight"></div></a></li>

??? Gdzie jest otwarte LI? Czemu nagle div znajduje się w ul?

To błąd przy nieuważnym skopiowaniu kodu. Wewnątrz UL mam tylko LI, a ten div znajduje się wewnątrz LI.

powinieneś mieć raczej ideowo tak:
boki jak to boki - są na bokach. Dajesz im absolute, left, right, odpowiednie wymiary i overflow:hidden. Lista ma pozycje relatywna i marginesy boczne o szerokości bocznych elementów. Dzięki temu wszystko z automatu ładnie się układa a i nie ma głupich dodatkowych LI:

Kod:

<div#menu>
<span#lewo></span>
<ul>....</ul>
<span#prawo></span>
</div>

A potem stylować

Kod:

#menu {height:....; padding:0 ....; position:relative;}
#menu span {position:absolute; left:0; top:0; display:block; width:px; height:px; background.......}
#menu span:first-child {position:absolute; left:0; top:0; display:block; width:px; height:px; background.......}
#menu ul {.....}
#menu ul li {....}
#menu ul li a {display:block; width:100%; height:.....; background:url(....) center center;}

A tego już niestety nie rozumiem, który selektor do czego służy, gdzie powinienem podać ścieżki do obrazka z tekstem, gdzie do backgroundu czy hoverów?