[html][css] Menu obrazkowe

[mkas]

Witam, mam problem z poprawnym zakodowaniem prostego menu nawigacyjnego opartego na obrazkach. Przedstawię mniej więcej jak to powinno wyglądać:

Wszystko tutaj jest obrazkami:
a - lewa część menu,
b - obrazek o szerokości 1px powtarzany na całą szerokość,
c - obrazek z tekstem,
d - separator
e - prawa część menu.

Po najechaniu myszką na menu, powinno się zmieniać:
a na a' po najechaniu na pierwszą pozycję menu,
b na b' po najechaniu na któryś obszar z tekstem,
c na c' po najechaniu na któryś obszar z tekstem,
e na e' po najechaniu na ostatnią pozycję menu.

Oto co mam do tej pory:

Kod:

<ul id="menu">
    <li id="menu1"><a href="#" id="menu1" >
    <div id="menuLeft"></div></a></li>
    <li id="separator"></li>

    <li id="menu2"><a href="#" id="menu2" ></a></li>
    <li id="separator"></li>

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

CSS:

Kod:

ul, ul li {
    display: inline;
    list-style: none;
}

li#separator{
    background-image: url('menu/m-bg.png');
}

#menu {
    overflow: hidden;
    width: 650px;
    height:51px;
}

li#menu1 {
    background-image: url('menu/m-bg.png');
    padding: 16px 10px 16px 0px;
}

li#menu1:hover {
    background-image: url('menu/m-bg-roll.png');
}

a#menu1 {
    display: inline;
    height: 51px;
    background-image: url('menu/m-menu1.png');
    background-repeat: no-repeat;
    padding-right: 61px;
}

a#menu1:hover {
    background-image: url('menu/m-menu1-roll.png');
}

li#menu2 {
    background-image: url('menu/m-bg.png');
    padding: 16px 10px 16px 10px;
}

li#menu2:hover {
    background-image: url('menu/m-bg-roll.png');
}

a#menu2 {
    display: inline;
    background-image: url('menu/m-menu2.png');
    background-repeat: no-repeat;
    padding-right: 100px;
}

a#menu2:hover {
    background-image: url('menu/m-menu2-roll.png');
}

#menuLeft {
    float: left;
    height: 51px;
    padding-right: 12px;
    margin-top: -15px;
    background-image: url('menu/m-bg-lewa.png');
}

#menuLeft:hover {
    background-image: url('menu/m-bg-lewa-roll.png');
}

#menuRight {
    width: 16px;
    height: 51px;
    float: right;
    margin-top: -15px;
    background-image: url('menu/m-bg-prawa.png');
}

#menuRight:hover {
    background-image: url('menu/m-bg-prawa-roll.png');
}

W takim układzie działa prawie wszystko, ale:
1. Nie wyświetlają się separatory.
2. Obrazek z tekstem c, zmienia się na c' dopiero po najechaniu na sam tekst, a chciałbym ,żeby zmiana nastąpiła po najechaniu w obszar menu z tym tekstem.
3. Po najechaniu w obszar z pierwszą lub ostatnią pozycją nie zmieniają się lewa/prawa część menu (a/e).

Proszę o pomoc jak zakodować te trzy rzeczy. Dzięki z góry.

[Kartofelek]

zle zle zle.
1) ID jest unikalne. Może być 1 raz. Jeżeli stylujesz LI to A musisz złapać #menu_1 A
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
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?

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 najlepej jak użyjesz "selectizer" (patrz w google) i będziesz używał selektorów CSS3 takich jak nth-child(0), nth-child(1). Wtedy nie będziesz musiał używać żadnych ID

[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?

[Kartofelek]

W załączniku masz obrazek który ci mniej więcej pokaże o co chodzi. Pytaj o konkrety

zolte - spany boczne (boki)
fioletowe - UL
zielone - LI
A są w LI - nie rysowalem - stylowanie podale wcześniej
#MENU - div w którym jest ul, spany ect. Stylowanie podałem