Layoutlösung in CSS

maceis

maceis

Aktives Mitglied
Thread Starter
Dabei seit
24.09.2003
Beiträge
16.880
Reaktionspunkte
626
hallo zusammen,

ich suche eine möglichst einfache Lösung für folgendes Layout in CSS (z.B. mit div Containern):
Code: 
+------------------------------------------------------------+
|body                                                        |
|         +-------+--------------------------------+         |
|         +top                                     +         |
|         +                                        +         |
|         +-------+--------------------------------+         |
|         +navi   +main                            +         | 
|         +       +                                +         | 
|         +       +                                +         | 
|         +       +                                +         | 
|         +       +                                +         | 
|         +       +                                +         | 
|         +       +                                +         | 
|         +       +                                +         | 
|         +       +                                +         | 
|         +-------+--------------------------------+         |
|                                                            |
/                                                            /
|                                                            |
+------------------------------------------------------------+
Wichtig ist mir u.a., dass:
  1. das Ganze zentriert ist
  2. #top soll ein feste Höhe haben
  3. dass #navi und #main immer gleich hoch sind, aber keine feste Höhe haben
  4. #top soll ein feste Höhe haben
  5. Tauglichkeit für alle halbwegs gängigen Browser
Problem ist derzeit Punkt 3.
Die beiden Container sind jeweils unterschiedlich hoch (je nach Inhalt).

mein bisheriger Ansatz sieht so aus:
HTML: 
<head>
    <style type="text/css">
body {
    margin: 0;
    background-image: url(/rsc/css/body.gif);
}

#content {
    position: absolute;
    left: 50%;
    margin-top: 15px;
    margin-left: -390px;
    width: 780px;
    background-color: red;
}

#top {
    position: absolute;
    height: 45px;
    width: 780px;
    background-color:lightblue;
}

#navi {
    position: absolute;
    top: 45px;
    width: 150px;
    background-color: green;
}

#main {
    position: absolute;
    top: 45px;
    left: 150px;
    width: 630px;
    background-color: lightgreen;
}
    </style>
</head>
<body>  
        <div id="content">
            <div id="top">
                Top     
            </div>  
            <div id="navi">
                Navigation
            </div>  
            <div id="main">
                <h1>main</h1>
            </div>  
        </div>
</body>
 
kommst wohl nicht drumherum, navi und main in ein zusätzliches div zu stecken und den beiden dann die höhe 100% zu geben...
 
hasse schon ne lösung, sonst kann ich dir das kurz machen.?
 
Ich hätte das jetzt so gemacht:
navi und main müssen beide float: left; haben! Um beide einen Container drum!
Um diesen container und den top container einen container mit margin: auto; rum!

fertig :)
 
Am Besten wäre ein Codebeispiel - dann könnten auch "Nicht-CSS-Experten" (wie ich) der Diskussion besser folgen ;)
 
Also Höhe variabel, aber beide layer immer gleich hoch geht theoretisch nicht, aber mit einem einfachen trick klappts. Einfach die Hintergrundfarbe des wrappers, also hier in meinem code #content gleichsetzten mit der der navi.
Anders gehts nicht, weil ein Layer mit unbestimmter Höhe immer so lang wird wie für den Text benötigt. Die weiss der benachbarte Layer nur leider nicht. ;)
Für die Zentrierung wie schon gesagt auto-margins.
Ach ja: Einen footer brauchst du eigentlich auch, damit das mit der Höhe funktioniert, hab ihn aber hier cashiert in dem er die gleiche Farbe hat wie der body.

CSS:
Code: 
/* CSS Document */

div#content{

margin:0 auto 0 auto;
width:400px;
background-color:#888888;

}

div#header{

clear:both;
height: 40px;
background-color:#999999;
}

div#navi{

float:left;
hight:100%;
width: 70px;
background-color:#888888;

}

div#main{

float:right;
hight:100%;
width: 330px;
background-color:#666666;


}


div#footer{

clear:both;
height: 40px;
background-color:#fff;
}
HTML:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Unbenanntes Dokument</title>
    <link rel="stylesheet" href="styles.css" type="text/css" />

</head>

