Zum Inhalt springen

CSS Fehler ?

Aiun

Von Aiun
in Webdesign

 Teilen

Empfohlene Beiträge

Aiun

Aiun

Geschrieben
Geschrieben

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

<tr><td class="line_a"></td></tr>

<tr><td class="line_b"></td></tr>

<tr><td class="line_a"></td></tr>

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

Link zu diesem Kommentar
Auf anderen Seiten teilen
Aiun

Aiun

Geschrieben
  • Autor
Geschrieben

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*

Link zu diesem Kommentar
Auf anderen Seiten teilen
Aiun

Aiun

Geschrieben
  • Autor
Geschrieben

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 ^^

Link zu diesem Kommentar
Auf anderen Seiten teilen
geloescht_JesterDay

geloescht_JesterDay

Geschrieben
Geschrieben

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 ;)

Link zu diesem Kommentar
Auf anderen Seiten teilen
Aiun

Aiun

Geschrieben
  • Autor
Geschrieben

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)

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...