Der Anfang ist die halbe Miete...Positionierung...

    Hallo Leute,

    ich habe jetzt schon unzählige Stunden damit verbracht aus dem Internet Scripte abzuschreiben und zwei Bücher habe ich auch schon über CSS überflogen.

    Ich denke das ganze ist überhaupt nicht schwierig, wenn man denn einmal einen Anfang hat. Und hier, am Anfang komme ich schon nicht weiter.
    Ich habe mit ca 20 Frames meine alte Homepage entworfen und möchte die jetzt Googelfreundlicher gestalten.
    Aber das mit den Div Containern und der Positionierung bekomme ich nicht hin.

    Hier ist mein bisheriges Ergebnis.

    Wenn ich jetzt aber eine Grafik in Hintergrundzwei lade, dann verschiebt sich alles nach unten, obwohl die fest stehen bleiben sollen...

    Wenn ich mit Position: absolute arbeite ist alles weg... ???
    Auch Position Relative habe ich ausprobiert, sowie Z.Index.. Aber nicht zufriedenstellend.. ???

    Könntet ihr bitte einmal drüber gucken...

    Vielen Dank im Voraus
    Gruß
    Markus


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>footer gestalten</title>
    <style type="text/css" media="screen">
    body
    {position:absolute;
    margin: 0;
    padding: 0;
    font: 100% arial, hevetica, sans-serif;
    text-align: center;
    color: #505367;
    background-color: gray;
    z-index: 1;

    }

    #backgroundzwei
    {
    position:absolute;
    margin: 1em auto;
    width: 98%;
    height: 815px;
    text-align: left;
    background-color: white;
    border: 0px solid black;
    z-index: 2;

    }


    #menu
    {


    width:920px; height:500px;

    position:absolute;
    margin: 10em auto;

    text-align: left;
    background-color: silver;
    border: 0px solid black;
    z-index: 3;

    }


    #contents
    {
    position:absolute;
    margin-left: 180px;
    height: 500px;
    width:720;
    background-color: #cccccc;
    z-index: 4;
    }


    </style>
    </head>
    <body>

    <div id="backgroundzwei">kkkkkkkkkkkkkkkkkkkkkkkkkkkk
    <div id="menu">jjjj<br>
    jjjjjjjjjj
    <div id="contents">hier stehen die wichtigen Inhalte damit ich bei Google ganz oben stehe </div>

    </body>
    </html>

    Ja, mit der Seite setze ich mich ja schon auseinander. Komme aber dennoch nicht weiter... :confused:

    EDIT:
    Ich habe es mir jetzt noch einmal angeguckt und einiges ausprobiert, aber ohne erfolg.
    Die Erklärungen sind nicht sehr aufschlussreich.. :mad:

    Einmal editiert, zuletzt von synaptic (22. Februar 2009 um 01:49) aus folgendem Grund: vermeide bitte doppelposts und benutz die edit-funktion -synaptic-

    Lass mal zunächst überall das Rote weg. Absolute Positionierungen sind gerade für den Anfänger meist "tödlich". Sie sollten nur eingesetzt werden, wenn man sich über deren Sinn klar ist. Nimm Positionierungen nur über margin und/oder float vor.
    Füge das grüne ein.

    Dann solltest du einheitliche Breiteneinheiten (blau) verwenden: Entweder px oder Prozent. Beides passt meist nicht unter einen Hut.
    Bei #contents fehlt die Einheit.

    Dann versuch's mal so, wenn ich den Aufbau richtig verstanden habe.

    Code
    <div id="backgroundzwei">
<div id="menu">jjjj<br>
jjjjjjjjjj
</div><!--Ende menu-->
<div id="contents">hier stehen die wichtigen Inhalte damit ich bei Google ganz oben stehe </div> <!--Ende #contents-->
</div><!--Ende backgroundzwei-->

    Suche dir vielleicht mal am besten ein fertiges Layout, das vom Aufbau her deinen Vorstellungen entspricht und passe das dann an.

    Hi,

    danke für deine Hilfe,

    ich habe die Änderungen vorgenommen.

    Jedoch verschieben sich die Kästchen in alle Richtungen, wenn ich in ein anderes Kästchen ein Bild lade oder etwas hineinschreibe.

    Wie kann ich die Kästchen fixieren so das nichts passiert, auch wenn ich in andere Kästchen etwas lade oder in das betroffene Kästchen mehr Inhalt kommt als es anzeigen kann?

    Desweiteren, wie würdet ihr die Anordnung machen, damit sie auch stimmig auf anderen Monitorgrößen wiedergegeben werden kann?

    hier mein bisheriger Fortschritt:




    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>footer gestalten</title>
    <style type="text/css" media="screen">
    body
    { width: 100%:
    height: 100%;
    margin: 0;
    padding: 0;
    font: 100% arial, hevetica, sans-serif;
    text-align: center;
    color: #505367;
    background-color: gold;
    }



    #menu
    {
    margin: 10em auto;
    width: 920px;
    height: 500px;
    text-align: left;
    background-color: gray;
    border: 0px solid black;
    }


    #contents
    {
    margin: 00em auto;
    width: 720px;
    height: 500px;
    background-color: aqua;
    }

    </style>
    </head>
    <body>

    <div id="backgroundzwei">
    <div id="menu">ffffffffffffffffffffffffffffffffffffffffffffffffff
    <div id="contents">hier stehen die wichtigen Inhalte damit ich bei Google ganz oben stehe </div> <!--Ende #contents--></div><!--Ende menu-->
    </div><!--Ende backgroundzwei-->
    </body>
    </html>

    Fixieren brauchst du nichts. Es kommt lediglich auf die Anordnung drauf an bzw. wie die einzelnen Elemente verschachtelt sind.

    Sieh dir mal als Basis dieses Layout an.

    Für alle Monitoren bekommst du eine Seite nicht immer optimal passend.
    Entweder verwendest du eine fixe Breite mit px-Werten oder eine "flüssiges Layout" wo sich die Prozentwerte auf die jeweilige Bildschirmbreite beziehen.
    Die Unterschiede erkennst du hier, indem du mal die Fenstergrößen veränderst:
    Fixes Layout
    Flexibles Layout