+- 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ł: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: [css,xhtm] menu - div linkiem (/thread-css-xhtm-menu-div-linkiem)
[css,xhtm] menu - div linkiem - dejw - 02-06-2009
Witam, chcę zrobić menu z div'ów, które po najechaniu się zmieniają (opcja hover) i odnośniki do innych stron, ale mam taki problem, że kiedy umieszczę wszystko tak jak w przykładzie:
Kod:
<a href="index.html"><div id="przycisk1"></div></a>
<a href="index2.html"><div id="przycisk2"></div></a><a href="index3.html"><div id="przycisk1"></div></a>css:
Kod:
#przycisk1
{
background: url("obrazki/buttons/przycisk1a.png") no-repeat;
width: 127px;
height: 50px;
margin-left: 215px;
margin-top: -10px;
text-align: center;
}
#przycisk1:hover
{
background: url("obrazki/buttons/przycisk1b.png") no-repeat;
}
#przycisk2
{
background: url("obrazki/buttons/przycisk2a.png") no-repeat;
width: 127px;
height: 50px;
margin-left: 352px;
margin-top: -50px;
text-align: center;
}
#przycisk2:hover
{
background: url("obrazki/buttons/przycisk2b.png") no-repeat;
}
#przycisk3
{
background: url("obrazki/buttons/przycisk3a.png") no-repeat;
width: 127px;
height: 50px;
margin-left: 489px;
margin-top: -50px;
text-align: center;
}
#przycisk3:hover
{
background: url("obrazki/buttons/przycisk3b.png") no-repeat;
}Mam nadzieję, że jest to zrozumiałe, jeśli nie to dopowiem co będzie trzeba. Proszę o pomoc, gdyż jestem początkującym webmasterem.
RE: [css,xhtm] menu - div linkiem - Labsta.com - 02-06-2009
http://websta.pl/szybkie-triki/szybkitrik-obrazek-z-efektem-hover-rollover-w-css
Nie należy umieszczeć el. blokowcyh (div) w elementach liniowych (a).
Ogólnie można nazwać to "zasadą", że do menu stosuje się listy (ul) m.in. z uwagi na google, użyteczność itd.
RE: [css,xhtm] menu - div linkiem - KowR - 02-06-2009
Zamiast diva możesz użyć <span>, ale także odradzam.
Ew. wystarczy dodać grafikę w samym linku <a> ale w tedy w CSS musisz mu nadać szerokość, wysokość, background i display zmienić na block.
RE: [css,xhtm] menu - div linkiem - dejw - 04-06-2009
(02-06-2009, 12:25)rodi napisał(a): Zamiast diva możesz użyć <span>, ale także odradzam.
Ew. wystarczy dodać grafikę w samym linku <a> ale w tedy w CSS musisz mu nadać szerokość, wysokość, background i display zmienić na block.
a dlaczego span odradzasz?
RE: [css,xhtm] menu - div linkiem - Leja - 04-06-2009
Ja na swojej stronie mam tak
Cytat: a.link
{
background: url(fora_one.gif) no-repeat;
display:block;
height: 60px;
overflow:hidden;
width: 450px;
}
a.link:hover
{
background: url(fora_two.gif) no-repeat;
}
a.link span
{
display:block;
text-indent: -9999px;
}
a w HTML tak
Cytat:<a class="link" href="http://www.entertothegym.fora.pl"><span>entertothegym.fora.pl</span></a>
RE: [css,xhtm] menu - div linkiem - KowR - 04-06-2009
(04-06-2009, 03:21)dejw napisał(a):(02-06-2009, 12:25)rodi napisał(a): Zamiast diva możesz użyć <span>, ale także odradzam.
Ew. wystarczy dodać grafikę w samym linku <a> ale w tedy w CSS musisz mu nadać szerokość, wysokość, background i display zmienić na block.
a dlaczego span odradzasz?
A po co wrzucać tam multum niepotrzebnych "boxików"? Jak można to zrobić w samym odsyłaczu a?
Większość koderów używa span w linkach tylko w ostateczności - jeżeli dane przyciski muszą same dopasować się do tekstów z menu (a grafika jest złożona), że trzeba podzielić ją na lewy bok (stały), środkowy (który właśnie będzie dopasowywał się do tekstu) i prawy bok (stały).
RE: [css,xhtm] menu - div linkiem - Labsta.com - 04-06-2009
Co do <span> mam inne zdanie.
Pomijając Sliding Doors o którym mówisz, gdzie span jest potrzebny, gdy używam przycisków graficznych (z tekstem w obrazku), dzięki spanowi ukrywam tekst wpisany w html (np. text-indent: -9999px; ). Tak czy siak jest to "FRIENDLY" dla SEO i użyteczności.
Dodatkow jak widać autor tematu, używa właśnie takich przycisków o jakich napisałem. Natomiast jeśli są to linki tekstowe i zmienia się np. tło na hover to wiadomo, że nie ma sensu ładować spanów.