Anzeige

Probleme mit div und float...

Probleme mit div und float... | PSD-Tutorials.de

Erstellt von 2-cool, 19.11.2008.

  1. 2-cool

    2-cool NixChecker:)

    Dabei seit:
    23.12.2005
    Beiträge:
    18
    Geschlecht:
    männlich
    Probleme mit div und float...
    bin ziemlicher css neuling udn hab ein problem beim aufbau der struktur meiner site:

    also ich hab ein div element mit namen "box" in dem sich alle weiteren befinden,
    dann zwei div elemente nebeneinander wofür ich den float befehl brauche...
    nun möchte ich einen footer an das ende der zwei div elemte setzen(innerhalb der hauptbox)
    dies funktioniert jedoch nciht der footer landet ganz oben auf der seite...

    hier die css:
    body {
    margin: 0px;
    }


    #box{



    width: 1000px;



    margin: 0px;



    padding: 0px;
    position: absolute;
    }

    #header{


    height: 100px;
    }



    #content{
    padding: 70px 10px 10px 10px;
    width: 812px;
    float:left;
    }







    #menu{

    padding: 10px;

    width: 146px;
    margin-left: 833px;

    }


    #footer{
    width: 1000px;
    height: 20px;
    background-color: black;
    }

    und die HTML
    (nur von body bis /body)

    <body>
    <div id="box">
    <div id="header">
    ...
    </div>



    <div id="content">
    ...


    </div>
    <div id="menu">
    ...
    </div>
    <div id="footer">
    ...
    </div>
    </div>
    </body>


    zur veranschaulichung noch ne skizze:
    [​IMG]


    hoffe jemand kann was damit anfangen und mir helfen, aber geht bitte nicht zu hart mit mir ins gericht, ist meine erste arbeit nach diesem schema^^

    danke im vorraus
     
    #1      
  2. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Probleme mit div und float...
    AW: Probleme mit div und float...

    Nimm mal in #box das position:absolute raus, das braucht da keiner.

    Du musst zwischen #menu und #footer noch folgendes einfügen:
    <div style="clear:both"></div>

    Kannst dem div aber auch ne Klasse oder ID zuweisen und das auslagern, das ist egal.

    Und bei #menu machst du nicht margin-left: 415641850px sonder einfach float:left, oder um es noch etwas deutlicher zu machen für den Browser float:right. Musst du mal gucken, welches besser angenommen wird.
     
    #2      
  3. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Probleme mit div und float...
    AW: Probleme mit div und float...

    ist ja eine ziemlich standardmässige Anordnung.
    ich frage mich alledings, wo du schon selbst von Floats schreibst, warum du diese Technik nicht auch anwendest.
    gib den beiden Elementen content UND menu das float: left, und alles wird gut. allerdings muss das margin-left am #menu noch weg.

    der Footer eignet sich übrigens in der Anordnung, das floaten der beiden anderen container zu klären #footer{ clear: both };

    die paddings und margins,die auf 0 gesetzt sind würde ich rausnehmen, und für alle Elemente einmal am Anfang der css setzen:
    Code (Text):
    1.  
    2. *{
    3. padding:0;
    4. margin: 0;
    5. }
    6.  
    das hat mehrere Vorteile, zum einen werden die Margins/paddings schon mal für alle Browser gleichgesetzt, zum anderen hast du wesentlich weniger Einträge in deiner css.
     
    #3      
  4. 2-cool

    2-cool NixChecker:)

    Dabei seit:
    23.12.2005
    Beiträge:
    18
    Geschlecht:
    männlich
    Probleme mit div und float...
    AW: Probleme mit div und float...

    erstma super vielen dank für die schnelle hilfe^^

    also wenn ich das absolute rausnehme und den div tag einfüge klappt das mit dem footer.

    jetzt zu den neuen problemen:

    nehme ich float:left oder float:right wird das menu unterhalb des contents angezeigt.
    udn wenn ich das absolute aus der box rausnehme, dann überlagen das menu und der content diese box =/

    gibts vllt n weg das alles klappt?^^ oder liegt das einfach an meinem unverständniss?^^
     
    #4      
  5. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Probleme mit div und float...
    AW: Probleme mit div und float...

    hast du das margin-left am #menu rausgenommen?
    position:absolute braucht das layout an keiner Stelle!
     
    #5      
  6. 2-cool

    2-cool NixChecker:)

    Dabei seit:
    23.12.2005
    Beiträge:
    18
    Geschlecht:
    männlich
    Probleme mit div und float...
    AW: Probleme mit div und float...

    jap hab ich rausgenommen...^^


    edit: ok hab jetzt beide wieder nebeneinander^^
    jetzt ist nurnoch das problem das meine hauptbox (#box^^)
    nichtmehr um das komplett layout geht.
    das heißt ich hab an den seiten keinen border mehr und das sieht bescheiden aus^^
    kriegt man das noch irgentwie hin?

    dann wäre ich glücklich ^_^ naja vllt wisst ihr ja was^^

    edit 2:

    Ich habs hinbekommen...war n blöder fehler meinerseits...sorry dafür^^

    und vielen dnak an euch beide =)
     
    Zuletzt bearbeitet: 19.11.2008
    #6      
x
×
×
teststefan