nicht angemeldet
Herausforderung: Wie macht man das ohne Layouttabelle?
Hey Ihr,
ich stoße beim Umsetzen von Webdesigns immer wieder auf ein ähnliches Problem und möchte das gerne ein für allemal lösen. Es geht darum, eine zentrierte Seite mit Header, Footer und mehrspaltigem Inhalt so umzusetzen, dass der Footer immer unten steht:
+--------------------------------------+
| |
| +------------------------------+ |
| | header | |
| +-----+------------------+-----+ |
| | li. | mitte | re. | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| +-----+------------------+-----+ |
| | footer | |
| +------------------------------+ |
| |
+--------------------------------------+
Die Crux ist dabei, dass ich nicht wissen kann, welche der drei Spalten - links, mitte, rechts - die längste ist. Wenn z.B. die rechte die längste ist, muss sie bestimmen, wie weit unten der Footer steht, nicht die mittlere.
Dazu kann ich die drei Spalten in einen Containter packen und sie darin floaten lassen. Aber damit der Container sich mit den Spalten ausdehnt, muss auch er floaten -- dann bekomme ich ihn aber mit "margin: 0px auto" nicht mehr zentriert. Wenn ich ihn per absoluter Positionierung zentriere, verschiebt er wiederum den footer nicht mehr nach unten.
Der einzige Weg, der mir einfällt, ist eine Layouttabelle für die drei Spalten. Die könnte ich mit auto-Margin zentrieren und sie würde sich automatisch ausdehnen. Ist das wirklich die einzige Möglichkeit? Kann ich mir eigentlich nicht vorstellen, das hat doch bestimmt schon mal jemand gelöst.
Könnte mir eine/r von Euch bitte ein rudimentäres HTML- und CSS-Gerüst skizzieren, mit dem ich sowas hinbekomme? Ich wäre ausgesprochen dankbar! :-)
Jule!
-
Hey Ihr,
+--------------------------------------+
| |
| +------------------------------+ |
| | header | |
| +-----+------------------+-----+ |
| | li. | mitte | re. | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| +-----+------------------+-----+ |
| | footer | |
| +------------------------------+ |
| |
+--------------------------------------+li. und mitte float: left; als CSS-Eigenschaft
für footer clear: both; verwendenLG fr@gma
-
Hey fr@gma,
"clear: both" war der entscheidende Tipp. Daran hatte ich gar nicht gedacht, weil ich dachte, das kann nicht funktionieren, wenn der nicht floatende Container sich nicht mit seinen Spalten ausdehnt. Geht aber trotzdem - Danke!
So sieht mein Code jetzt aus -- gibt es daran noch etwas zu verbessern?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body><div style="width:600px; margin: 0px auto; background-color: red;">kopf</div>
<div style="width: 600px; margin: 0px auto; border: 1px solid black;">
<div style="border: 1px dashed black;">
<div style="float: left; width: 200px; background-color: blue;">links</div>
<div style="float: left; width: 198px; background-color: lightgrey;">mitte</div>
<div style="float: left; width: 200px; background-color: green;">rechts</div>
</div>
</div>
<div style="width:600px; margin: 0px auto; clear: both; background-color: yellow;">fuss</div>
</body>
</html>Jule!
-
So sieht mein Code jetzt aus -- gibt es daran noch etwas zu verbessern?
verwende ein h1-element für den kopf (das passt meistens) und ein address-element für den footer (sofern da ausschließlich kontaktinformationen drin stehen)
verwende eine etwas zeitgemäßere dtd (xhtml 1.0 strict), die syntax ist einfach etwas "stimmiger"
und verzichte auf inline-styles
anstatt jedes element einzelen mit margin: auto zu zentrieren, könntest du auch das body-element nutzen (spart code)
mit pixel zu arbeiten ist ggf nicht unbedingt schlau, besonders 600 pixel breite sind etwas gar wenig für moderne systeme (und für handhelds bereits viel zu viel)
0px ist übrigens auch etwas redundant, 0 würde reichen - 0 ist 0, egal in welcher einheit
-
Hey suit,
der erwähnte Code war nur ein Beispielkonstrukt für den Kontext meiner Frage, kein echtes Projekt. :-)
h1 verwende ich für die Überschrift des Inhalts, nicht für den Seitenkopf (Logo, Navigation usw.). Im Footer steht auch mehr als nur die Adresse. Deshalb werden beide im Allgemeinen divs sein.
XHTML ist aber eine sinnvolle Idee, davor habe ich mich nur bisher gedrückt (never change a running system :-)
Jule!
-
der erwähnte Code war nur ein Beispielkonstrukt für den Kontext meiner Frage, kein echtes Projekt. :-)
du hast nach verbesserungsvorschlägen gefragt :)
h1 verwende ich für die Überschrift des Inhalts, nicht für den Seitenkopf (Logo, Navigation usw.).
der das logo ist meinem empfinden nach die überschrift der seite ;) die navigation gehört meiner meinung nach auch nicht in den kopf sondern nach den inhalt (ausser sie ist sehr kurz) und separat ausgezeichnet ("<ul id="menu" />") oder ähnliches
Im Footer steht auch mehr als nur die Adresse. Deshalb werden beide im Allgemeinen divs sein.
die adresse kommt aber hoffe ich in ein address-element? ;)
XHTML ist aber eine sinnvolle Idee, davor habe ich mich nur bisher gedrückt (never change a running system :-)
xhtml hat nur einfachere regeln - wenn du grade das grundgerüst baust, änderst du ja kein running system :) du baust ein neues
im falle deines (unvollständigen) beispielcodes ist die syntax sogar identisch
-
Hi suit,
das logo ist meinem empfinden nach die überschrift der seite ;)
Aber nicht nach dem Empfinden einer Suchmaschine, die die Struktur eines Dokuments benutzt, um die Wichtigkeit von Begriffen in der Seite zu bewerten. Ich tu deshalb lieber die erste Überschrift des eigentlichen Inhalts in die h1, alles andere kommt in <div id="kopf">, <div id="menue"> usw.
wenn du grade das grundgerüst baust, änderst du ja kein running system :) Doch -- _ich_ bin das running system, das dafür geändert werden müsste :-)
Jule!
-
das logo ist meinem empfinden nach die überschrift der seite ;)
Aber nicht nach dem Empfinden einer Suchmaschinewoher nimmst du deine informationen?
-
-
-
-
verwende eine etwas zeitgemäßere dtd (xhtml 1.0 strict), die syntax ist einfach etwas "stimmiger"
@suit
Wieso sollen die dtd zu xhtml 1.0 zeitgemäßer sein?
Das hätte ich gern mal erklärt!@Jule
Vielleicht wäre es sinnvoll die CSS-Formatierungen in eine externe Datei auszulagern.
Wenn Du später mal etwas ändern möchtest, brauchst Du das nur einmal durchführen.LG fr@gma
-
-
-
-
Hallo,
ich stoße beim Umsetzen von Webdesigns immer wieder auf ein ähnliches Problem und möchte das gerne ein für allemal lösen. Es geht darum, eine zentrierte Seite mit Header, Footer und mehrspaltigem Inhalt so umzusetzen, dass der Footer immer unten steht:
könnte Dir YAML weiterhelfen?
+--------------------------------------+
| |
| +------------------------------+ |
| | header | |
| +-----+------------------+-----+ |
| | li. | mitte | re. | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| +-----+------------------+-----+ |
| | footer | |
| +------------------------------+ |
| |
+--------------------------------------+siehe folgende Beispiele:
- 3col_standard
- 3col_faux_columnsWas diese Beispiele *nicht* bieten, ist eine vertikale Zentrierung.
Freundliche Grüße
Vinzenz