CSS hjælp til layout

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
MaarteN
Begynder
Indlæg:7
Tilmeldt:10. dec 2012, 11:00
CSS hjælp til layout

Indlæg af MaarteN » 8. apr 2013, 12:38

Hej Nemprogrammering,

Håber på lidt hjælp her.
Jeg er igang med, at lave min portfolio og er kommet lidt i problemer med, at mit content ikke vil komme op på siden. (se screenshot, og tjek scroll baren.)

Billede

Hvad gør jeg her?

Kode: Vælg alt

HTML
<body>
<div id="wrapper">
<div id="header">
</div>
</div>

<div id="footer"> 
</div>
<div id="content">
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>

Kode: Vælg alt

CSS
html, body {
    margin:0;
    padding:0;
    border:0;
    height:100%; 
    min-height:100%; 
}

#wrapper {
    margin:30px 0;
    width:100%;
    min-width:800px;
    height:100%;
    min-height:100%;
}

#header, #footer {
    position:fixed; 
    left:0; 
    width:100%; 
    height:100px;
    background-color:black;
    color:white;
}
#header {
    top:0;
}
#footer {
    bottom:0;
}

#content {

    height:100%;
    min-height:100%;
    background:white;
}
Alt hjælp er behjælpeligt!

Mvh
Morten

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: CSS hjælp til layout

Indlæg af ThomasI » 8. apr 2013, 17:36

Hvad mener du med at det ikke kommer på siden?

Det ser ud til at din struktur er forkert... du lukker din warppe alt for hurtigt...din content div er altså udenfor wrapper diven...

prøv det her:

Kode: Vælg alt

<body>
<div id="wrapper">

<div id="header">

</div>


<div id="content">
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="footer"> 
</div>


</div>
</body>
Jeg har også flyttet din footer, da jeg går udfra at den skal ligge nederst :)

Besvar