Tabelle haut design auseinander...

[Tobi]

Hallo,

ich habe eine Seite gebastelt, der eine layout tabelle zugrunde liegt:

<table style="width: 100%">
  <tr>
    <td style="width: 25%; vertical-align: top; padding: 2px">
      spalte1
    </td>
    <td style="width: 50% [s.o.]">
      spalte2
    </td>
    <td style="width: 25% [s.o.]">
      spalte3
    </td>
  </tr>
</table>

In den Spalten dieser Tablle habe ich Kaesten mit div, z.B.:

<div style="border: 1px solid #006; padding: 2px; margin: 0px">
  <h2>Ueberschrift</h2>
<div>
<div style="border: 1px solid #006; padding: 2px; margin: 0px">
  inhalt
<div>

Wenn ich nun in den Inhaltsteil der divs eine Tabelle einbaue mit width: 100% haut es die divs auseinander - bis an den rand der Tabellenzelle der Layouttabelle....jemand eine Ahnung warum?

Gibt es eine andere Moeglichkeit, eine Tabelle passend in ein div einzufuegen, d.h. das sie sich ueber die gesamte Breite des divs erstreckt? (hatte da an sowas wie display: block gedacht...damit funzt es aber nicht.)

Waere nett, wenn mir da einer helfen koennte...

Danke & Gruss
Tobi

[Der Hans]

Moin!

a) Warum hast du nicht einfach den Code geschickt, wie er ist?
   (also die Layer in den Zellen? Habe ich was nicht verstanden?)

b) In welchem Browser hast du das Problem? Oder in allen?

c) Warum überhaupt die Tabelle??? (die äußere?)

Gruß

Der Hans

[Tobi]

Hallo Hans,

hmm...drei Fragen, keine Antwort...? ;o)

a) Warum hast du nicht einfach den Code geschickt, wie er ist?
   (also die Layer in den Zellen? Habe ich was nicht verstanden?)

1. Habe den Code auf einem anderen Computer als dem mit Internetanbindung entwickelt....habe den Code abgetippt. 2. CSS-Daten stehen z.B. in externem Stylesheet, was bringt da staendig ein table oder div class="...", also habe ich ihn zum posten so strukturiert, das er einfach verstaendlich ist, mit dem Code, auf den es ankommt. 3. Ja, ich denke Du hast es richtig verstanden. Hier der Code nochmal zusammen:

<table style="width: 100%">
  <tr>
    <td style="width: 25%; vertical-align: top; padding: 2px">
      spalte1
    </td>
    <td style="width: 50%; vertical-align: top; padding: 2px">

<div style="border: 1px solid #006; padding: 2px; margin: 0px">
        <h2>Ueberschrift</h2>
      </div>
      <div style="border: 1px solid #006; padding: 2px; margin: 0px">
      <!-- folgende Tabelle haut es auseinander -->
        <table style="width: 100%">
          <tr>
            <td>tabelle</td>
          </tr>
        </table>
      <!-- Ende der Tabelle -->
      </div>

</td>
    <td style="width: 25%; vertical-align: top; padding: 2px">
      spalte3
    </td>
  </tr>
</table>

b) In welchem Browser hast du das Problem? Oder in allen?

Gute Frage. Ist fuer ein Intranet, Company nutzt firmenweit nur IE 6.0, entwickle fuer IE 6.0, Problem kommt in IE 6.0 - nur da getestet.

c) Warum überhaupt die Tabelle??? (die äußere?)

1. Die aeussere Tabelle ist eine Layouttabelle - wie ich bereits geschrieben habe. Sie unterteilt die Seite in drei Spalten mit 25%, 50% und 25% Breite. 2. Sie dient nicht nur dem Layout, sondern haelt damit auch die Seite anpassungsfaehig fuer verschiedene Bildschirmaufloesungen. 3. Warum nicht? Siehe z.B. http://httpd.apache.org/docs-2.0/, nur dass ich innerhalb der Layouttabelle divs verwende....

Einige Deiner Fragen scheinen darauf abzuzielen - nach dem Motto - "ne, ich haette das vom Konzept her anders gemacht...statt layout table mit positionierten layern, usw." Versuch es einfach so zu sehen, wie ich es gemacht habe - man kann mit Codieren auf verschiedenen Wegen zum Ziel kommen - es gibt keinen falschen und keinen richtigen Weg (solange innerhalb der Regeln).

Falls Du noch eine Antwort auf meine Idee vom Sinn des Lebens haben willst, bevor Du einen Tip gibst, .... sag Bescheid ... ;o)