<body>
<div id="content">
	<div id="header">
	</div>
	<div id="content2">
	<div id="navi">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum viverra est cursus ante. Nam tempus erat ut enim hendrerit ultrices. Morbi porta.
	</div>
	<div id="main">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum viverra est cursus ante. Nam tempus erat ut enim hendrerit ultrices. Morbi porta. Curabitur leo leo, malesuada sed, varius sed, nonummy sit amet, arcu. Pellentesque non eros. In hac habitasse platea dictumst. In elementum justo a leo. Nunc interdum. Donec quis leo et mauris varius tincidunt. Nam nisl. Etiam laoreet hendrerit enim. Praesent cursus augue sed dolor. Nulla mauris. Donec est velit, rhoncus in, vehicula eget, luctus id, felis. Duis vulputate. 

Fusce quis metus. Nullam ultricies ligula vel pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus scelerisque sodales nibh. Fusce mattis elit a dolor. Aenean lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean in enim. Integer ut elit. Morbi a turpis. Mauris ultricies augue volutpat quam. Phasellus tempus. Aenean nibh urna, luctus sed, condimentum id, pulvinar vitae, arcu. Donec sit amet nisl. Praesent rhoncus fermentum est. Nullam tincidunt semper libero. Curabitur porttitor molestie eros. 

Integer dictum nisl eget turpis. Phasellus malesuada purus ut diam. Morbi tincidunt. Donec eget justo. In rhoncus, velit sit amet pellentesque volutpat, lorem enim ultrices quam, sed pulvinar diam libero euismod augue. Cras eget ipsum. Proin tortor pede, tempus a, dapibus et, placerat sed, justo. In nulla arcu, laoreet in, consequat eu, adipiscing vel, odio. Nulla iaculis massa eget ipsum. Fusce enim nibh, nonummy nec, hendrerit mollis, porttitor eu, diam. Maecenas pharetra ultrices magna. In at elit. Morbi non arcu vel leo ultrices elementum.
	</div>
	</div>
	<div id="footer">
	</div>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Im Prinzip, maceis, ist Punkt 3 ein interessantes Problem, aber in der Praxis machen die aktuellen Browser bei einer Höhenangabe von 100% bislang einfach nix.

Als Workaround wird häufig ein Hintergrundbildchen genommen, welches Du einfach in den Container #content links-vertikal anhängen würdest, welches optisch dadurch den Navigationsstreifen darstellt.

Die übrigen Themen lassen sich schnell abhandeln: Zwar ist die Lösung mit den negativen Außenrand (margin) auch möglich, aber mit "margin:auto" vermutlich eleganter. Hier definierst Du einfach den äußeren Container "#content" mit einer festen Breite und legt den linken und den rechten Außenrand auf "auto" fest. Schon rückt dieser Bereich in die Mitte. Negative Außenränder brauchst Du erst, wenn Du auch die vertikale Ausrichtung zentrieren möchtest, weil Dir dann der MSIE aussteigt.

Noch ein Tipp: Da ja die rechte Spalte um die linke herumfließt, wird hier mit "float: left" und "float: right" gearbeitet, was irgendwann, spätestens beim Footer wieder zurückgesetzt werden kann, damit der Footer zum Beispiel die ganze Breite von #content ausfüllen kann. Dazu verwende ich den "Clearer".

Hier das praktischer Beispiel:

Code: 
body {
	margin: 0; }
#content {
	width: 780px;
	margin-right: auto;
	margin-left: auto; }
#top {
	line-height: 45px;
	background-color: #add8e6;
	margin-top: 50px; }
#navi {
	background-color: #008000;
	width: 150px;
	float: left; }
#main {
	background-color: #90ee90;
	width: 630px;
	float: right; }
div.clearer {
	clear: both;
	display: block;
	margin: 0;
	padding: 0;
	height: 0;
	line-height: 1px;
	font-size: 1px  }

Das ganze sieht dann so aus:
maceis_css1.png


Die dazugehörende HTML-Datei liegt hier zum Download:
maceis.html.zip

Ich glaube schon, dass es auch mit den interessantesten Browsern gut läuft, und wenn nicht, dann zumindest mit den 7ern unter den MSIEs, aber für's testen isses mir nun zu spät. Gute Nacht :D

Hoffe, es hilft.
 
voll der stau hier;
 
[edit]ich seh grad, da sind ja noch viel Beiträge - muss ich erst mal lesen[/edit]

simusch schrieb:
kommst wohl nicht drumherum, navi und main in ein zusätzliches div zu stecken und den beiden dann die höhe 100% zu geben...
Zum Vergrößern anklicken....
Schon probiert; es funktioniert nur dann, wenn ich diesem zusätzlich div ein Höhe in px oder % verpasse, was ich vermeiden möchte.
Im Idealfall würde ich diesem zusätzlichen div eine minimale Höhe geben, aber damit kommen einige Browser nicht klar.
 
