Avatar billede ripley Nybegynder
27. februar 2008 - 09:59 Der er 9 kommentarer

width med DIV

Hej!

Jeg forsøger at bygge følgende op med DIV .. men hold da op hvor har jeg svært ved at finde ud af DIV/CSS når jeg i så mange år har arbejdet med TABLE's.

Jeg vil gerne have header og footer til at gå hele vejen over, hvis content har en width på f.eks. 1000px - men hvordan?????

<html>
<head>
<style type="text/css">
#header {
    background-color: #99CCCC;
    border-bottom: 1px solid black;
    width: 100%;
}

#sidebar {
    width: 200px;
    height: 400px;
    background-color: #334455;
    color: white;
    position: absolute;
    left: 0;
}

#content {
    height: 400px;
    margin-left: 200px;
    background-color: #99CCEE; color: white;
    border-left: 1px solid black;
}

#footer {
    border-top: 1px solid black;
    background-color: #99CCCC;
    height: 40px;
    width: 100%;   
}
</style>
</head>

<body style="padding:0; margin: 0;">
<div style="width:100%;">
<div id="header">
    <h1 style="color: white; margin-top: 0">test der ikke går hele vejen over</h1>
</div>
<div id="sidebar">Left Menu</div>
<div id="content" style="width:100%">
    <div>Content</div>
    <div style="width: 1000px; background-color: red">Denne går hele vejen over som den skal</div>
</div>
<div id="footer">Footer der ikke går hele vejen over</div>
</div>
</body>
</html>
Avatar billede w13 Novice
27. februar 2008 - 10:33 #1
Kan vi se eksemplet på nettet?
Avatar billede ripley Nybegynder
27. februar 2008 - 10:35 #2
Nej ... kan du ikke bare copy-paste koden ind i notepad, gemme og åbne den i en browser???
Avatar billede w13 Novice
27. februar 2008 - 10:41 #3
Jo, og det ser umiddelbart fint ud? Header og footer fylder 100% i width.
Avatar billede ripley Nybegynder
27. februar 2008 - 11:10 #4
Hm ... hvilken browser/version bruger du?
Og hvilken skærmopløsning har du?
Avatar billede roenving Novice
27. februar 2008 - 14:17 #5
Prøv også at sætte en doctype på, så browserne har den bedste chance for at fortolke din css-kode ens (og forøvrigt have en chance for at lave et validt html-dokument !-)

F.eks.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
...

-- eller

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
...

-- og så behøver du ikke sætte en width:100% på en div, for det er den som default, da den er et block-level element ...

-- men måske skulle du i stedet sætte f.eks.

<div style="width:1000px;margin:0 auto;">

på, så du får en cebtreret side !-)
Avatar billede w13 Novice
27. februar 2008 - 14:25 #6
IE 7 / FF 2
1280x1024
Avatar billede ripley Nybegynder
29. februar 2008 - 09:28 #7
Hej roenving!
Mja, men problemet er at de 1000 px på den anden div kan skifte i størrelse .. derfor ville jeg gerne have, at diven med header+footer kunne strække sig helt ud og fylde så meget, som den med den faste bredde.
Er det slet ikke muligt?
Avatar billede ripley Nybegynder
29. februar 2008 - 09:35 #8
Eller misforstod jeg dig?
Mente du at jeg skulle tilføje margin:0 auto på den div, der allerede nu har de 1000px som bredde?
Jeg synes ikke jeg opnår så meget ved det, hvis det er det, du tænker på?
Avatar billede kimdolleris Nybegynder
02. marts 2008 - 18:41 #9
Hvad er det helt konkret problemet er?

Kan du ikke få footeren til at være 100% i bredden? For det er den her på ie7, ff2(pc), safari3(mac), ff2(mac) ..?

Og tro mig, så snart du lærer at bruge divs til fingerspidserne, glemmer du at du nogensinde har leget med tabeller ;-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester