nicht angemeldet
Hallo,
Stellst vollkommen auf CSS um. So ist es wirklich grausam...
Das passt zu den 149 Fehler bei der Validation. Einige kommen sicher von meinem eingefügten Javascript (die werd ich noch verbessern).
auch durch Auslagern des javascripts in eine eigene Datei liessen sich die Validatorfehler vermindern.
Das chaotische CSS/HTML ist aber wie gesagt komplett vom CMS generiert, daran hab ich so gut wie nichts gemacht. ...
möglicherweise lassen sich die Templates etwas optimieren.
Dachte mir, kann nicht falsch sein, ein wenig Tabellenlayout zu üben. Orientiert habe ich mich an deinem Spielplan.
eine 4-spaltige Tabelle, die 2.Spalte rechtsbündige Texte, 3.Spalte zentriert.
Das lässt sich anscheinend nicht mit per <col> oder <colgroup> definieren.
CSS2 17.3, 17.5.4
http://www.htmlcodetutorial.com/tables/_COL.html
hier ein gescheiterter Versuch, den zunächst nur der IE wie gewünscht darstellt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test tab css</title>
<style type="text/css">
table.termine {
table-layout:fixed;
background-color:#ffc;
}
table.termine caption {
font-size:2em;
}
table.termine col.col1 {width:100px; text-align: left; background-color:#ffa;}
table.termine col.col2 {width:250px; text-align: right; background-color:#ff6;}
table.termine col.col3 {width:25px; text-align:center; background-color:#ffc;}
table.termine col.col4 {width:250px; text-align: left; background-color:#ff6;}
table.termine th {
text-align:left;
padding-top:30px;
font-family:verdana;
font-size:1em;
background-color:#ffe;
}
table.termine td {
font-family: arial,verdana;
font-size:0.8em;
}
.gast {color:#f00;}
</style>
</head>
<body>
<table class="termine">
<caption>Spielplan 2008</caption>
<colgroup>
<col class="col1">
<col class="col2">
<col class="col3">
<col class="col4">
</colgroup>
<tbody id="gp_tbody">
<tr><th colspan=4 >31.05.08</th><tr>
<tr><td>14:00 Uhr</td><td>Damen 40 1</td><td>-</td><td class="gast">TC Hochdorf-Reichenbach 2</td><tr>
<tr><th colspan=4>01.06.08</th><tr>
<tr><td>09:00 Uhr</td><td>Herren 2</td><td>-</td><td class="gast">TV Altenriet 1</td><tr>
<tr><td>09:00 Uhr</td><td>Herren 1</td><td>-</td><td class="gast">TA TSV Sondelfingen 1</td><tr>
<tr><td>09:00 Uhr</td><td class="gast">TA TSV Ötlingen 2</td><td>-</td><td>Damen 1</td><tr>
</tbody>
</table>
</body>
</html>
Opera kann man noch zur Textausrichtung bewegen mit dem col-Attribut, also
<col class="col2" align="right">
<col class="col3" align="center">
Gunnar schlägt zur Lösung die Pseudoklassen :first-child, :last-child usw. vor, ist zwar umständlich so die 2. und 3. Spalte zu definieren , aber funktioniert dann doch:
table.termine td:first-child+td { text-align:right;}
table.termine td:first-child+td+td { text-align:center;}
vielleicht gibt's ja noch ein paar Verbesserungsvorschläge ...
Gruß plan_B
*®*´¯`·.¸¸.·
JürgenB