+- 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: Sposoby tworzenia menu (/thread-sposoby-tworzenia-menu)
Sposoby tworzenia menu - FasOlQa - 05-05-2010
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.
RE: Sposoby tworzenia menu - ery - 05-05-2010
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;}
RE: Sposoby tworzenia menu - FasOlQa - 06-05-2010
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
RE: Sposoby tworzenia menu - Marcin - 06-05-2010
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>
RE: Sposoby tworzenia menu - FasOlQa - 07-05-2010
(06-05-2010, 21:32)Marcin napisał(a): 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.a po co <b> ?
np:
<li><a href=""><b>element</b></a></li>
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