Sposoby tworzenia menu

[FasOlQa]

Witam.
Chciał bym z Wami podyskutować na temat tworzenia menu w html.
Zwykle menu co nie podlega dyskusji najlepiej robi się na <li></li>
W ten sposób możemy uzyskać również menu obrazkowe
<li><a href="#"><img></a></li>
Co jednak chciał bym zrobić coś takiego:
<li><a href="#"><div></div></a></li>
To mi się walidator czepia.

CSS:
#link{ width: 91px; height: 25px; background: url("img/link.png") top no-repeat; border: 0px;}

#link:hover{ width: 91px; height: 25px; background: url("img/alink.png") top no-repeat; border: 0px;}
}

Mam nadzieję, że zrozumieliście Chodzi po prostu o dyskusję na temat jak zrobić DOBRE menu z podmianą obrazka, podmiana którą pokazałem wydaje się najbardziej rozsądną (js też można wiem ;]) jednak co zrobić żeby było dobrze czekam na posty. Pozdrawiam i mam nadzieję, że przyłączycie się do dyskusji.

[ery]

Drugi zapis odpada na 100%, a w pierwszym zrobiłbym coś takiego:

<ul>
<li><a href="#"><img></a></li>
</ul>

CSS:
ul li { width: 91px; height: 25px; background: url("img/link.png") top no-repeat;}

ul li:hover{ width: 91px; height: 25px; background: url("img/alink.png") top no-repeat;}

li a { height: 25px; display:block;}

[FasOlQa]

Jeżeli:
<ul>
<li><a href="#"><img></a></li>
</ul>

img bedzie w li to podmiana tła li nic nie da bo obrazek i tak będzie na wierzchu.
a poza tym

ul li { width: 91px; height: 25px; background: url("img/link.png") top no-repeat;}
ul li:hover{ width: 91px; height: 25px; background: url("img/alink.png") top no-repeat;}
zamienił bym na
ul li { width: 91px; height: 25px; background: url("img/link.png") top no-repeat;}
ul li:hover{ width: 91px; height: 25px; background: url("img/link.png") bottom no-repeat;

i dał jeden image o rozmiarach 91x50 cos takiego jak http://design2k.nazwa.pl/todo/img/clients.png

[Marcin]

A po co ten <div></div> wewnątrz <a>? Jeśli już potrzebujesz jakiegoś elementu to sobie wrzuć tam <b></b> albo <i></i> a w CSS ostyluj dowolnie jak chcesz.

np:

<li><a href=""><b>element</b></a></li>

[FasOlQa]

A po co ten <div></div> wewnątrz <a>? Jeśli już potrzebujesz jakiegoś elementu to sobie wrzuć tam <b></b> albo <i></i> a w CSS ostyluj dowolnie jak chcesz.

np:

<li><a href=""><b>element</b></a></li>

a po co <b> ?

html:
<li class="link"><a href="" title="link">Link</a></li>
css:
a.link{width: 76px; height: 62px; background: url('*.png');}
a.link:hover{width: 76px; height: 62px; background: url('*2.png');}
bądź css:
a.link{width: 76px; height: 62px; background: url('*.png') top no-repeat;}
a.link:hover{width: 76px; height: 62px; background: url('*.png') bottom no-repeat;}

i wszystko pięknie działa