✔ DIV Andordnung und ungewollte überlappung

[droni]

Ahh OK. "Gefällt mir" habe ich schon gedrückt.
Danke!

 

[SpiceLab]

Kurzer Nachtrag bzgl. der Browserunterstützung: Mein vorgestelltes Tabellen-Modell hab ich erfolgreich in den aktuellen Versionen von Firefox u. IE überprüft

Weitere Browser (Google-Chrome, Opera, Safari) hab ich hier am "dienstlichen" Arbeitsplatz nicht zur Verfügung. Kann dies aber gerne heute Nachmittag am heimischen PC nachholen, sofern von deiner Seite Bedarf besteht

Alles im Lot

[edit]
Mein Flüchtigkeitsfehler hat dankenswert die fixe width:650px-Regel für <table> übertüncht:

/* falsch */
table tr:nth-child(2) td:nth-child(2) {width:510px}
/* richtig */
table tr:nth-child(2) td {width:510px}

Der Fehler ist in meinem Post korrigiert, damit zukünftig keine Klagen von Dritten kommen, der Code funktioniere nicht, weil sich am Ende erweist, dass die Tabelle keine Breitenangabe besitzt
[/edit]

 

[droni]

OK, danke, habe es korrigiert.

Auch auf die Gefahr hin, dass du mich erschlägst...

Ich versuche das gerade einzubauen.
Natürlich soll sich das Ganze nur auf eine bestimmte Tabelle beziehen.

Habe jetzt den Code in folgendes geändert:

table.test,td.test {border:1px solid #000}
table.test {width:650px}
table.test tr:nth-child(1) td:nth-child(1) {width:130px}
table.test tr:nth-child(2) td {width:510px}
table.test tr:nth-child(1) td {vertical-align:top}
table.test tr:nth-child(2) td {vertical-align:bottom}

Der Tabelle habe ich class="test" verpasst. Die Rahmenfarbe und die Breite werden umgesetzt.
Die letzten 4 Zeilen mit der Breite und Positionierung werden ignoriert. Warum?

 

[SpiceLab]

Offensichtlich fehlt im HTML-Code den <td>-Elementen das Attribut class="test".

Belass die erste Zeile dann einfach so:

table.test,td {border:1px solid #000}

 

[droni]

Hmmm neee, dann bezieht sich das ja wieder auf ALLE TDs.
Und wie gesagt... die ersten eiden Zeilen werden ja auch umgesetzt. Nur die restlichen 4 nicht.

 

[SpiceLab]

Hmmm neee, dann bezieht sich das ja wieder auf ALLE TDs.

Veto

Einmal mit der Klasse test für <table>, und einmal ohne:

<table class="test">
  <tr>
    <td rowspan="2">1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br></td>
    <td>2<br>2<br>2<br>2<br>2<br>2<br>2<br></td>
  </tr>
  <tr>
    <td>3<br>3<br>3<br>3<br>3<br>3<br>3<br></td>
  </tr>
</table>

<table>
  <tr>
    <td rowspan="2">1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br></td>
    <td>2<br>2<br>2<br>2<br>2<br>2<br>2<br></td>
  </tr>
  <tr>
    <td>3<br>3<br>3<br>3<br>3<br>3<br>3<br></td>
  </tr>
</table>

Und um die noch übrig gebliebene Rahmenformatierung auszuschalten, lautet die erste Zeile nun so:

table.test,table.test td {border:1px solid #000}

Und wie gesagt... die ersten eiden Zeilen werden ja auch umgesetzt. Nur die restlichen 4 nicht.

Zeig mal bitte deinen aktuellen HTML-Code.