CSS <div id=""> - Problem innerhalb einer Tabelle

Olunixus · 20. August 2011

Hi,
ich möchte eine Ausschreibung für eine Veranstaltung in Spalten und Zeilen aufteilen (der Übersicht wegen). Dabei will ich einzelne blöcke der Zeilenen (z.B. immer 3 hintereinanderfolgende zeilen) jeweils eine andere farbe geben, um die einzelnen abschnitte besser zu gliedern. mein html sieht bisher so aus:

HTML:

<div id="ausschreibung_inhalt">
<table border="0" summary="Ausschreibung [Veranstaltungsname]">
<div id="ausschreibung_inhalt_ungerade">
    <tr>
        <td>Veranstalter:</td>
        <td>[Vereinsname]</td>
    </tr>
    <tr>
        <td>Beginn:</td>
        <td>Freitag, XY. Monat 2012, 15:00 Uhr</td>
    </tr>
    <tr>
        <td>Ende:</td>
        <td>Sonntag, XY. Monat 2012, 13:00 Uhr</td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</div>
<div id="ausschreibung_inhalt_gerade1">
    <tr>
        <td><div id="ausschreibung_inhalt_gerade2">Strecken und Start:</div></td>
        <td>100 km Lauf</td>
        <td><div id="ausschreibung_inhalt_gerade2">XY. Monat 2012, 06:00 Uhr</div></td>
    </tr>
    <tr>
        <td></td>
        <td>50  km Lauf</td>
        <td>XY. Monat 2012, 06:00 Uhr</td>
    </tr>
    <tr>
        <td></td>
        <td>42  km Lauf bzw. (Nordic-)Walking</td>
        <td>XY. Monat 2012, 06:00 Uhr</td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</div>
<div id="ausschreibung_inhalt_ungerade">
    <tr>
        <td>Zielschluss:</td>
        <td>100 km Lauf</td>
        <td>XY. Monat 2012, 22:00 Uhr</td>
    </tr>
    <tr>
        <td></td>
        <td>50  km Lauf</td>
        <td>XY. Monat 2012, 18:00 Uhr</td>
    </tr>
    <tr>
        <td></td>
        <td>42  km Lauf bzw. (Nordic-)Walking</td>
        <td>XY. Monat 2012, 18:00 Uhr</td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</div>
</table>
</div>

mein css-code in einer eingebundenen .css-datei sieht so aus:

Code:

#ausschreibung_inhalt  {
   font-size: medium;
   color: #0FF0FF;
}

#ausschreibung_inhalt_gerade  {
    font-size: medium;
    color: #000000;
}

#ausschreibung_inhalt_ungerade  {
    color: #0000FF;
}

#ausschreibung_inhalt_gerade1  {
    font-size: 20px;
    color: #0FFFF0;
}

#ausschreibung_inhalt_gerade2  {
    font-size: 20px;
    color: #0FFF00;
}

ich habe also einmal eine ID für die gesamte Tabelle angelegt (um z.B. bequem die gesamte schriftgröße ändern zu können), eine ID für alle geraden zeilenpaare (für schriftfarbe 1) und eine ID für alle ungeraden zeilenpaare (für schriftfarbe 2). änderungen in meiner css-datei unter der ID "#ausschreibung_inhalt" klappen. änderungen bei der ID "#ausschreibung_inhalt_gerade2" auch. nur sachen, die ich unter den IDs "#ausschreibung_inhalt_gerade1" und "#ausschreibung_inhalt_ungerade" definiere haben keinerlei wirkung. wieso? liegt es daran, dass ich diese container innerhalb von <table>, aber ausserhalb von <tr> definiere? weil änderungen bei der ID "#ausschreibung_inhalt_gerade2" (innerhalb von <table>, <tr> und innerhalb von <td>) zeigen ja wirkung.

die

HTML:

    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>

dienen als zusätzliche trennung der zeilenpaare. habe der übersichtlichkeit wegen nur 3 zeilenpaare aus der tabelle genommen, die ist eigentlich noch n gutes stück länger.
für alle die es intressiert: es handelt sich um ne Ultra-Marathon-Veranstaltung, weshalb auch die Strecken 100km- und 50km-Lauf "normal" sind

hoffe ihr könnt mir helfen
Olu

Mr. Snoot · 20. August 2011

Eine ID ist einmalig, für mehrfache Verwendung musst du mit Klassen arbeiten.

http://de.selfhtml.org/css/formate/zentrale.htm#klassen

Der W3C-Validator wird sowas auch bemängeln:

ID "ausschreibung_inhalt_ungerade" already defined

Olunixus · 20. August 2011

ok, macht sinn. werde das gleich ma umbauen. aber wieso funktionierts dann mit "ausschreibung_inhalt_gerade2"? die hab ich ja auch extra zum testen 2mal eingebaut, und es funktioniert.

edit:

so, habe jetzt aus den IDs "ausschreibung_inhalt_gerade", "ausschreibung_inhalt_ungerade" und "ausschreibung_inhalt_gerade2" klassen gemacht. - hat sich nix geändert. änderungen im stylesheet werden nur bei der ID #ausschreibung_inhalt und bei der Klasse .ausschreibung_inhalt_gerade2 übernommen.

Denara · 20. August 2011

Soweit ich weiß ist es kein gültiges HTML wenn du ein DIV innerhalb einer Tabelle (nicht Tabellenzelle) platzierst, siehe dazu http://de.selfhtml.org/html/referenz/elemente.htm#div
Dadurch dass es ungültig ist, wird es schonmal von einigen Browsern falsch oder garnicht interpretiert. Es liegt also nicht an der ID oder ähnlichen, sondern einfach an der Gültigkeit des HTML Codes.
Ich empfehle die Seite beim erstellen immer mal wieder mit einem Validator überprüfen zu lassen. Da gibt es z.B. das Firefox-Addon von MGueury oder aber ein Online-Validator z.B. http://validator.w3.org/check.

Ich weiß zwar nicht, was genau du mit den Divs bewirken wolltest, aber du kannst auch einfach den <tr> oder <td> eine ID mitgeben und damit die Styles verändern.
Dein Code dürfte also (gültig) so aussehen:

Code:

<div id="content">
<table>
    <tr class="odd">
        <td>Veranstalter:</td>
        <td colspan="2">[Vereinsname]</td>
    </tr>
    <tr class="odd">
        <td>Beginn:</td>
        <td colspan="2">Freitag, XY. Monat 2012, 15:00 Uhr</td>
    </tr>
    <tr class="odd">
        <td>Ende:</td>
        <td colspan="2">Sonntag, XY. Monat 2012, 13:00 Uhr</td>
    </tr>
    <tr class="odd">
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr class="even">
        <td class="evener">Strecken und Start:</td>
        <td>100 km Lauf</td>
        <td class="evener">XY. Monat 2012, 06:00 Uhr</td>
    </tr>
    <tr class="even">
        <td></td>
        <td>50  km Lauf</td>
        <td>XY. Monat 2012, 06:00 Uhr</td>
    </tr>
    <tr class="even">
        <td></td>
        <td>42  km Lauf bzw. (Nordic-)Walking</td>
        <td>XY. Monat 2012, 06:00 Uhr</td>
    </tr>
    <tr class="even">
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr class="odd">
        <td>Zielschluss:</td>
        <td>100 km Lauf</td>
        <td>XY. Monat 2012, 22:00 Uhr</td>
    </tr>
    <tr class="odd">
        <td></td>
        <td>50  km Lauf</td>
        <td>XY. Monat 2012, 18:00 Uhr</td>
    </tr>
    <tr class="odd">
        <td></td>
        <td>42  km Lauf bzw. (Nordic-)Walking</td>
        <td>XY. Monat 2012, 18:00 Uhr</td>
    </tr>
    <tr class="odd">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
</div>

und die zugehörige CSS:

Code:

div.content  {
   font-size: medium;
   color: #0FF0FF;
}

tr.odd  {
    color: #0000FF;
}

tr.even  {
    font-size: 20px;
    color: #0FFFF0;
}

tr.even td.evener  {
    font-size: 20px;
    color: #0FFF00;
}

Ich habe es noch nicht exakt so getestet, sollte aber denke ich so ziemlich passen.

Olunixus · 20. August 2011

dann werd ich die class ins <tr> mit einbinden. wieso hast du eig. noch den <td> klassen mitgegeben? oder war das nur n beispiel? und was ist das für ne formulierung in css?

Code:

[B]tr.even td.evener [/B] {
    font-size: 20px;
    color: #0FFF00;
}

wieso beides? ist das dann das td.evener innerhalb der klasse tr.even ?

Denara · 21. August 2011

Ich hab manchen <td> eine klasse gegeben, genauer denen wo du extra divs benutzt hast, da ich divs ungerne für kleine formatierungen verwende:

HTML:

        <td><div id="ausschreibung_inhalt_gerade2">Strecken und Start:</div></td>
        <td>100 km Lauf</td>
        <td><div id="ausschreibung_inhalt_gerade2">XY. Monat 2012, 06:00 Uhr</div></td>
    </tr>

Deine andere Frage:

Die Definition [element][class] also z.B. "tr.even" sagt:
"formatiere alle Elemente vom typ <tr> mit der Klasse 'even' nach folgendem schema ..."

Die Definitionen lassen sich noch näher definieren. Beispielsweise:

div.content .title

Spricht das Element mit der Klasse "title" im Div mit der Klasse "content" an.

Suche

Olunixus

Commodore Pro

Mr. Snoot

Gast

Olunixus

Commodore Pro

Denara

Cadet 3rd Year

Olunixus

Commodore Pro

Denara

Cadet 3rd Year

Ähnliche Themen