Layoutlösung in CSS

  1. maceis

    maceis Thread Starter MacUser Mitglied

    Mitglied seit:
    24.09.2003
    Beiträge:
    16.696
    Zustimmungen:
    602
    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>
     
  2. simusch

    simusch MacUser Mitglied

    Mitglied seit:
    27.09.2004
    Beiträge:
    2.239
    Zustimmungen:
    188
    kommst wohl nicht drumherum, navi und main in ein zusätzliches div zu stecken und den beiden dann die höhe 100% zu geben...
     
  3. danlo

    danlo MacUser Mitglied

    Mitglied seit:
    03.09.2005
    Beiträge:
    372
    Zustimmungen:
    0
    hasse schon ne lösung, sonst kann ich dir das kurz machen.?
     
  4. Clovertown

    Clovertown MacUser Mitglied

    Mitglied seit:
    08.10.2005
    Beiträge:
    419
    Zustimmungen:
    22
    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 :)
     
  5. Am Besten wäre ein Codebeispiel - dann könnten auch "Nicht-CSS-Experten" (wie ich) der Diskussion besser folgen ;)
     
  6. danlo

    danlo MacUser Mitglied

    Mitglied seit:
    03.09.2005
    Beiträge:
    372
    Zustimmungen:
    0
    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>
    
     
  7. Hilarious

    Hilarious MacUser Mitglied

    Mitglied seit:
    25.11.2004
    Beiträge:
    2.161
    Zustimmungen:
    5
    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:
    [​IMG]

    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.
     
  8. danlo

    danlo MacUser Mitglied

    Mitglied seit:
    03.09.2005
    Beiträge:
    372
    Zustimmungen:
    0
    voll der stau hier;
     
  9. maceis

    maceis Thread Starter MacUser Mitglied

    Mitglied seit:
    24.09.2003
    Beiträge:
    16.696
    Zustimmungen:
    602
    [edit]ich seh grad, da sind ja noch viel Beiträge - muss ich erst mal lesen[/edit]

    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.
     
  10. maceis

    maceis Thread Starter MacUser Mitglied

    Mitglied seit:
    24.09.2003
    Beiträge:
    16.696
    Zustimmungen:
    602
    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.
    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.
     
Die Seite wird geladen...