Notifikationer

Markér alle som læst Log ud

jamola Nybegynder

21. november 2004 - 13:21 Der er 7 kommentarer og
1 løsning

Designproblem med div med varierende højde

Jeg ønsker at kunne designe en webside med (lodret set) en div med navigation, en div med indhold (som kan variere i højde alt efter indholdet), og en div i bunden, som følger nedefter når div'en med indholdet bliver højere.

Problemet er at få bund-div'en til at følge nedefter alt efter højden på indholds-div'en, når:
-Jeg ikke ønsker at bruge en tabel.
-Jeg ikke ønsker at lade det styre ved hjælp af javascript.

Kan dette overhovedet lade sig gøre?
:-)

Synes godt om

skovenborg Nybegynder

21. november 2004 - 13:55 #1

Det kan lade sig gøre, men det skal dog lige siges at til disse formål er en tabel nok mest at foretrække. Det er lidt misforstået at tabeller overhovedet ikke må bruges til design - problemmet i starten var blot, at man brugte dem unødigt til for mange ting, så tabellerne blev store, tunge og bøvlede at have med at gøre.

Men nu til et løsningsforslag:
<style type="text/css">
body,html {height:100%;margin:0px;padding:0px;border:0px;} /* En god start på en rodet omgang CSS */
#container {
position:relative;
height:100%;
}
#navigation {
background-color:#f00;
height:100px;
}
#content {
margin:0px;
width:100%;
padding-bottom:50px;
position:relative;
left:0px;
top:0px;
}
#footer {
height:50px;
width:100%;
background-color:#00f;
position:absolute;
bottom:0px;
left:0px;
}
</style>

<div id="container">
<div id="navigation"></div>
<div id="content">
Her skal indholdet så være.
<div id="footer"></div>
</div>

Synes godt om

notes2c Nybegynder

21. november 2004 - 14:03 #2

Eller måske
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
html, body {
height: 100%;
margin:0;
padding: 0;
}
#nav {
float: left;
background-color: red;
width: 220px;
height: 95%;
}
#con {
background-color: green;
height: 95%;
}
#fot {
clear: both;
height: 30px;
background-color: blue;
}

</style>
</head>

<body>
<div id="nav"> </div>
<div id="con"> </div>
<div id="fot"> </div>

</body>
</html>

Synes godt om

skovenborg Nybegynder

21. november 2004 - 14:11 #3

hmm, jeg havde måske misforstået hvad han mente eller... ;-)

Skal lige siges jeg har testet designet af i IE5+, Opera7 samt Mozilla (Firefox 1.0)

Synes godt om

olebole Juniormester

21. november 2004 - 16:19 #4

<ole>

... og så kan du roligt bruge en tabel til kolonne opdeling og tabulleret data-opstilling. Der er mange, der fraråder brug af tabeller til noget somhelst ... W3C er dog ikke mellem dem ;o)

/mvh
</bole>

Synes godt om

skovenborg Nybegynder

21. november 2004 - 16:45 #5

...og især her vil det som sagt være meget lettere og nok også mere venligt for de stakkels browsere ;-) Begge måde er lige rigtige at bruge vil jeg arrogant påstå :-)

Synes godt om

jamola Nybegynder

23. november 2004 - 21:14 #6

Tak for kommentarene.
Jeg tror jeg undgår nogle problemer hvis jeg lægger bund-div'en i en <td>.

Synes godt om

notes2c Nybegynder

23. november 2004 - 22:28 #7

Hvilke problemer tænker du på?

Synes godt om

jamola Nybegynder

18. august 2010 - 17:52 #8

Lukker

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS