Antworten zum Thema „Volle breite aber mittig setzen“

iApple · 08.03.2011

Hi zusammen,

ich möchte eine kleine WebSeite erstellen. Die sollte etwa so aussehen:

Also der Header, Navi und body soll die volle breite des Browser füllen. Also 100%. Der allgemeine Content soll aber mit einer 1000px breite weiss genau in der Mitte sein. Ich habe alle Positionen in divs in der CSS-Datei abgespeichert. Danach habe ich divs mit 1000px breite erstellt und mit margin: auto in die Mitte ausgerichtet. Darin definiere ich den allgemeinen Inhalt.

Aber:

1. Ich möchte die Navigation und das Logo über den Header platzieren. Bei mir nimmt es aber die Hintergrundfarbe auf.

Schaut selbst und helft mir bitte. Oder habt Ihr eine bessere Idee?

HTML-Code:

HTML:

<body>

    <div class="sheader">
    
        <div class="header">
        
            <p>jhgjhg</p>
    
        </div>
        
    </div>
    
    <div class="mainbg">
    
    </div>
    
    <div class="lineuheader">
    
    </div>
    
    <div class="smain">
    
        <div class="main">
    
        </div>
        
        <div class="sidebartop">
    
        </div>
        
        <div class="sidebarmiddle">
    
        </div>
        
    </div>
    
</body>

CSS-Code:

HTML:

/* Main Content Parts */

body {
    margin: auto;
}

div.header {
    background-image: url(../img/header_bg.png);
    background-repeat: repeat-x;
    width: 100%;
    height: 170px;
    position: absolute;
    z-index: 1;
}

div.mainbg {
    background-color: #262626;
    height: 100%;
    width: 100%;
    position: absolute;
}

div.lineuheader {
    background-color: #cac8c8;
    height: 30px;
    width: 100%;
    position: absolute;
    top: 170px;
}

div.main {
    background-color: #FFF;
    width: 730px;
    height: 800px;
    position: absolute;
    top: 220px;
    float: left;
    -moz-border-radius: 10px;
}

div.sidebartop {
    background-color: #262626;
    border: solid 10px;
    border-color: #FFF;
    width: 230px;
    height: 300px;
    position: relative;
    float: right;
    top: 220px;
    left: 20px;
    -moz-border-radius: 10px;
}

div.sidebarmiddle {
    background-color: #FFF;
    width: 250px;
    height: 300px;
    position: relative;
    float: right;
    top: 580px;
    left: 270px;
    -moz-border-radius: 10px;
}

/* Main Spaces */

div.smain {
    width: 1000px;
    margin: auto;
}

div.sheader {
    width: 1000px;
}

Gruss

MegaAdi · 08.03.2011

AW: Volle breite aber mittig setzen

für header und banner deklarierst du einfach volle Breite mit 100% und für den content nimmst du margin: 0 auto; (der zweite wert ist für rechts und links und mit Auto hat er dann rechts und links immer den gleiche Abstand) Wichtig ist dass du für den Content eine feste Breite deklarierst um auto nutzen zu können.

sokie · 08.03.2011

AW: Volle breite aber mittig setzen

das sieht gruselig aus.
bei der Vorgabe (Bild) kommst du eigentlich ohne position: absolute aus. position absolute und float: right(left) machen in der Kombination nie sinn.
versuch deine Elemente so aufzubauen wie sie im Dokument erscheinen: also willst du oben eine navigation - notier sie als erstes (oder direkt im header). Pack den Bereich der nur 1000px breit sein soll in einen container (margin: 0 auto), und den hauptinhalt und die seitenleiste floatend da rein, den footer unten drunter - dann sollte es funktionieren. Wie gesagt, es gibt keine Notwendigkeit Elemente absolute zu positionieren.