Div-Problem

    Hallo,
    versuche gerade eine Seite die ich mithilfe von Photoshop designed habe zu verwirklichen.
    Im großen und ganzen sollte diese so aussehen:

    [Blockierte Grafik: http://www.bilder-hochladen.net/files/thumbs/gilk-1.jpg]

    Habe nun versucht die einzelne Elemente in Div-Container zu verschachteln, was im oberen Teil (Nav+Header) der Seite auch gut funktionierte.

    Jetzt sieht es also folgendermaßen aus:
    [Blockierte Grafik: http://www.bilder-hochladen.net/files/thumbs/gilk-2.jpg]

    Wie ihr aber wahrscheinlich seht habe ich dort 2 Probleme. Erstens Will ich dass der Content mind. die restliche Seite des Browserfensters ausfüllt. Habe dass schon mit 100% height versucht, aber will irgednwie nicht funktioneren. Das zweite Problem wäre der Rand zwischen Header und Content..Lässt sich dass irgendwie mit margin beheben? Wenn ja, wie?

    Hier noch mein Quelltext:

    <!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=utf-8" />
    <title>FMG - Unikat</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>

    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <center>
    <div class="container1">
    <div class="nav">
    <div class="header">
    </div>
    </div>
    </div>
    <div class="container2">
    <div class="content">
    <p>Inhalt</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    </div>
    </center>
    </body>
    </html>

    Und mein CSS-File:

    .container1 {
    width:100;
    height:400px;
    background-image:url(images/bg.gif);
    background-repeat:repeat-x;
    }
    .nav {
    width:980px;
    height:120px;
    }
    .header {
    background-image:url(images/header.gif);
    background-repeat:no-repeat;
    width:980px;
    height:280px;
    position:absolute;
    top:120px;
    left:auto;
    }
    .container2 {
    background-color:#E9E9E9;
    width:100;
    height:auto;
    }
    .content {
    background-color:#FFF;
    width:980px;
    height:auto;
    }


    Könnt ihr mir helfen?

    Viele Dank schonmal..

    Hier fehlt eine Maßeinheit beim width-Wert:

    Zitat

    .container1 {
    width:100;
    height:400px;
    background-image:url(images/bg.gif);
    background-repeat:repeat-x;
    }

    Wenn es 100% sein sollen, dann fehlt ein Bezugspunkt, worauf sich diese beziehen.
    Definiere dann also noch für html und body 100% Breite.

    Wozu und warum verwendest du absolute Positionierungen?

    Die margin-Angaben für body solltest du per CSS hinterlegen.
    Der center-Tag ist veraltet. Zentriere besser so: http://www.ohne-css.gehts-gar.net/0001.php

    Wie ist das gemeint mit dem Bezugspunkt?
    Ich habe ja im Prinzip 2 Divs mit einer 100%igen Breite, einmal der im oberen Teil, sprich Navi+Header, der in der Höhe bis 400px reichen sollte. Und anschließend sollte der zweite Div (container2) ab 400px bis auto bzw. mind. Fensterrand reichen. Wie kann ich den "Bezugspunkt" herstellen?


    Danke schonmal!

    Gruß

    der bezugspunkt ist dabei ein eltern-element, am besten schreibste im css sowas wie:

    Code
    body{
height:101%;
width:100%;
padding:0;
margin:0;
border:0;
}

    so haste den bezugspunkt und direkt eiune browser-nullung (die hilft dabei wenn elemente eigentlich eigene abstände out of the box haben)
    dann is

    Code
    position:absolute;

    totaler humbug, wenn man damit nicht umzugehen weiß.
    lass des alles mal raus und benutze lediglich padding und margin zum positionieren.
    willst elemente neben einander haben, dann mach

    Code
    float:left;

    oder

    Code
    float:right;


    und sobald du mit floaten fertig bist machste nen br und gibst dem ding nen

    Code
    clear:both;

    mit.

    Okay, habe mein komplettes Konzept nochmals überarbeitet.
    Hier das aktuelle:

    HTML:

    CSS:

    Meine beiden (hoffentlich letzten) Probleme sind nun folgende:
    1. Das Center-Attribut lässt sich irgendwie nicht ersetzen? Ich habe es schon mit der margin-Lösung versucht, es will aber irgendwie nicht.
    2. Zudem will mein eigentlicher Contentdiv, der die Hintergrundfarbe weiß hat nicht komplett bis zum unteren Fensterrand reichen, obwohl er auf 100% Höhe gesetzt ist. Browserabhängig ist dieser Abstand unterschiedlich groß.

    Wäre nett wenn ihr mir nochmals helfen könnt!

    Liebe Grüße

    Du brauchst center nicht zu ersetzen, sondern kannst es löschen.
    Definiere dafür

    Code
    #container { 
width:980px;
margin: 0 auto;
}


    Zu 2:
    Das bekommst du so nicht hin.
    Die 100% richten sich am Elternelement aus. Somit musst du noch hinterlegen:

    Code
    html, body {height: 100%;}


    Damit wird die Seite jedoch höher als 100% weil noch die Höhen von nav und header hinzukommen.
    CSS kann keine px von Prozentwerten subtrahieren.

    Versuch's insgesamt mal so (ungetestet):

    Auf content kannst du prinzipiell auch noch verzichten. Dessen Inhalt kannst du direkt in container schreiben.

    Du siehst: Weniger ist mehr!

    Hat funktioniert!
    Musste noch im nav-Div den bg.gif neu definieren, da der weiße Content-Hintergrund im Nav überlappte. Jetzt funktionierts!

    Viele Dank,
    Gruß