Layoutlösung in CSS

Diskutiere mit über: Layoutlösung in CSS im Web Page Design Forum

  1. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.645
    Zustimmungen:
    596
    Registriert seit:
    24.09.2003
    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

    Beiträge:
    2.221
    Zustimmungen:
    186
    Registriert seit:
    27.09.2004
    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

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

    Clovertown MacUser Mitglied

    Beiträge:
    418
    Zustimmungen:
    22
    Registriert seit:
    08.10.2005
    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. Badener

    Badener Gast

    Am Besten wäre ein Codebeispiel - dann könnten auch "Nicht-CSS-Experten" (wie ich) der Diskussion besser folgen ;)
     
  6. danlo

    danlo MacUser Mitglied

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

    Hilarious MacUser Mitglied

    Beiträge:
    2.195
    Zustimmungen:
    5
    Registriert seit:
    25.11.2004
    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

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

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.645
    Zustimmungen:
    596
    Registriert seit:
    24.09.2003
    [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

    Beiträge:
    16.645
    Zustimmungen:
    596
    Registriert seit:
    24.09.2003
    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...
Ähnliche Themen - Layoutlösung CSS Forum Datum
CSS Selektor - Leerzeichen Web Page Design 12.09.2015
lokale css-Anweisung für macuser.de? Web Page Design 21.07.2015
Auslagerung von Klassen in CSS-File Web Page Design 02.04.2015
CSS Problem mit Breiten von ul/li Web Page Design 07.10.2014
CSS: Styling von Abonnieren-Feld Web Page Design 20.08.2014

Diese Seite empfehlen

Benutzerdefinierte Suche