[CSS] Achtergr.kleur door laten lopen over de volle breedte

[Spasm]

Hallo,

Ik heb de volgende code:

code:

a:hover {
    background-color: #020200;
    color: #FEFEFE;
    text-decoration: none;
    width: 100%;
}

Omdat ik de achtergrond kleur wou laten doorlopen over de hele breedte van de <TD> heb ik de regel width: 100% toegevoegd.

En daar gaat het dus mis, met de normale tekstlinks is er niks aan de hand, maar de afbeeldingen zijn niet meer clickable. (alleen door koppeling openen in een nieuw venster.)

Nu kwam ik er achter dat in IE6.0 de regel width: 100% helemaal geen werking heeft. Terwijl het in IE5.0 wel werkt.

Weten jullie een andere oplossing in CSS ? (Liever geen javascript, maar als het niet anders is zijn suggesties wel welkom).

Zie voor een voorbeeld http://members.lycos.co.uk/spasm1/rommel/menu.html

[dominic]

Kun je niet beter een aparte TD class gebruiken wanneer deze een link bevat? Dan kun je nl. gewoon de TD een andere achtergrondkleur geven..

[Willem]

Een onclick event aan de td toevoegen ipv a href?

[crisp]

display: block gebruiken, eventueel in een aparte class voor de tekst-links zodat je er ook geen last van hebt met afbeeldinglinks

[Shagura]

bestaat er wel een width property voor a:hover (lijkt me sterk eerlijk gezegd)

[crisp]

Shagura schreef op 06 May 2003 @ 13:11:
bestaat er wel een width property voor a:hover (lijkt me sterk eerlijk gezegd)

waarom niet? echter heeft het geen zin om een width op te geven voor een inline element.

[Spasm]

crisp schreef op 06 mei 2003 @ 12:50:
display: block gebruiken, eventueel in een aparte class voor de tekst-links zodat je er ook geen last van hebt met afbeeldinglinks

Dat werkt !! Bijna ik heb de verandering geupped de boel verspringt nu is hier nog iets aan te doen ?

[crisp]

Spasm schreef op 06 May 2003 @ 13:23:
[...]


Dat werkt !! Bijna ik heb de verandering geupped de boel verspringt nu is hier nog iets aan te doen ?

Ik zou de display: block gewoon standaard op de A tag zetten, en die <br>'s weghalen. block is nu eenmaal block...

[Spasm]

Als ik die <br>'s weghaal, dan komen de teksten naast elkaar te staan.

[Spasm]

code:

a:hover {
    background-color: #020200;
    color: #FEFEFE;
    text-decoration: none;
        display: block;
        margin-bottom: 0px;
}

Opzich is dit de goede code, alleen die verspringing moet nog even weg, ik heb het geprobeert met margin-bottom: 0px; maar dat werkt dus niet
iemand anders nog een idee ?

[crisp]

probeer dit eens:

Cascading Stylesheet:

a, a:link, a:visited, a:active {
    background-color: transparent;
    color: #000000;
    text-decoration: none;
    display: block;
    width: 100%;
}
a:hover {
    background-color: #020200;
    color: #FEFEFE;
}

[Spasm]

That's it !!! Alleen die width: 100% moet weg natuurlijk, want dat was mijn clickable probleem. Hardstikke bedankt !!

[Spasm]

Toch nog 1 vraagje: is er ook een mogelijkheid om dat block weg te halen als het om een afbeeldingslink gaat ? Ik heb de huidige versie net geupped check bovenstaande link

[Spasm]

..niemand ??

[crisp]

Spasm schreef op 06 May 2003 @ 16:59:
Toch nog 1 vraagje: is er ook een mogelijkheid om dat block weg te halen als het om een afbeeldingslink gaat ? Ik heb de huidige versie net geupped check bovenstaande link

crisp schreef op 06 May 2003 @ 12:50:
display: block gebruiken, eventueel in een aparte class voor de tekst-links zodat je er ook geen last van hebt met afbeeldinglinks

[Spasm]

Uhm.. bedankt, maareh hoe doe ik dat ??

[crisp]

Cascading Stylesheet:

a.textlink {
    background-color: transparent;
    color: #000000;
    text-decoration: none;
    display: block;
    width: 100%;
}
a.textlink:hover {
    background-color: #020200;
    color: #FEFEFE;
}

en nu je textlinks:

HTML:

<a class="textlink" href="item1.html">item 1</a>

[Spasm]

Stupid me ! Dat had ik ook zelf kunnen verzinnen.
Thank you !