• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabelle zerschießt (Div)Layout

macringo

Neues Mitglied
Moin Moin,

ich habe leider das Problem, das mir eine Tabelle das Layout zerschießt. Das Layout wird mittels Divs realisiert und sieht wie folgt aus:

Code:
#wrapper {

    width: 950px;
    margin: 0 auto; 

}

#header {

    width: 950px;
    height: 250px;
    margin-bottom: 25px;
}

#content {

    width: 910px;
    padding: 20px;
    margin-bottom: 25px;
}

#footer {

    width: 950px;
    height: 250px;
    margin-bottom: 25px;
}

Soweit alles super. Sobald ich jedoch im Div "content" eine Tabelle (table) einfüge, wird der Footer über der Tabelle angezeigt.

Irgendjemand eine Idee?

Mod-Edit: Code-Tags hinzugefügt - Beim nächsten Mal bitte dran denken (XraYSoLo)
 
Zuletzt bearbeitet von einem Moderator:
Hallo Macringo,

gib uns mal einen Link zu der Seite, damit wir uns das anschauen können...

Grüße
Bernhard
 
Nebenbei ein kleiner Tipp: Um den #wrapper auch im IE zu zentrieren, musst du für das übergeordnete Element (warscheinlich body) text-align:center und für #wrapper dann wieder text-align:left setzen.
 
Das Layout wird mittels Divs realisiert

Mal so nebenbei als Anmerkung: Layout macht man ausschließlich mit CSS und nicht mit HTML. Ob man dazu <table>, <p>, <address> oder auch <div> verwendet, ist Käse. Also nochmal: Layout mit div ist falsch. Layout mit div ist genauso sinnfrei wie Layout mit Tabellen.

Mit HTML macht man die Semantik, mit CSS Layout und Design. Nicht anders.
 
was benutzt man den dann am besten um die seite zu gestalten, wenn man nicht <div> etc benutzt??

also was ist am besten und wieso???
 
Um den Inhalt semantisch korrekt auszuzeichnen benutzt man HTML.

Um eine Seite zu gestalten, also für Layout und Design, benutzt man CSS.

In HTML hat jedes Tag eine Bedeutung. Für Deinen Inhalt suchst Du Dir das Tag aus, was Deinen Inhalt am besten beschreibt. So ist
"Herzlich Willkommen!" eindeutig eine Überschrift. Die muss dann auch als Überschrift (z.B. <h1>, Ordnungsgrad beachten!) ausgezeichnet werden. Ein <div id="ueberschrift">Herzlich Willkommen</div> ist keine Überschrift. Das Tag <div> bedeutet "Gruppe", "Gruppierung" (und eine Gruppe besteht immer aus mindestens 2 Tags). <table> leitet tabellarische Daten ein. usw.

Auf diese Weise gibst Du Deinem Inhalt eine Bedeutung. Das ist HTML. <div> verwendet man nur zum Gruppieren. Wenn Deine Semantik fertig ist, baust Du darauf Dein Layout und Design aus CSS zusammen.

Das Tag <div> spielt keine besonders wichtige Rolle, zur Auszeichnung des Inhalts gibt es immer ein anderes Tag, was den Inhalt besser beschreibt.
 
ahh ich verstehe!
aber es ist trotzdem sinnvoll mit div z.b 3 bereiche zu machen und da dann verschiedene seiten reinzuladen. also einmal navi einmal main und ein anderes fuer banner und so zeug?
 
aber es ist trotzdem sinnvoll mit div z.b 3 bereiche zu machen und da dann verschiedene seiten reinzuladen. also einmal navi einmal main und ein anderes fuer banner und so zeug?
Nein. Zumindest nicht für Anfänger, die noch nicht entscheiden können, wo man ein div braucht und wo nicht. Solche Leute sollten immer erstmal mit der logischen Inhaltsauszeichnung beginnen, also Inhalt schreiben und dann logisch auszeichnen. Dabei werden sie feststellen, dass sie kein einziges <div> brauchen. Wenn man das wirklich 100% kapiert hat (ist eigentlich ganz einfach, aber die meisten suchen immer nach dem nicht vorhanden Haken, glauben, dass da mehr sein müsste und wollen die Einfachheit nicht begreifen), dann kann man anfangen, in Hinblick auf das spätere Layout die ein oder anderen Tags zusammenzufassen.

Eine Navi z.B., um mal direkt auf Deine Frage einzugehen, wird primär als <ul> ausgezeichnet. Dazu brauchts kein <div>. Selbst wenn diese Navi später an einem Rand kleben soll (CSS:float) braucht man dazu immer noch kein <div>, weil auch <ul> floaten kann.
Ein Banner ist idR eine Überschrift. Daher zeichnet man sie mit <h1> aus, stellt das Banner als <img> da rein und gibt ihm den Text aus dem Banner im alt-Attribut mit. Kein <div> nötig.
Und selbst für den Content braucht man kein <div>, wenn die Navi am Rand floatet, dann umfließt der Inhalt eben die Navi. Wenn man allerdings erreichen will, dass der Content die Navi nicht umfließt, dann wird man den gesamten Content in einem <div> zusammenfassen müssen, um ihn mit einem margin in die entsprechende Richtugn zu versehen. Das sind aber schon CSS-Techniken, die man erst anwenden sollte, wenn man sich mit HTML absolut sicher ist.

Ich empfehle Dir (und allen anderen Mitlesenden, die das interessiert), einfach mal eine Seite zu nehmen mit viel Inhalt, und diesen mit HTML semantisch sinnvoll auszuzeichnen. OHNE dabei auf das Layout Rücksicht zu nehmen! Denn HTML hat ja nichts mit dem Layout zu tun. Überschriften, Textabsätze, Adressen, Zitate, wichtige Textpassagen, tabellarische Daten, etc. ...
Ihr müsst nur begreifen, dass das WIRKLICH ALLES ist, wozu HTML da ist. MEHR NICHT. Nur die logische Textauszeichnung. Kein Aussehen, kein Layout. Irrelevant, wie der Browser den Inhalt darstellt (die Darstellung macht er nämlich über CSS und eigene, vordefinierte CSS-Eigenschaften für die Elemente; das Aussehen macht nicht HTML und kann in einem anderen Browser wieder ganz anders aussehen).

Wer das begriffen hat, und akzeptiert, dass HTML wrklich so einfach ist, und nicht zu was anderem dient, der hat die wichtigste Hürde geschafft. Danach immer nur schön Inhalt von Layout trennen und die richtigen CSS-Eigenschaften und wie diese anzuwenden sind, das kommt dann alles von selbst.
Aber CSS funktioniert eben nur mit einer validen (syntaktisch richtigen) und semantisch sinnvollen Basis aus HTML.

Viel Erfolg damit,
-Efchen

...und wenn noch Fragen sind, einfach fragen!
 
Zurück
Oben