[css,xhtm] menu - div linkiem

[dejw]

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>

to kiedy najadę kursorem na 1 przycisk to podświetla się zawsze ostatni, a nie ten co powinien, oraz do ustalonego ostatniego odnośnika mnie przenosi, a nie tego do którego powinno.

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.

[Labsta.com]

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.

[KowR]

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.

[dejw]

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?

[Leja]

Ja na swojej stronie mam tak

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

<a class="link" href="http://www.entertothegym.fora.pl"><span>entertothegym.fora.pl</span></a>

[KowR]

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).

[Labsta.com]

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.