Hoi djeric,
validatorfkeurt deze goed, en ziet er goed uit in ie9 & firefox & google chrome browsers.
Ja, klopt, ook Sadari en IE7 doen het bij mij goed (en in IE8 zal ook wel goed gaan).
=======
Dat kan dus, en het is ook geldige code. Ik vind het alleen niet zo handig:
- Voor de 22 cellen komen er 22 overbodige <div>'s bij.
- De style kan net zo goed meteen aan de <td>'s (lees: de tabel-cellen) gekoppeld worden, dan kunnen de <div>'s gemist worden:
HTML:
<tr><td id="vraag1">Naam:</td><td id="antwoord1">Diesel</td></tr>
<tr><td id="vraag2">Ras:</td><td id="antwoord2">Hollandse herder</td></tr>
<tr><td id="vraag3">Geboortedatum:</td><td id="antwoord3">26-09-2010</td></tr>
enz.
Je hebt ook
elke cel een eigen id gegeven; dat is ook niet fout, maar het kan simpeler.
Als je begint met een
color op te geven voor de hele tabel, dan krijgt alles in de tabel die tekstkleur.
- Stel je neemt daarvoor het blauw van de rechterkolom, dan wordt het:
Code:
table {
...
color: #3300CC;
}
- Hiermee kunnen alvast de 11 verwijzingen id="antwoord1", id="antwoord2", enz. in de rechterkolom gemist worden: de hele rechterkolom is in één klap blauw van tekst.
- Nu hoeven alleen de 11 cellen van de middenkolom de afwijkende kleur te krijgen:
HTML:
<tr><td id="vraag1">Naam:</td><td>Diesel</td></tr>
<tr><td id="vraag2">Ras:</td><td>Hollandse herder</td></tr>
<tr><td id="vraag3">Geboortedatum:</td><td>26-09-2010</td></tr>
enz.
En ook dit kan nog eenvoudiger. Met de id's krijgen alle middenkolom-cellen individueel hun tekstkleur. Maar deze tekstkleur is voor al deze cellen hetzelfde.
- Dan kan je beter één class ipv 11 id's nemen: dat scheelt in de css 10 definities van dezelfde kleur:
Code:
.vraagkleur {
color: #DC143C;
}
- En de html wordt er lekker kort en overzichtelijk van:
HTML:
<tr><td class="vraagkleur">Naam:</td><td>Diesel</td></tr>
<tr><td class="vraagkleur">Ras:</td><td>Hollandse herder</td></tr>
<tr><td class="vraagkleur">Geboortedatum:</td><td>26-09-2010</td></tr>
enz.
=======
Deze laatste test in google chrome zag ik 1 foutje staan. de laatste rij vraag en antwoord is breder dan de rest van de kolommen
Je bedoelt waarschijnlijk: hoger. Ook dat klopt, en dat is een eigenaardigheid van Chrome, Opera en Safari.
Wat er gebeurt is dit:
- De foto in de linkerkolom is wat hoger dan het totaal van de celhoogtes van de midden- en rechterkolom.
- Firefox en Internet Explorer beginnen te rekenen met de foto-cel, en verdelen het overschot aan hoogte ponds-ponds-gewijs over de cellen aan de rechterkant. Die worden dus allemaal even hoog.
- Maar Chrome, Opera en Safari doen het anders. Die beginnen de cellen aan de rechterkant gewoon op te vullen met de celhoogte die ze anders ook zouden krijgen. Bij de laatste cel krijgen ze in de gaten: Hé als ik dit nu ook doe, wordt de laatste cel te kort, en dat mag niet. Daar gieten ze dus de hele ruimte die de linkercel hoger is, in één keer in de laatste cel van de rechterkant.
Een bespreking van dit verschijnsel staat in dit topic:
helpmij.nl/forum/showthread.php/679127-Tabel-quot-valign-middle-quot-is-niet-in-alle-browsers-hetzelfde.
Om te ontkomen aan de opvul-methode van Chrome, Opera en Safari is de universele oplossing: deze browsers rustig hun gang laten gaan, en vervolgens via
javascript de verschillende hoogtes opvragen en eerlijk verdelen.
- Het principe van het script staat ook in dat topic (daar zijn er maar 5 cellen, en de verwijs-namen zijn anders).
- Het implementeren gaf wat complicaties bij die site, maar daar was 13 reacties later geen spoor meer van over.
Maar gelukkig kan het in jouw geval eenvoudiger:
- Methode 1: de foto minder hoog maken.
- Methode 2: de cel-hoogte aan de rechterkant meteen zelf al vergroten via wat extra padding boven en onder in de cellen, zodat de rechterkolommen samen altijd al hoger zijn dan de foto: dan doet het verdeel-probleem zich ook niet voor.
Ik zou voor methode 2 gaan, je bent uit de brand met:
Code:
td {
vertical-align: middle;
padding: .25em 0;
}
Daarmee staat de foto ook verticaal in midden van de hoogte van de tekstcellen samen (zou ook ander kunnen).
Tenminste: bijna! Want bij het strict-Doctype zit onder een img nog een pixel of 3 aan speling (de hoogte van de neerhaaltjes bij letters als een p of q).
Dat valt weg te nemen met:
Code:
table img {
vertical-align: top;
}
Voor een wat betere vlakverdeling kan dan in één moeite door de foto ook wat ruimte links en rechts krijgen, bv.:
Code:
table img {
padding: 0 15px;
vertical-align: top;
}
============
De totale css voor de tabel wordt dan niet meer dan dit:
Code:
table {
margin: 0 auto;
border: 1px solid green;
color: #3300CC;
}
table img {
padding: 0 15px;
vertical-align: top;
}
td {
vertical-align: middle;
padding: .25em 0;
}
.middenkolom { width: 150px; background: #FFFF99; }
.rechterkolom { width: 150px; background: #FFCC66; }
.vraagkleur { color: #DC143C; }
===========
En de testpagina voor het resultaat:
Zoiets?
Met vriendelijke groet,
CSShunter
