Toon posts:

[CSS] hoe een complete rij te highlighten ?

Pagina: 1
Acties:

Verwijderd

Topicstarter
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
  • Registratie: April 2001
  • Laatst online: 08-01 11:17

disjfa

be

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 ]

disjfa - disj·fa (meneer)
disjfa.nl


  • Scurra
  • Registratie: Augustus 2000
  • Niet online
Misschien kan je beter een table gebruiken. Of gaat het niet gewoon om tabulaire data?

  • X-Lars
  • Registratie: Januari 2004
  • Niet online

X-Lars

Just GoT it.

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

Verwijderd

Topicstarter
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
  • Registratie: April 2001
  • Laatst online: 08-01 11:17

disjfa

be

div.rij:hover werkt wel :) alleen in normale browsers :P

disjfa - disj·fa (meneer)
disjfa.nl


  • X-Lars
  • Registratie: Januari 2004
  • Niet online

X-Lars

Just GoT it.

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
  • Registratie: Februari 2000
  • Laatst online: 12:29

crisp

Devver

Pixelated

(jarig!)
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:
1
onmouseover="this.parentNode.style.backgroundColor='#FF0'"

Intentionally left blank


Verwijderd

Topicstarter
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 :z

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


  • Scurra
  • Registratie: Augustus 2000
  • Niet online
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: :P
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    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:
1
2
3
4
5
6
7
8
9
10
11
12
 <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:
1
2
3
4
5
6
7
8
9
10
11
12
13
<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
  • Registratie: Februari 2001
  • Laatst online: 09-06-2025

drm

f0pc0dert

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 :X
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 ]

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz


Verwijderd

Topicstarter
helemaal duidelijk!
superbedankt allemaal, vooral nesquick :D

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

Topicstarter
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...
Pagina: 1