danlo schrieb:
Also Höhe variabel, aber beide layer immer gleich hoch geht theoretisch nicht, aber mit einem einfachen trick klappts. Einfach die Hintergrundfarbe des wrappers, also hier in meinem code #content gleichsetzten mit der der navi.
...
Zum Vergrößern anklicken....
Vielen Dank für Deinen Vorschlag.

Beim IE (V6) klappt es nicht immer richtig. Der #main Bereich beginnt erst unterhalb der #navi Bereichs, wenn einzelne Worte zu lang sind um in der Breite in den navi Bereich zu passen.
Aber das kann man ja steuern.

@Hilarius
Danke auch an Dich; Dein Vorschlag ist dem von danlo sehr ähnlich.
Hilarius schrieb:
...
aber in der Praxis machen die aktuellen Browser bei einer Höhenangabe von 100% bislang einfach nix.
Zum Vergrößern anklicken....
Nach meiner Beobachtung verhält sich das ähnlich wie mit "position: absolute".
Die meisten aktuellen Browser machen bei "height: x%" nur dann was, wenn der umgebende Container eine definierte Höhe hat.
Wenn dies nicht zutrifft, gibt es "seltsame" Effekt, z.B, dass der Inhalt zwar dargestellt wird, nicht aber die Hintergrundfarbe.
 
maceis schrieb:
Vielen Dank für Deinen Vorschlag.

Beim IE (V6) klappt es nicht immer richtig. Der #main Bereich beginnt erst unterhalb der #navi Bereichs, wenn einzelne Worte zu lang sind um in der Breite in den navi Bereich zu passen.
Aber das kann man ja steuern.

@Hilarious
Danke auch an Dich; Dein Vorschlag ist dem von danlo sehr ähnlich.
Nach meiner Beobachtung verhält sich das ähnlich wie mit "position: absolute".
Die meisten aktuellen Browser machen bei "height: x%" nur dann was, wenn der umgebende Container eine definierte Höhe hat.
Wenn dies nicht zutrifft, gibt es "seltsame" Effekt, z.B, dass der Inhalt zwar dargestellt wird, nicht aber die Hintergrundfarbe.
Zum Vergrößern anklicken....

Ja, und daher beobachte ich sehr oft die Verwendung eine vertikal-gekachelten Hintergrundbildchens, welche als Mimikri die Fortführung der linken Spalte nach unten erzeugt. So gesehen, nicht die schlechteste Methode. ;)
 
Noch ein/zwei Fragen an Euch beide.

Bei genaueren Testen habe ich jetzt bemerkt, dass Ihr beide mit XHTML arbeitet.
Damit habe ich mich bisher kaum beschäftigt.
MIt meinem "alten" Doctype war die Darstellung jedenfalls nicht ganz zufriedenstellend.

Hat das noch irgendwelche weitere Auswirkungen, die ich beachten muss?
Kommen die älteren IE's (so ab Win98, IE 4 oder 5) damit klar? - Das ist in diesem Fall ziemlich wichtig.

Aufgefallen sind mir schon die Attribute, die Ihr dem einleitenden html-Tag mitgegeben habt.
Was hat es damit auf sich? Braucht man die zwingend bzw. welchen Zweck habe die?
 
maceis schrieb:
Noch ein/zwei Fragen an Euch beide.

Bei genaueren Testen habe ich jetzt bemerkt, dass Ihr beide mit XHTML arbeitet.
Damit habe ich mich bisher kaum beschäftigt.
MIt meinem "alten" Doctype war die Darstellung jedenfalls nicht ganz zufriedenstellend.

Hat das noch irgendwelche weitere Auswirkungen, die ich beachten muss?
Kommen die älteren IE's (so ab Win98, IE 4 oder 5) damit klar? - Das ist in diesem Fall ziemlich wichtig.

Aufgefallen sind mir schon die Attribute, die Ihr dem einleitenden html-Tag mitgegeben habt.
Was hat es damit auf sich? Braucht man die zwingend bzw. welchen Zweck habe die?
Zum Vergrößern anklicken....

Ja, es hat schon einige leichte aber sichtbare Auswirkungen, vor allem ist aber XHTML strenger im Umgang mit nicht geschlossenen Tags, was die server-seitige Programmierung erleichtert. Viele moderne Browser verarbeiten den Inhalt bei "wohlgeformtem" XHTML aber auch schneller, da die dann nicht mehr in den Quirks-Mode (wenig meckern, viel interpretieren) umschalten.

