Style af DIV

[stig]

I de video som der her på siden er det to måder at gøre det på.
Ved hjælp af position: absolute også ved hjælp af margin.


Nu har jeg prøvet at lave det samme style med bække metoder.
Det går helt fint lige på nær når jeg bruger position: absolute så kan jeg simpel hen ikke få footeren til at ligge i bunde af siden. Lige meget hvad jeg gør.

Koden til html

Kode: Vælg alt

<div id="wrapper">
        
        <div id="header">Header</div>
        <div id="top_menu">TOP MENU</div>
        <div id="left">left</div>
        <div id="indhold">indhold</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>

        </div>
        
        <div id="footer"></br></div>

    </div>

koden som jeg bruger ved position: absolute

Kode: Vælg alt

#wrapper {
    width: 1050px;
    border-style: solid;
    border-color: #000;
    border-width: thin;
    position: absolute;
    left: 50%;
    margin-left: -550px; 

}
#header {
    width: 1000px;
    height: 200px;
    border-style: solid;
    border-color: #000;
    border-width: thin;
    text-align: center;
    position: absolute;
    left: 25px;
    top: 0px; 

}
#top_menu {
    width: 1000px;
    height: 50px;
    border-style: solid;
    border-color: #000;
    border-width: thin;
    position: absolute;
    left: 25px;
    top: 200px;  

}
#left {
    width: 100px;
    border-style: solid;
    border-color: #000;
    border-width: thin;
    position: absolute;
    left: 25px;
    top: 250px; 
    
}
#indhold {
 width: 900px;
    border-style: solid;
    border-color: #000;
    border-width: thin;
    position: absolute;
    left: 125px;
    top: 250px; 
}
#footer {
   width: 1000px;
   height: 10px;
    background-color: #4d4c4d;
    border-style: solid;
    border-color: #000;
    border-width: thin;
    position: absolute;
    left: 25px;
    bottom: 1px;
  
}

koden som jeg bruger ved Margin

Kode: Vælg alt

#wrapper {
    width: 1050px;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: thin;

}
#header {
    width: 1000px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: thin;
    text-align: center;

}
#top_menu {
      width: 1000px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: thin;
    text-align: center;
}
#left {
    width: 100px;
    border-style: solid;
    border-width: thin;
    margin-left: 25px;
    float: left;
    
}
#indhold {
  margin-right: 25px;
    border-style: solid;
    border-width: thin;
    margin-left: 125px;
 
}
#footer {
    width: 1050px;
    height: 10px;
    margin-left: auto;
    margin-right: auto;
    background-color: #4d4c4d;
}

jeg bruger ikke height i style da jeg gerne vil havde div til at tilpasse sig det indhold.
Hvad pokker er det som jeg gør forkert

en ting som der ikke bliver omtalt i video er for og bagdele ved det to metoder at gøre det på.

[ThomasI]

Når jeg tester din kode i http://cssdesk.com/

Så virker det nu rigtig nok med position:absolute.

Læg mærke til at du i din footer skriver "bottom" istedet for "top", hvilket betyder at din footer vil blive placeret 1 px; over bunden...

Hvis du istedet ændre det til top, og skriver 300 px; så kommer din footer til at ligge nogenlunde under resten af dit indhold...

[stig]

Fik vist ikke udtrygt mig tydelig nok så nu har jeg lagt bække på nette så man kan se forskellen.
Det jeg vil opnå er at footer liger sig automatisk i bunden af de andre div så jeg kan ændre på den som jeg lyster og den stadigvæk beholder sin position i bunden.

Med margin funder det perfekt men at den selv tilpasser sig så den altid ligger i bunden lige meget størrelsen på de andre , som kan ses her
http://team7000.dk/csstest/margin.html

Med position: absolute liger footer sig i topen af siden lige meget hvad jeg gør, som kan ses her.
http://team7000.dk/csstest/positon%20absolute.html

[ThomasI]

Du kan ikke opnå denne funktionalitet med postion absolute. Som ordet også sige, så er det en absolut position, hvilket betyder at den ikke kan flytte sig. Du kan måske godt sætte width til auto, men så vil dine divs bare gå ind over hinanden i takt med at de bliver større...nemtop fordi deres positioner faste...

Så hold dig til margin:auto

[stig]

Ja holder jeg mig til margin.
Ja jeg har også prøvet at bruge auto og det gav det resultat som du beskriver.