div container positionieren!

    Sers Leute, ich sitz hier neu im Boot und hoffe mich mit Hilfe dieses Forums noch ein Stück hocharbeiten zu können!

    Mein Problem: Ich habe einen Cointainer (#banner) der 780 pixel breit und 100 pixel hoch ist als Banner der Page. Dieser soll mittig auf der Page zentriert sein.
    An der linken unteren Seite des Banners soll die Navigitionsleiste (#inhalt) platziert werden. Diese heften mir jegliche Browser nach dem jetzigen Stand meines Quellcodes an die linke Seite des Browser und nicht an die linke Seite des Banners.

    Schaut auch meinen Quellcode an, dann versteht ihr bestimmt mein Problem! Was mache ich falsch?

    <html>
    <head>
    <style type="text/css">

    #body {
    margin: 0;
    padding: 0;
    background: #ffffff;
    height: 100%; }

    #banner { margin:auto;
    height:100px;
    width:780px;
    background-color:#999999;
    border:double;
    border-color:#0066CC;}

    #inhalt { background-color:#993300;
    position:absolute; left:0px; top:5px;
    height:500;
    width:140; }

    </style>

    </head>
    <body id="body">
    <div id="banner"> </div>
    <div id="inhalt" > </div>
    </body>
    </html>

    Über eine baldige Antwort würde ich mich sehr freuen!

    Mit freundlichem Gruß
    CroweHammer

    Hi CroweHammer, dein Problem ist, dass du das Attribut position für deine Zwecke nicht richtig ausnutzt.

    Du musst natürlich Postionen erstmal korrekt angeben, schau dich schlau, würd dir ja nix bringen wenn ich dir hier den fertigen code Posten würde ;)


    http://de.selfhtml.org/css/eigenschaften/positionierung.htm

    Sämtlicher Code erhebt keinen Anspruch auf syntaktische Korrektheit geschweige denn Ausführbarkeit und ist für die Implementation außerhalb der Beispiele nicht geeignet.
    [Blockierte Grafik: http://www.snippr.de/social/img/logo.png]
    Kein Support für kommerzielle Scripts | Kein kostenloser Support via ICQ

    Alles klar ich hab mich schon auf anderen Seiten versucht und bisher irgendwie noch nicht ganz den Überblick bekommen :P

    Du meinst, dass es nur an der Positionierung liegt?

    Die Anordnung ist auch etwas seltsam, du gehst ja immer vom größeren Vorgängerelement aus, wieso machst du dann nicht noch ein Element für die Navi?

    [ navi ] [bild ]

    [inhalt ]

    Sämtlicher Code erhebt keinen Anspruch auf syntaktische Korrektheit geschweige denn Ausführbarkeit und ist für die Implementation außerhalb der Beispiele nicht geeignet.
    [Blockierte Grafik: http://www.snippr.de/social/img/logo.png]
    Kein Support für kommerzielle Scripts | Kein kostenloser Support via ICQ

    Also meine Page sollte folgendermaßen aussehen am Ende!

    [ Banner ]
    [Navi1] [ Inhalt ] [Navi2]

    jop genau, ist bei mir auch nach links gesprungen wie bei dir ;)

    hm, also dann kannste es so lassen, wie gesagt, dies hier musst du noch überarbeiten und bei den anderen dementsprechend ändern

    position:absolute; left:0px; top:5px;

    würds vielleicht mal zur Probe mit Prozentwerten probieren

    z.B. position:absolute; left:20%; top:5px;

    Sämtlicher Code erhebt keinen Anspruch auf syntaktische Korrektheit geschweige denn Ausführbarkeit und ist für die Implementation außerhalb der Beispiele nicht geeignet.
    [Blockierte Grafik: http://www.snippr.de/social/img/logo.png]
    Kein Support für kommerzielle Scripts | Kein kostenloser Support via ICQ

    Jop mein Problem ist im Moment das ich die Positionierung nicht hinkriege, dass sich die Navi an dem Banner orientiert und nicht am Body, seit über 2-3 stunden :/

    kann sie ja auch nicht ! weil position : absolute sich am nächsten Vorgängerelement orientiert, was nicht stätic ist!

    bau bei dem Header mal ein

    postion : absolute;
    left : 50%;
    heigth: 0px;

    Sämtlicher Code erhebt keinen Anspruch auf syntaktische Korrektheit geschweige denn Ausführbarkeit und ist für die Implementation außerhalb der Beispiele nicht geeignet.
    [Blockierte Grafik: http://www.snippr.de/social/img/logo.png]
    Kein Support für kommerzielle Scripts | Kein kostenloser Support via ICQ

    oh man du NUDEL !!!

    so ändern und dann noch die höhe von INHALT etwas nach unten setzen....!


    <body id="body">
    <div id="banner">

    <div id="inhalt" > </div></div>

    </body>

    Sämtlicher Code erhebt keinen Anspruch auf syntaktische Korrektheit geschweige denn Ausführbarkeit und ist für die Implementation außerhalb der Beispiele nicht geeignet.
    [Blockierte Grafik: http://www.snippr.de/social/img/logo.png]
    Kein Support für kommerzielle Scripts | Kein kostenloser Support via ICQ

    rofl immer noch dasselbe auch wenn du mir jetzt den Kopf abreißen willst :P

    <html>
    <head>
    <style type="text/css">

    #body { margin: 0;
    padding: 0;
    background: #ffffff;
    height: 100%; }

    #banner { margin:auto;
    postion:absolute;left :50%; heigth:0px;
    height:100px;
    width:780px;
    background-color:#999999;
    border:double;
    border-color:#0066CC;}

    #inhalt { background-color:#993300;
    position:absolute; left:0px; top:5px;
    height:500;
    width:140; }

    </style>

    </head>
    <body id="body">

    <div id="banner">
    <div id="inhalt" ></div></div>
    </body>
    </html>

    hier der neueste stand wie versprochen, aber passt immer noch net leider :/

    <html>
    <head>
    <style type="text/css">

    #body { margin: 0;
    padding: 0;
    background: #ffffff;
    height: 100%; }

    #banner { margin-left:-15em;
    position:absolute;left :50%; top:0px;
    height:100px;
    width:780px;
    background-color:#999999;
    border:double;
    border-color:#0066CC;}

    #inhalt { background-color:#993300;
    position:absolute; left:0px; top:260px;
    height:500;
    width:140; }

    </style>

    </head>
    <body id="body">

    <div id="banner">
    <div id="inhalt" ></div></div>
    </body>
    </html>

    Pack alles in einen horizontal zentrierten wrapper. Außerdem fehlen da teilweise noch Pixelangaben.

    CSS:

    HTML:

    Wegen der weiteren Vorgehensweise sieh dir mal die Links zu den Layout-beispielen in den FAQ's an.