[CSS] gekleurde balk boven link bij hover

[Verwijderd]

Mensen,

Ik wil het onderstaande bereiken met CSS maar vraag me af hoe ik dat moet aanpakken...



Beide moeten links worden en de linker link (what's in a name) geeft de toestand van een mouseover weer. Er komt dus een roze balk boven het geheel te staan.

Mijn vraag is... hoe ga ik dit doen?
Ik heb het eerst in de TD afgehandeld:

Cascading Stylesheet:

td.nav_boven {
    height: 34px;
}
td.nav_boven:hover {
    background-image: url('images/nav_header_button_hover.gif');
}

/* 
    plus nog wat opmaak dingetjes als font-size waar ik jullie 
    niet mee lastig wil vallen 
*/

In mn html file doe ik <td class="nav_boven"> maar dat lijkt me duidelijk. Euhm.. ok het plaatje is uiteraard 34 pixels hoog en 1 pixel breed zodat ik hem precies boven de tekst kan plaatsen (niet naar links of rechts overstekend)

Echter werkt dit niet in IE (v 6.x) en krijg ik bij Firefox en Opera het volgende:


Het is dus de bedoeling dat de roze balk boven de link net zo breed wordt als de tekst van de link zelf en dat er geen plaatje roze kleur onder de tekst komt te staan zoals in bovenstaand plaatje.
Ik weet dat dit op te lossen is door bijvoorbeeld een plaatje te maken die 100px hoog is met bijv 10 pixels roze en 90 pixels wit maar netjes lijkt me dat niet... Het grootste probleem volgens mij bij mijn aanpak... Volgens mij is deze nogal omslachtig, is hier geen betere manier voor te bedenken? Misschien moet de afhandeling in de A tag? of misschien met een DIV?

[TeeDee]

Heb je iets online staan?
Je bent je ook bewust dat IE 6 (en lager) geen :hover begrijpt op alles behalve een a?
In FF en Opera gok ik dat er nog wat margins/paddings en evt. een repeat op de background verkeerd zit.

Maar dit is allemaal makkelijker te checken als je iets online hebt staan.

[ Voor 4% gewijzigd door TeeDee op 30-11-2006 10:59 ]

[Verwijderd]

Ok nou dat die hover niet werkt in IE dat moet dan maar als het niet anders kan.

Hier de link

[imp4ct]

HTML:

<style type="text/css"> 
.jouknop 
{
 margin: 0px;
 font-family: joufont, Arial, Tahoma, Verdana;
}

.jouknop a:active
{
 text-decoration: none;
 background-color: #FFF;
 border-top: 34px solid #joukleur;
 padding-top: 5px;
}

.jouknop a:link
{
 text-decoration: none;
 background-color: #FFF;
 border-top: 34px solid #joukleur;
 padding-top: 5px;
}

.jouknop a:visited
{
 text-decoration: none; background-color: #FFF;
 border-top: 34px solid #joukleur;
 padding-top: 5px;
}

.jouknop a:hover
{
 text-decoration: none; background-color: #FFF;
 border-top: 34px solid #jouhoverkleur;
 padding-top: 5px;
}
</style>

Iets in die aard, kan het hier nu niet testen. Zit op werk

[ Voor 49% gewijzigd door imp4ct op 30-11-2006 11:30 ]

[crisp]

Waarom doe je niet gewoon zoiets:

HTML:

<style type="text/css">

ul#menu {
    overflow: auto;
    padding: 0;
    margin: 0;
    list-style-type: none;
}
ul#menu li {
    float: left;
    margin: 0 5px;
}
ul#menu li a {
    display: block;
    border-top: 10px solid white;
    text-transform: uppercase;
    color: #444;
    text-decoration: none;
    font-weight: bold;
}
ul#menu li a:hover {
    border-top-color: red;
}

</style>
<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Registreren</a></li>
    <li><a href="#">Contact</a></li>
</ul>

[TeeDee]

Buiten de opmerking van crisp (semantiek, een table is niet echt hendig hiervoor) heb ik heel even snel je CSS bekeken.

Als je nu

Cascading Stylesheet:

background-repeat:repeat-x;

aan je .nav_boven:hover hangt ben je ook al een heel eind.

Maar nogmaals, kijk naar het snippet van crisp en/of die van imp4ct

imp4ct schreef op donderdag 30 november 2006 @ 11:31:
[...]
Niet alle credit naar Crisp eh . Mijn voorbeeld kwam er "redelijk" dicht bij

Asjeblieft

[ Voor 29% gewijzigd door TeeDee op 30-11-2006 11:39 ]

[Verwijderd]

Crisp, it is echt precies wat ik zoek

Nu eerst es even checken wat die code precies doet

Die background-repeat: repeat-x; kan ik ook nog wel ergens voor gebruiken overigens!

Dank

[imp4ct]

TeeDee schreef op donderdag 30 november 2006 @ 11:23:
Maar nogmaals, kijk naar het snippet van crisp

Niet alle credit naar Crisp eh . Mijn voorbeeld kwam er "redelijk" dicht bij