Ergebnis 1 bis 6 von 6

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

  1. #1
    Azubi(ne)
    Registriert seit
    11.02.2009
    Beiträge
    71
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Samurai
    Registriert seit
    16.01.2009
    Ort
    Hannover
    Beiträge
    248
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Der Anfang ist die halbe Miete...Positionierung...

    hm guck dir am besten mal css4you.de an du kannst ja die grundsätze schon :P wirkt zumindest so

  3. #3
    Azubi(ne)
    Themenstarter

    Registriert seit
    11.02.2009
    Beiträge
    71
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

    EDIT:
    Ich habe es mir jetzt noch einmal angeguckt und einiges ausprobiert, aber ohne erfolg.
    Die Erklärungen sind nicht sehr aufschlussreich..
    Geändert von synaptic (22.02.2009 um 02:49 Uhr) Grund: vermeide bitte doppelposts und benutz die edit-funktion -synaptic-

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Der Anfang ist die halbe Miete...Positionierung...

    body
    {position:absolute;
    margin: 0;
    padding: 0;
    font: 100% arial, hevetica, sans-serif;
    text-align: center;
    color: #505367;
    background-color: gray;
    z-index: 1;

    width: 100%:
    height: 100%;



    }

    #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;
    }
    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.
    Geändert von sejuma (22.02.2009 um 11:24 Uhr)

  5. #5
    Azubi(ne)
    Themenstarter

    Registriert seit
    11.02.2009
    Beiträge
    71
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Der Anfang ist die halbe Miete...Positionierung...

    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">ffffffffffffffffffffffffffffffffffffffff ffffffffff
    <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>

  6. #6
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Der Anfang ist die halbe Miete...Positionierung...

    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

Ähnliche Themen

  1. Anfang
    Von Smarty im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 01.09.2008, 14:55
  2. Ordnung ist das halbe Leben - aber leider nicht Ihre Stärke?
    Von Younes Jbilou im Forum Off Topic und Quasselbox
    Antworten: 0
    Letzter Beitrag: 26.05.2008, 12:04
  3. C++ Anfang
    Von Adlerr im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 18.06.2006, 21:50
  4. von anfang an falsch
    Von mel im Forum HTML & CSS Forum
    Antworten: 19
    Letzter Beitrag: 13.12.2005, 13:16
  5. Halbe Schallmauer
    Von dieWoelfin im Forum Off Topic und Quasselbox
    Antworten: 25
    Letzter Beitrag: 10.06.2003, 23:29

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •