CSS Fehler ?

Aiun · 18. Oktober 2007

hu,

Problem

ich habe zwei tabellen, das eine ist ein Formular und innerhalb des Formulars eine art liste.

Die Tds der Liste haben jeweils eine CSS-Klasse angegeben

nun habe ich ein CSS das besagt

<style>

formulartabelle tr td

{

background-color: red

}

.line_a

{

background-color: green;

}

.line_b

{

background-color: blue;

}

</style>

die farben sind beispielhaft und der code auch daran liegts nicht.

Aber die reihenfolge der CSS-Klassen stimmt

das Problem ist, jetzt sind alle zellen rot.

wobei nach meiner Logik, die Line_a und line_b eine höhere Priorität haben sollten, da sie näher an den Td definiert sind.

bitte korrigiert mich und oder gebt mir einen tip wie ich es löse

danke

trebstyle · 19. Oktober 2007

könntest du mal mehr von deinem code posten?

also am besten auch noch das formular, ich würde es gerne mal nachvollziehen

Aiun · 19. Oktober 2007

leider habe ich jetzt gerade keinen Zugriff drauf, aber ungefähr:

(xhtml 1.1-header)


<style type="text/css">

.formtable

{

  border-collapse: collapse;

}

.formtable tr td

{

  background-color: red;

  border: 2px solid blue;

}

.listtable_header

{

  background-color: black;

  font-weight: bold;

}

.listtable_a

{

  background-color: #FFFFFF;

}

.listtable_b

{

  background-color: green;

}

</style>

</head>

<body>

<table class="formtable">

<tr>

<td>Titelsowieso</td>

<td>eingabefeld sowieso2</td>

</tr>

<tr>

<td>Titelsowieso-2</td>

<td>


<!-- LISTENTABELLE -->


<table>

<tr>

<td class="listtable_a">erste Zeile</td>

<td class="listtable_a">erste Zeile-Feld 2</td>

</tr>

<tr>

<td class="listtable_b">zweite Zeile</td>

<td class="listtable_b">zweite Zeile-Feld 2</td>

</tr>

<tr>

<td class="listtable_a">dritte Zeile</td>

<td class="listtable_a">dritte  Zeile-Feld 2</td>

</tr>

</table>

<!-- LISTE ENDE -->


</td>

</tr>

</table>

</body>

bitte diese farben nicht wirklich ausprobieren, nur beispielhaft *g*

trebstyle · 19. Oktober 2007

versuch mal das:

.listtable_a

{

  background-color: #FFFFFF !important ;

}

.listtable_b

{

  background-color: green !important ;

}

azett · 19. Oktober 2007

Spannend :beagolisc

Ich hätte es schlicht nochmal auf Elemente innerhalb der "formtable"-Tabelle bezogen:

[B].formtable[/B] .listtable_a

{

  background-color: #FFFFFF;

}

[B].formtable[/B] .listtable_b

{

  background-color: green;

}

Aiun · 22. Oktober 2007

das funktioniert leider nicht, denn die Listtable kann auch alleine auftauchen.

Important hat funktioniert, nur leider verstehe ich es nicht.

Ich habe mir nochmal CSS-Selektoren angesehen.

An sich müsste .listtable_a vor einem übergeordneten .formtable tr td

haben. genauso wie style vorrang vor .listtable_a hat.

Ansonsten macht die ganze Kaskadierung ja wenig sinn ^^

geloescht_JesterDay · 22. Oktober 2007

An sich müsste .listtable_a vor einem übergeordneten .formtable tr td
haben. genauso wie style vorrang vor .listtable_a hat.

Ansonsten macht die ganze Kaskadierung ja wenig sinn ^^

Die Klasse (.listtable_a) und das Tag (td) sind ja auf der gleichen Ebene (in deinem Fall). In CSS wird dann wohl dem Tag der Vorrang gegeben. Das kannst du jetzt für sinnlos halten, aber die Leute werden sich dabei schon was gedacht haben.

Außerdem ist dein Tag genauer definiert (.formtable tr td und nicht nur eine Klasse), was es also auf jeden Fall bedeutender macht. Je genauer die Angabe desto wichtiger ist es in CSS.

Das hat nichts damit zu tun, dass du ja siehst, was du meinst

Aiun · 22. Oktober 2007

ok, ich muss wohl meine Meinung über CSS überdenken *g*

Super unflexibel diese Art der Priorisierung.

Interessant ist, ich habe es mal weiter versucht.

- ohne !important

- mit .formtable * td statt .formtable tr td

Ergebnis:

nun hat das padding der Formtable immernoch priorität vor dem padding der .listtable_a

background-color jedoch nicht mehr, die wird jetzt korrekt dargestellt.

mit important hat er style="" ignoriert, was mir dann auch nichts bringt, da es individuelle spaltenbreiten gibt die dort festgelegt werden müssen.

(tested in IE7, FF)

Anmelden

CSS Fehler ?

Empfohlene Beiträge

Aiun

trebstyle

Aiun

trebstyle

azett

Aiun

geloescht_JesterDay

Aiun

Erstelle ein Benutzerkonto oder melde Dich an, um zu kommentieren

Benutzerkonto erstellen

Anmelden

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

Umsehen

Aktivitäten

Stellenanzeigen

Blog

Über Fachinformatiker.de