Gruss
Tobi

[Struppi]

<div style="border: 1px solid #006; padding: 2px; margin: 0px">
        <h2>Ueberschrift</h2>
      </div>

Nur mal als zusätzlichne hinweis. CSS ist in erster Linie so gedacht, das du HTML formatierst. D.h. Wenn deine Überschrift 2.Ordnung ein anderes Aussehen bekommen soll, kannst (und sollst) du das auch so verwenden:

In deinem Falle:

h2
{
border: 1px solid #006;
padding: 2px;
margin: 0px;
}

und dann ohne das überflüssige DIV

<div style="border: 1px solid #006; padding: 2px; margin: 0px">
      <!-- folgende Tabelle haut es auseinander -->
        <table style="width: 100%">
          <tr>
            <td>tabelle</td>
          </tr>
        </table>
      <!-- Ende der Tabelle -->
      </div>

Die Frage ist eigenlich eher, warum du noch eine innere Tabelle verwendest.

Und was ich auch nicht verstehe, was heißt haut das Layout auseinander?
Du meinst die äußere Tabelle hat nicht mehr die Aufteilung: 25%,50%,25%, weil die mittlere Zelle breiter wird?

Wie gesagt, wenn die innere Tabelle entbehrlich ist, würde ich einfach das inhalts-DIV width:100% setzten.

Struppi.

[Tobi]

Hallo,

Nur mal als zusätzlichne hinweis. CSS ist in erster Linie so gedacht, das du HTML formatierst. D.h. Wenn deine Überschrift 2.Ordnung ein anderes Aussehen bekommen soll, kannst (und sollst) du das auch so verwenden:

...

und dann ohne das überflüssige DIV

Danke fuer den Hinweis, habe mir aber bei der verwendugn des divs fuer Ueberschriftzeile etwas gedacht....es sind noch mehr Elemente in dem div....

Die Frage ist eigenlich eher, warum du noch eine innere Tabelle verwendest.

Warum verwende ich eine Tabelle? Da muss ich Dir leider antworten: Weil es erforderlich ist, z.B. um Daten in tabellarischer Form darzustellen? (Sinn und Zweck einer Tabelle? ;o))

Und was ich auch nicht verstehe, was heißt haut das Layout auseinander?
Du meinst die äußere Tabelle hat nicht mehr die Aufteilung: 25%,50%,25%, weil die mittlere Zelle breiter wird?

Jep. So ungefaehr. Die innere Tabelle passt sich an die Weite der Layouttabelle an, nicht an die Weite des Layers...das war das Problem, aber Hans hat mir denke ich geholfen.

Danke und Gruss
Tobi

[Der Hans]

Moin, nochmal!

1. Die aeussere Tabelle ist eine Layouttabelle - wie ich bereits geschrieben habe. Sie unterteilt die Seite in drei Spalten mit 25%, 50% und 25% Breite. 2. Sie dient nicht nur dem Layout, sondern haelt damit auch die Seite anpassungsfaehig fuer verschiedene Bildschirmaufloesungen. 3. Warum nicht? Siehe z.B. http://httpd.apache.org/docs-2.0/, nur dass ich innerhalb der Layouttabelle divs verwende....

Nein, eine Layout-Tabelle? Na dann ist alles o.k.!
(auch wenn's mit Layern auch und fehlerfreier gegangen wäre)

Zu deinem Problem: (obwohl mich auch deine Idee vom Sinn des Lebens interessierte)
Ich habe das Problem im IE6 nicht, auch dann nicht, wenn ich sie mit Text vollstopfe.
Ausschließlich wenn ich keinen Doctype angebe, haut es mein Design auseinander.
--> könnte es das wohl sein ???

Soviel zum Ergebnis meiner Kristallkugelbefragung und
zu meiner Frage nach dem kompletten Quellcode.

Ich hoffe, ich konnte dir helfen.
Gruß

Der Hans

[Tobi]

Ausschließlich wenn ich keinen Doctype angebe, haut es mein Design auseinander.

--> könnte es das wohl sein ???

Ich hoffe, ich konnte dir helfen.

Genau das ist es! Du konntest mir helfen! Super! Danke! Ich liebe Ausrufezeichen!

Gruss
Tobi

[Tobi]

Ok. Habe doctype HTML 4.01 strict einegfuegt...aber warum funzt es dadurch? Das aendert doch eigentlich nichts am Code, oder?

Wenn Du mir das noch beantworten kannst, dann waere ich Dir sehr dankbar....
-Tobi