[css] a.hover werkt niet icm div's?

[Dark Blue]

Disclaimer: sorry voor de layoutvern**king. Kan helaas niet anders
Ik heb een nieuwe site ontwikkeld voor een klant en ik kom erachter dat css hover in combinatie met layers totaal niet klopt.

De situatie nu:
http://www.stylite.nl/previews/drost
voor een scrollend geheel:
http://httpd.chello.nl/a.ulrich/drost/
(van vanmiddag nog, niet alles klopt dus, en geen links)

Ik heb in dat menu-frame de scrolling layer van Clay gebruikt, en er dus dmv. z-index een layer overheen gezet waar de boel half onder verdwijnt mocht er een waslijst aan menu-items onder komen.
De div constructie is voor kenners bekend:

code:

<div width="160 " height="47" style="z-index: 200; position:absolute; left:0; top:0;">[img]"gfx/underlogo.gif"[/img]</div>
<div width="160 " height="220" style="z-index: 50; position:absolute; left:0; top:0;">[img]"gfx/menuback.gif"[/img]</div>
<div id="container">
    <div id="content" class="menu">
    <br>[img]"gfx/menu.gif"[/img]<br>
    <a target="content" href="content.htm">Eerste link</a><br>
    <a target="content" href="content.htm">Tweede link</a><br>
    </div>
</div>

^{nb, die image is voor het woordje menu}
Mijn css, erboven, ziet er als volgt uit:

code:

<style type="text/css">
#container      {position:absolute; width:137; height:214; left:3; top:3; clip:rect(0,137,214,0); overflow:hidden; z-index: 100;}
#content        {position:absolute; left:0; top:0; width:137; z-index: 100;}
.menu           {font-family: Arial; font-size: 14px; font-weight: bold; color: #000000; line-height: 25px;}
a                   {font-family: Arial; font-size: 14px; font-weight: bold; color: #000000; line-height: 25px; text-decoration: none;}
a.hover         {font-family: Arial; font-size: 14px; font-weight: bold; color: #007ac3; line-height: 25px; text-decoration: none;}
a.active            {font-family: Arial; font-size: 14px; font-weight: bold; color: #ed1b2d; line-height: 25px; text-decoration: none;}
a.visited       {font-family: Arial; font-size: 14px; font-weight: bold; color: #000000; line-height: 25px; text-decoration: none;}
</style>

Als ik nu over een link in het menu ga, wordt hij niet blauw, al zou dat wel moeten. Ik heb al met de z-indexen zitten prutsen, dwz. de 'a' in de css een z-index van 300 meegeven, maar dat lost niks op. Het lijkt alsof er iets overheen zit, maar ik weet niet wat.
Ja, die layer met z-index 200, waar die rode boog in staat, maar die staat er bóven...niet er óp. Daarom heb ik het menu ook zo laag laten beginnen, want anders was een link helemaal niet aanklikbaar.
Onderlijning weghalen is mogelijk en aanklikken kan ook, dus ik snap het niet meer helemaal...

[Willem]

Misschien moet je in je CSS wel

code:

a:hover {
 /* bla */
}

ipv

code:

a.hover {
  /* bla */
}

_{/edit
Oftewel dubbelpunt in plaats van punt}

[Verwijderd]

Op donderdag 16 mei 2002 20:26 schreef willem169 het volgende:

Misschien moet je in je CSS wel ...

Dat weet ik wel zeker ja

Even nog iets over de style definitions:

Ten eerste kun je die het best buiten je HTML pagina houden, dat is netter in je source, en het is oorspronkelijk bedoeld als echt apart bestand waar eventueel meerdere HTML documenten de gegevens uit kunnn halen.

Maar goed, ten tweede nog even iets inhoudelijks:
Je hebt een aantal dubbele definities, en dat kan geen kwaad, want het zijn cascading stylesheets, en styles kunnen elkaar overschrijven of aanvullen. Maar in dit geval is het niet nuttig bij de a:hover pseudo-class etc.

In de hoofd class (a) geef je al alle properties, maar in de pseudo-classes schrijf je ze bijna allemaal over met dezelfde informatie. Je hoeft in de pseudo-classes eigenlijk alleen color te herdefiniëren.

Nog 1 tip: bij een color hoort eigenlijk ook altijd een background-color, als je deze niet wilt opgeven kun je background-color: inherit; opgeven.

[Dark Blue]

waarom keek ik daar nou overheen...aarghh

ok...dat verander ik
woei, willem169 is weer vrolijk

* uhm, eigenlijk, hij doet het nog steeds niet zo...
staat nu online op het stylite domein

En verder, Cheatah bedankt... het zou nog best handig kunnen zijn om dit maar in een aparte stylesheet te zetten. Dit moet namelijk een simpel-niet-htmller-proof site worden, en hoe minder 'overbodige' code er dan in staat, hoe minder de gebruiker verward wordt... hij moet namelijk zelf in de html gaan copy-pasten (er komt geen cms achter omdat dat de moeite niet is).

Ik snap al wat je bedoelt met dat a:hover enzo dat ik eigenlijk teveel opschrijf...ach, dat is gewoon gecopy'paste... ik let nooit zo op lengte van de code...maar het is idd overbodig in dit geval.

Wat bedoel je met dat background-color? Moet ik bij tekst, divs enzo, altijd standaard 'een' (al dan niet null-waarde) background opgeven? Is dat verplicht, of gewoon netjes?

[teacher]

hee toeter,

welke kleur heb je je a:visited gegeven?
juist ja: zwart. Zou je die niet even in blauw veranderen??

t.

[Dark Blue]

Op donderdag 16 mei 2002 23:01 schreef teacher het volgende:
hee toeter,

welke kleur heb je je a:visited gegeven?
juist ja: zwart. Zou je die niet even in blauw veranderen??

t.

teacher! jij hier! maar, wat maakt de a:visited uit? bij hover hoort hij blauw te worden...

mijn css weer voor ik-lees-alleen-de-eerste-post'ers:

code:

<style type="text/css">
#container      {position:absolute; width:137; height:214; left:3; top:3; clip:rect(0,137,214,0); overflow:hidden; z-index: 100;}
#content        {position:absolute; left:0; top:0; width:137; z-index: 100;}
.menu           {font-family: Arial; font-size: 14px; font-weight: bold; color: #000000; line-height: 25px;}
a                   {font-family: Arial; font-size: 14px; font-weight: bold; color: #000000; line-height: 25px; text-decoration: none;}
a:hover         {font-family: Arial; font-size: 14px; font-weight: bold; color: #007ac3; line-height: 25px; text-decoration: none;}
a:active            {font-family: Arial; font-size: 14px; font-weight: bold; color: #ed1b2d; line-height: 25px; text-decoration: none;}
a:visited       {font-family: Arial; font-size: 14px; font-weight: bold; color: #000000; line-height: 25px; text-decoration: none;}
</style>

btw, ook als ik een class meegeef aan de link wil hij niet on hover blauw worden

Ik ga overigens die door Cheatah genoemde overbodige css eruit halen hoor, rustig

[Willem]

Dark Blue:
woei, willem169 is weer vrolijk

Huh? Was ik niet vrolijk dan?

* Willem is altijd vrolijk

[Verwijderd]

Op donderdag 16 mei 2002 21:44 schreef Dark Blue het volgende:

Wat bedoel je met dat background-color? Moet ik bij tekst, divs enzo, altijd standaard 'een' (al dan niet null-waarde) background opgeven? Is dat verplicht, of gewoon netjes?

Het is netjes (volgens mij niet verplicht) om color en background-color altijd samen te gebruiken, dus als je de één definieert, dan is het netjes om de ander ook te definieren. Dus òf geen van beiden, òf allebei

Dat heb ik in ieder geval begrepen uit de output van de CSS validator op w3c.org

[teacher]

Zodra je op de links geklikt hebt zijn ze dus visited...
geef anders een geen kleur op voor je visited link; that should do the trick.

t.

[teacher]

oh ja, en ik ben wel eens hier... maar niet heel vaak..
t.

[Verwijderd]

Nou um... A:class (hover/visited/active) werkt alleen in IE en browsers met die standaard (Opera 6 ook daggik)... Minder

Anyway ik doe :visited altijd de normale kleur, of maar heel iets er naast... Anders verpest het je layout zo

Hmm zeer offtopic allemaal maarja

[F97]

Op donderdag 16 mei 2002 23:18 schreef Dark Blue het volgende:

[..]

code:

<style type="text/css">

a   { /* blabla */ }

</style>

moet dat niet a:link worden?

[JSchut]

zet active is onder visited dat kan een hoop schelen

[Dark Blue]

Op vrijdag 17 mei 2002 23:44 schreef teacher het volgende:
Zodra je op de links geklikt hebt zijn ze dus visited...
geef anders een geen kleur op voor je visited link; that should do the trick.

t.

Juist, dat was em. Ik snap niet wat er mis ging, maar ik heb nu dus op Cheatahs advies even die css wat laten inslinken en ook de kleuren voor visited en active eruit gehaald... en dat werkt

* Dark Blue gaat ook in een vrij uurtje maar eens die css regels doorpluizen...toch wel leuk om het correct te weten