Jakob skrev:
> Jeg har bøvlet med at lave følgende vha. CSS:
> Et panel i toppen med fast højde og 100% bredde. Samme i bunden (det
> skal altid være nederst i browservinduet). I midten et panel, der
> også har 100% bredde, men har dynamisk højde, afhængigt af
> vinduesstørrelsen.
> Det er ikke lykkedes for mig at få det til at virke tilfredsstillende.
> Kan det laves? Hvordan? Kender du evt. en hjemmeside med en beskrivelse
> løsningen?
Hej, jeg har banket lidt sammen til dig, men du kunne evt. selv kigge
lidt på:
http://www.andersmj.dk/sandbox/centreret_layout.html
Ellers så prøv følgende CSS:
body {
color: #000000;
background-color: #6495ed;
font-family: Arial, Verdana, sans-serif;
margin-top: 20px;
text-align: center;
}
#header {
color: #000000;
background-color: #e6e6fa;
width: 600px;
text-align: left;
margin: 0px auto;
padding: 20px;
border: 1px solid #000000;
height: 90px;
}
#indhold {
color: #000000;
background-color: #e6e6fa;
width: 600px;
text-align: left;
margin: 0px auto;
margin-top: 10px;
padding: 20px;
border: 1px solid #000000;
}
#footer {
color: #000000;
background-color: #e6e6fa;
width: 600px;
text-align: left;
margin: 0px auto;
margin-top: 10px;
padding: 20px;
border: 1px solid #000000;
height: 50px;
}
sammen med følgende HTML:
<div id="header">
<h1>Lorem ipsum</h1>
</div>
<div id="indhold">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse massa ligula,
tempus vel, faucibus eu, aliquet a, erat. Pellentesque suscipit
ultricies odio.
Vivamus faucibus metus sed sapien. Nam volutpat. Nulla ornare venenatis
sem.
Nulla facilisi. Suspendisse pellentesque, diam at egestas feugiat,
dolor ipsum tempus
urna, in bibendum quam neque non nulla. Phasellus nibh diam,
ullamcorper eu, rhoncus
non, convallis facilisis, justo. Morbi metus mi, commodo nec, lacinia
id, fringilla at,
tortor. Quisque mattis. Curabitur eleifend viverra neque. Fusce
vehicula tellus et
tellus. Proin libero. Donec felis. Fusce arcu velit, eleifend vel,
tincidunt rutrum,
malesuada ut, mi. Etiam consectetuer. Vivamus sit amet velit vel ligula
commodo
egestas. Pellentesque placerat tortor ut dolor.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse massa ligula,
tempus vel, faucibus eu, aliquet a, erat. Pellentesque suscipit
ultricies odio.
Vivamus faucibus metus sed sapien. Nam volutpat. Nulla ornare venenatis
sem.
Nulla facilisi. Suspendisse pellentesque, diam at egestas feugiat,
dolor ipsum tempus
urna, in bibendum quam neque non nulla. Phasellus nibh diam,
ullamcorper eu, rhoncus
non, convallis facilisis, justo. Morbi metus mi, commodo nec, lacinia
id, fringilla at,
tortor. Quisque mattis. Curabitur eleifend viverra neque. Fusce
vehicula tellus et
tellus. Proin libero. Donec felis. Fusce arcu velit, eleifend vel,
tincidunt rutrum,
malesuada ut, mi. Etiam consectetuer. Vivamus sit amet velit vel ligula
commodo
egestas. Pellentesque placerat tortor ut dolor.</p>
</div>
<div id="footer">
<h2>Lorem ipsum</h2>
</div>
Placer det mellem dine <body> tags.
Håber det virker for dig.
mvh. Anders M.J.