HTML tabell med DIVs vil ikke vise link med bilde

[Joachim Vadseth]

Prøver å lage en tabell som er 3x3 celler stor med et bilde som link i enkelte av cellene, og når du hovrer over "linken" (bildet altså) skal bildet endre seg ved hjelp av CSS-en.

 

Slik jeg har oppfattet det må altså hver celle ha en egen DIV for å kunne gjøre dette. Når jeg legger inn linken med bildet i DIV-en, vises ikke bildet/linken. Men legger jeg det utenfor DIV-en i samme celle får jeg bildet.

 

index.php:

<div id="wrapper">


<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
	<td><div id="tab1"><a href="http://vadseth.net" <img src="..img/td1.png"></div></td>
	<td><div id="td2">test2</div></td>
	<td><div id="td3">test3</div></td>
</tr>
<tr>
	<td><div id="td4">test4</div></td>
	<td><div id="td5">test5</div></td>
	<td><div id="td6">test6</div></td>
</tr>
<tr>
	<td><div id="td7">test7</div></td>
	<td><div id="td8">test8</div></td>
	<td><div id="td9">test9</div></td>
</tr>
</table>



<!--slutt på wrapper div-en-->	
</div>	

 

CSS:

* {
padding: 0px;
margin: 0px;
}


body {
font-family:verdana;
font-size: 10px;
color:black;
background-color:grey;
padding: 90px;	
}

div#wrapper {
width:750;
height:750;
overflow:auto;
background-color:white;
margin:0px auto;
padding:0px;
border:0px;
}

#tab1 {
height: 250px;
width: 250px;
}

#tab1 a:hover {
background-image: url(../img/td1_hover.png);
}

[MikkelRev]

Hvorfor fylle hver td med en div? Hvorfor ikke bare <td id="tab"> istedet?

 

Dette syntakset vil neppe valideres:

               <td><div id="tab1"><a href="http://vadseth.net" <img src="..img/td1.png"></div></td>

[Joachim Vadseth]

Antar jeg må ha en div for hver celle fordi hver celle skal ha et eget bilde med en url som skal forandres når du hovrer.

 

Og hvorfor vil det ikke valideres?

Endret 16. januar 2011 av Joachim Vadseth

[Joachim Vadseth]

men hey..

 

Det jeg prøver på nå er jo å si at jeg vil ha en link som er et bilde i en div, mens i CSS-en sier jeg jo at jeg vil endre BAKGRUNSBILDET ved hover, og det vil jo heller ikke virke slik jeg tenker .. :/

[agm]

Jeg ville nok gjort noe sånn som dette:

 

 <tr>
   <td id="tab1"><a href="http://vadseth.net">Vadseth</a></td>
   <td id="tab2"><a href="#">Test2</a></td>
   <td id="tab3"><a href="#">Test2</a></td>
 </tr>

 

#tab1{
   width:       250px;
   height:      250px;
}
#tab1 a{
   display:     block;
   width:       250px;
   height:      250px;
   text-indent: 250px;         /* Skyver teksten utenfor boksen */
   overflow:    hidden;        /* Skjuler teksten som er utenfor boksen */
   background:  url(../img/td1.png);
}
#tab1 a:hover{
   background:  url(../img/td1_hover.png);
}

[Joachim Vadseth]

Fikk det til for få minutter siden, men takk for hjelpen.

[cruzader]

Du har ikke bruk for tabellen der i det heletatt.

Table er også mildt sagt utgått...

[MikkelRev]

Table er også mildt sagt utgått...

Nei.

[cruzader]

Da kan du vel nevne et eksempel der du faktisk trenger table?

[MikkelRev]

Da kan du vel nevne et eksempel der du faktisk trenger table?

 

Som sagt før: Bruk table det det er beregnet for. Er idiotisk å bruke dager på å lage ustabile tabeller med avansert css bare fordi man har fått for seg at table ikke er noe kult. Du kan fortsatt style en table uten problem, og table er på ingen måte ut. Det er ingen vits i å hoppe over bekken for å hente vann.

 

Tabeller er like aktuelt i 2011 som det var i 1996.

 

https://www.diskusjon.no/index.php?showtopic=1236426&view=findpost&p=15785433

[cruzader]

Skulle likt og se noen klare bruke dager på og lage en tabell gitt, et par minutter lenger kanskje...

Noe mer ustabil enn table er det vel heller ikke, begge kan du klare rote til med dårlig kode.

[MikkelRev]

Det er ingen vits i å finne opp hjulet pånytt. Trenger du en tabell, finnes det ferdige html-elementer som i de aller fleste tilfeller er en langt bedre løsning enn hva din egen erstatning vil være. Å være anti-<table> er bare barnslig, i beste fall baserer seg på tullete misforståelser.

[agm]

Da kan du vel nevne et eksempel der du faktisk trenger table?

Prislister, resultatlister, koordinatlister og alt av tabeller...!

 

Enig med MikkelRev - bruk taggene til det de er ment for, men ikke misbruk <table> til å strukturere generell layout.