Für mich ist die Verwendung von HTML4 oder XHTML immer die Frage der Zielgruppe meiner Kunden, da "alte" Browser damit schon ihre Schwierigkeiten haben können. Hier ist HTML4 eine halbwegs verlässliche Bank, wenn man die Unwägbarkeiten bereits gut kennt.

Schließlich und endlich ist es natürlich immer auch Eitelkeit, denn die meisten Kunden reagieren auf Wörter die mit X beginnen (XHTML, XML, XSLT) immer ganz so, als wäre dies ein Allheilmittel. Es weiß zwar dann kaum noch einer, worüber man redet, aber alle stimmen ganz doll zu (je "professioneller" und größer die Fachabteilung des Kunden, desto mehr trifft die zu, da auch diese intern berichten, und dann immer gern mit X-Wörtern um sich werfen).

Natürlich gibt es darüber hinaus noch ungezählte Vor- und Nachteile, aber dies sind die nennenswertesten, denke ich ;)
 
@dms
Danke für den Tipp.
Sieht auf den ersten Blick recht interessant aus.
Werde ich mal durcharbeiten.

@Hilarious
Eine meiner wichtigsten Anforerungen für den Webauftritt, den ich derzeit vorbereite, ist die ordentliche Darstellung in möglichst allen noch gängigen Browsern.
Die Zielgruppe ist heterogen und man muss mit teilweise "veralteter" Computer-/Softwareausstattung rechnen.

Lässt sich das Deiner Erfahrung nach mit XHTML vereinbaren?
Der Kunde weiss weder was HTML noch was XHTML ist und verlässt sich bei der Konzeption voll auf mich - insofern ist "Eitelkeit" hier kein Thema ;).

Wenn ich Dich recht verstanden habe, schalten die Browser mit XHTML auch nicht in den Quirks Mode. Den Quirks Mode habe ich (wenn auch ungern) oft verwendet, um eine einheitliche Darstellung z.B. von Bildern zu erreichen.
Wie sind Deine Erfahrungen mit XHTML in diesem Bereich?

---
Noch einige Hintergrundinfos für die, die es interessiert.
Es geht um eine Seite für einen Vermietungsbetrieb mit zwei Häusern.
Die Seite wird mehrsprachig sein
Ich werde eine Portalseite erstellen, die auf die beiden Häuser verzweigt.
Am Ende sollen alle Seiten dynamisch von einem cgi Skript in Perl und einigen (z.T. selbst geschriebenen) Perl Modulen generiert werden.
Zum Aufruf des Skriptes mit den dazugehörigen Parametern verwende ich ein .htaccess Datei und RewriteRules.
Ein großer Teil der eigentlichen Inhalte wird in einer Datenbank gespeichert sein.
 
maceis, ich würde in diesem Falle noch HTML4.01/Transitional bevorzugen, damit Du Freiraum "nach unten" hast, aber trotzdem kannst Du ja den HTML-Quelltext soweit vorbereiten, dass der Schritt zum validen XHTML nicht mehr weit ist. Bei HTML4 ist es m. E. nicht so wichtig, dass der Code in einem Validator glänzt. Hauptsache das Ergebnis stimmt, es ist Dir nicht peinlich, und die Rechnung wird bezahlt ;)
 
Hilarious schrieb:
maceis, ich würde in diesem Falle noch HTML4.01/Transitional bevorzugen,
...
Zum Vergrößern anklicken....
Das war auch mein Eindruck.
Allerdings funktioniert dann die Layoutlösung nicht so richtig.
Im schlimmsten Fall mach' ich es mit einer Tabelle, lieber wäre mir allerdings eine CSS Lösung.
Falls also noch jemand einen Vorschlag parat hat - immer her damit ;).
 
um zu erzwingen, dass ein element die komplette höhe des browserfensters einnimmt,
sollte man es absolut positionieren und das attribut bottom dann auf "0px" setzen,
nur weil da grad der einwand aufkam, dass die methode mit height:100% nicht
funktioniert.

gruß moses :)
 
Das richtet das Element doch aber nur am unteren Rand aus, oder?
 
hier ging es doch darum, ein element auf die 100%-ige höhe zu bringen, und dass
macht mein beispiel doch. selbstverständlich muss man dann noch "top" angeben.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten