[CSS] hoe een complete rij te highlighten ?

[Verwijderd]

bedoeling is dat er een lijst komt met 3 kolommen waarbij een hele rij wordt gelinked en bij mouseover wordt gehighlight

op http://www.wiseguide.nl/test.html staat dus hoe ik het heb gedaan en zo wil ik t ook maar zo mag het dus eigenlijk niet, de pagina wordt ook niet gevalideerd omdat je een <div> niet binnen een <a></a> mag zetten

toen dacht ik eraan om <li> te gaan gebruiken, naar aanleiding van het geweldige blauwe menuutje onderaan op http://www.alistapart.com/articles/taminglists/
maar hoe krijg ik dan 3 kolommen???

heb op listapart geen oplossing kunnen vinden hiervoor dus hoop dat hier iemand het weet

[disjfa]

je geeft een tr een classe en daarin krijgen de a`s een classe?

tr.highlight a{melp}

geen divs in een link............. links in een div

[ Voor 25% gewijzigd door disjfa op 01-02-2004 23:26 ]

[Scurra]

Misschien kan je beter een table gebruiken. Of gaat het niet gewoon om tabulaire data?

[X-Lars]

hier is al een topic over geweest laatst, ik zoek het ff op...

[Verwijderd]

tr.highlight {melp} ? snap ik dat ? nee

bovendien wil ik dus eigenlijk geen tabellen meer gebruiken
die probeer ik af te leren

anders had ik gewoon in 5 seconden een tabel gemaakt en <tr onMouseOver="style.backgrond blabla gedaan

maar probeer het dus nu netjes in gevalideerd XHTML te doen met alle layout in CSS

[ Voor 6% gewijzigd door Verwijderd op 01-02-2004 23:28 ]

[disjfa]

div.rij:hover werkt wel alleen in normale browsers

[X-Lars]

waarom hardnekkig vasthouden aan die validatie? de data die je wilt laten zien is toch tabulaire data? daar kun je dus gewoon tabellen voor gebruiken imo..

maar goed, voor jou dan deze nutteloze link

[crisp]

waarom zou je een div in een anchor willen zetten? Desnoods geef je je anchor dan een display:block
Anyhow, er is meer tussen hemel en aarde, en je zou ook een beetje kunnen spelen met de DOM zoals:

code:

onmouseover="this.parentNode.style.backgroundColor='#FF0'"

[Verwijderd]

omdat ik wil dat je op de hele rij kan klikken, niet alleen op de tekst
en omdat ik dus 3 dingen naast elkaar wil zetten en zie afgezien van tabellen geen andere mogelijkheid om dit zonder divs te doen zoals ik nu heb, suggesties zijn welkom...

nahja zal dan dus toch maar weer terug moeten vallen op tabellen zie ik
beetje jammer dat je voor dit soort basic dingen toch weer afhankelijk bent van tabellen...

ik zal het morgen es proberen met tabellen + css ipv tabellen + javascript
kijken of ie dat wel valideert... zal wel niet maarja, dit ook niet dus
dan maar geen validatie ...

thnx iig!

nu eerst slapen

[ Voor 25% gewijzigd door Verwijderd op 01-02-2004 23:40 ]

[Scurra]

Verwijderd schreef op 01 februari 2004 @ 23:27:
bovendien wil ik dus eigenlijk geen tabellen meer gebruiken
die probeer ik af te leren
[...]
maar probeer het dus nu netjes in gevalideerd XHTML te doen met alle layout in CSS

Leuk dat je zo meedoet aan de "Tabellen zijn evil"-hype, maar je begrijpt duidelijk niet waar het om gaat. Tabellen voor opmaak zijn idd erg fout, maar tabellen om tabulaire data weer te geven, wat jij dus wil, zijn prima. Sterker nog, dat is een correctere oplossing, qua semantiek.

De <table>-tag is nog steeds niet deprecated hoor, en dat zal ook niet gauw gebeuren.

[ Voor 6% gewijzigd door Scurra op 02-02-2004 00:06 . Reden: Deprecated is best een moeilijk woord :o ]

[Verwijderd]

* knip *

Ik ben het overigens helemaal met Scurra eens, dat je niet bang moet zijn om tabellen te gebruiken.


grote edit:
om even terug te komen op wat ik net allemaal zei: ik geloof dat je dit het beste kunt aanpakken zonder <li> tags.

Je krijgt dan zoiets:

Cascading Stylesheet:

    DIV.LinkList {
     font-family : Verdana, Arial, sans-serif; 
     font-size : 11px; 
     line-height : 13px; 
     color : #004080; 
     border-bottom : 1px dotted #C0C0C0; 
     margin : 0px; 
    } 

    DIV.LinkList td {
     border : 0px none transparent; 
     border-top : 1px dotted #C0C0C0; 
     margin : 0; 
    } 

    DIV.LinkList td a.hvr {
     display : block; 
     padding : 4px 0px 4px 0px; 
     margin : 0px; 
     text-decoration : none; 
     color : #004080; 
     width : 100%; 
    } 

    DIV.LinkList td a.hvr:hover {
     text-decoration : none; 
    }

HTML:

 <div class="LinkList">
  <table style="width: 700px; border-width: 0px">
   <tr onmouseover="aHover(this);" onmouseout="aNormal(this);">
    <td class="tdHvr" style="width: 150px" align="center">
     <a href="#" class="hvr">01/01/2004</a></td>
    <td class="tdHvr" style="width: 400px" align="center">
     <a href="#" class="hvr">hyperlinkje</a></td>
    <td class="tdHvr" style="width: 150px" align="center">
     <a href="#" class="hvr">#01</a></td>
   </tr>
  </table>
 </div>

JavaScript:

<script type="Text/Javascript">

   <!-- // linklist hover effecten

    function aHover(aTag)
     { aTag.style.backgroundColor = ('#EDF2F6') }

    function aNormal(aTag)
     { aTag.style.backgroundColor = ('') }

   //-->

</script>

Je kunt hier een demotje bekijken:
http://mediacreations.nl/xhtml/menu/#GoT

[ Voor 119% gewijzigd door Verwijderd op 02-02-2004 02:17 ]

[drm]

nesQuick:
Ik ben het overigens helemaal met Scurra eens, dat je niet bang moet zijn om tabellen te gebruiken.

Ik ben het er in zoverre mee eens dat je niet bang moet zijn om tabellen te gebruiken waar ze voor bedoeld zijn...

hier kun je mijn versie zien en voor 't gemak maar even een linkje naar de css.

edit:

* drm ziet nu dat ik gister niet zo goed gekeken heb
Dit is inderdaad gewoon tabulaire data en moet je gewoon in een tabel zetten

[ Voor 15% gewijzigd door drm op 02-02-2004 08:51 ]

[Verwijderd]

helemaal duidelijk!
superbedankt allemaal, vooral nesquick

vooral dat block in

DIV.LinkList td a.hvr {
display : block;


das dus de oplossing voor de hele rij mee te pakken als link
ben nog beetje css noebje dus dat wist ik dus nog niet

[Verwijderd]

wou nog ff dit rare verschijnsel melden

heb nu dus de onderste methode van nesquick gebruikt maar de eerste keer dat ik met mijn muis over een rij ging werd de topborder van de 1e td zwart, alle hovers na die 1e keer waren gewoon normaal !
dus weer pagina reloaden, weer de 1e hoover zwarte topborder!
bizar....

bij jouw pagina was/is dat dus helemaal niet
logisch want dat staat nergens ofzo

nahja heb het nu opgelost door bij mijn hover een border: 0px; bij te zetten...