bituniverse.com

[M]

Irgendwie ist hier der Wurm drin, ich komme einfach nicht darauf, den Fehler zu finden.

Ich habe eine Tabelle mit einer Breite von 1000 px
Diese ist unterteilt in eine 14 px, eine 250 px und eine 736 px breite Zelle.
Für die 736 Zelle habe ich style="padding-left:20px;padding-right:20px;" gesetzt, um geeignete Textabstände zu bekommen.

Soweit alles wunderbar. Aber sobald ich in die 736er Zelle eine weitere Tabelle hineinpacke und diese Breiter als 300 px wird, verschiebt sich die Breite der übergeordneten Tabelle. Ganz so, als wäre in der Zelle nicht genug Platz.

Ich muss ehrlich gestehen, dass ich keine Ahnung habe, was hier schief läuft. Vielleicht seh ich den Wald vor lauter Bäumen nicht? Findet einer von euch den Fehler?

Code:

<table width="1000" cellspacing="0" cellpadding="0">         <tr>           <td width="14"></td>           <td width="250">BILD</td>           <td width="736" colspan="2"></td>         </tr>         <tr>           <td width="1000" colspan="4">BILD</td>         </tr>         <tr>           <td width="14"></td>           <td width="250">TEXT</td>           <td width="736" valign="top" style="padding-left:20px;padding-right:20px;">             <table width="600">               <tr>                 <td width="125" valign="top">TEXT</td>                 <td width="475">TEXT</td>               </tr>             </table>           </td>         </tr>         <tr>           <td width="14"></td>           <td width="250">BILD</td>           <td width="736"></td>         </tr>       </table>

[blinky]

Also ...

du hast ja insgesamt 4 spalten
was du mit

Code:

<tr>           <td width="14"></td>           <td width="250">BILD</td>           <td width="736" colspan="2"></td>         </tr>         <tr>           <td width="1000" colspan="4">BILD</td>         </tr>

auch konsequent verfolgst. Aber bei

Code:

<td width="736" valign="top" style="padding-left:20px;padding-right:20px;">

fehlt das colspan="2"
genauso wie bei

Code:

<td width="736"></td>

Hoffe das hilft dir weiter.

[M]

Oh, das stimmt, habe ich total übersehen. Ich habe die beiden colspan jetzt herausgelöscht bzw. auf 3 geändert, weil ich gar nicht mehr weiß, wie ich da auf 4 gekommen bin. Schließlich sind ja überall nur drei vorhanden

Mein Problem löst das aber leider noch nicht

Code:

<table width="1000" cellspacing="0" cellpadding="0">         <tr>           <td width="14"></td>           <td width="250">BILD</td>           <td width="736"></td>         </tr>         <tr>           <td width="1000" colspan="3">BILD</td>         </tr>         <tr>           <td width="14"></td>           <td width="250">TEXT</td>           <td width="736" valign="top" style="padding-left:20px;padding-right:20px;">             <table width="600">               <tr>                 <td width="125" valign="top">TEXT</td>                 <td width="475">TEXT</td>               </tr>             </table>           </td>         </tr>         <tr>           <td width="14"></td>           <td width="250">BILD</td>           <td width="736"></td>         </tr>       </table>

[Simon W.]

das erste manko, was mir da so auffällt ist: du vermischst css und html-layout-elemente.
html legt die struktur fest, css das design. spalten-breiten gehören nunmal nicht zur struktur. dann sehen wir weiter

[M]

Ich habe jetzt in den jeweiligen <table> Tags ein style="table-layout:fixed;width:XXX;" stehen und die einzelnen Zellen durch style="width:XXX;" in ihrer Breite bestimmt. Nachdem ich dann noch einigen Grafiken den Feinschliff gegeben habe, verhält sich nun alles so wie ich es mir vorstelle.
Vielen Dank für die Hilfe! Ich weiß zwar nicht, was defakto an dem alten Code falsch war, aber solange der neue funktioniert und noch dazu eleganter ist, kann mir das auch egal sein

Das der Umstieg von Tabellen auf CSS kommen muss, ist mir klar, habe das Ganze bloß bisher immer vor mir hergeschoben, weil ich andere Dinge als wichtiger empfand und bisher ja alles funktioniert hat

[Simon W.]

Aber alleine, wenn du schon bei jeder Spalte in Zelle immer wieder die selbe Breite angibst, wirst du dir schon denken: eigentlich würde es doch reichen, <td class="spalte44"> zu schreiben, und schwupps, kannst du das komplette Layout der Tabelle in deiner css-Datei ändern. Das ist noch um einiges eleganter, als jeweils style= zu benutzen. Gerade die Hierarchie, die man in css ausdrücken kann, macht das ganze zu einer schönen Layout-Sprache. (Dennoch kann das dadurch auch ganz schön undurchsichtig werden ^^)

Also in deinem fall machst du einfach die css-Datei ungefähr so:
#meinetab {
... Eigenschaften deiner tabelle;
}

#meinetab td.spalte1 {
... Eigenschaften von Spalte 1
width: 50px;
}

und dann in der Seite:
<table id="meinetab">
<tr><td class="spalte1">blubb</td><td class="spalte2....
</table>

Und allgemein solltest du bei Größenangaben die Einheit nicht vernachlässigen. Normalerweise ist das px, aber man weiß ja nie...

[M]

Vom Grundprinzip ist mir das bewusst und ich sag mir auch immer wieder, ich muss mich mal hinsetzen und an einem Projekt das alles konsequent durchziehen, um da richtig rein zu kommen, aber bis jetzt war immer irgendwas anderes wichtiger ^^
Habs halt immer vor mir hergeschoben...

Die Einheiten habe ich jeweils angegeben, ohne verschiebt sich bei mir auch alles.