XHTML design - mangler hjælp til at lave height 100%
Hej Eksperter.Jeg har nedenstående kode til en side.
Jeg har en top og en bund på ca. 40 pixel i højde, og det er meningen at toppen skal være helt i toppen og bunden skal være helt i bunden. (i IE og Mozilla).
Spørgsmål:
1. Hvordan laver jeg sådan at i Mozilla, der er bund billedet i bunden - den virker fint nok i IE.
2. Hvordan får jeg menuen "Menu her" til at blive 100% i højde? altså den skal fylde fra "Menu her" til bund billedet... men hvis jeg sætter den til 100% kommer designet til at blive skævt.
Her er koden
--- SNIP ---
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<title>Tekst</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html { height: 100%; }
body { height: 100%; background: #fff url(baggrund.gif) top center repeat-y fixed; text-align: center; height: 100%; margin: 0; padding: 0; font: 0.9em "Georgia", "Times New Roman", times, serif;" }
</style>
<style type="text/css">
<!--
.centered
{
margin-left: auto;
margin-right: auto;
width: 770px;
height: 100%;
}
//-->
</style>
</head>
<body>
<div class="centered">
<div style="width: 770px; height: 100%; background: transparent url(bund.gif) bottom center no-repeat; padding-bottom: 35px;">
<div style="width: 770px; height: 39px; background: transparent url(top.gif) top center no-repeat;"></div>
<div style="height: 150px; width: 766px; background: #ff0 top center; border: 1px Solid Black;">top</div>
<div style="height: 21px; border: 1px Solid Black; width: 766px; background: #f0f;">menu</div>
<div style="float: left; margin-left: 1px; border: 1px Solid Black; width: 150px; height: 150px;">Menu her</div>
<div style="float: right; padding: 6px; border: 1px Solid Yellow;">
<div style="text-align: left; border: 1px Solid Red; width: 600px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc tempus pede in est. Nullam ante pede, pellentesque malesuada, bibendum nec, ornare in, nibh. Vestibulum pede ante, varius vel, rutrum et, molestie sit amet, massa. Donec ac wisi vitae justo aliquet ornare. Fusce id ipsum ut eros malesuada cursus. Aliquam erat volutpat. Nam ornare ullamcorper orci. Fusce posuere mauris eu urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sed dui eu leo euismod malesuada. Nunc ultricies est eget nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras aliquet pretium justo. In hac habitasse platea dictumst. Aliquam sed nunc sed elit vehicula ultricies. Morbi dignissim. In tellus purus, faucibus eu, tristique quis, imperdiet non, purus. Mauris et neque a lectus semper consequat. Nulla rutrum turpis a urna. <br /><br />
Aliquam metus nunc, lacinia sit amet, ornare sed, facilisis sit amet, ipsum. Maecenas wisi arcu, gravida nec, accumsan nec, rutrum vel, tellus. Duis ullamcorper, pede vitae ornare iaculis, justo sem feugiat risus, a fringilla massa sem vel turpis. Aenean id felis. Etiam fringilla. Vivamus felis massa, porta et, rhoncus et, pharetra at, dolor. Nam massa ligula, vestibulum id, eleifend ac, porttitor eu, urna. Praesent consequat pellentesque lacus. Maecenas elit. Maecenas pharetra. Nulla facilisi. Sed vel lectus ac velit imperdiet rhoncus. Nunc varius fringilla erat. Praesent semper massa eget leo. Nullam tortor leo, rhoncus et, posuere eget, auctor sit amet, dolor. Nulla iaculis. Sed congue vestibulum nisl. Nullam ipsum lacus, dapibus aliquet, auctor sodales, pellentesque et, arcu. Donec eros neque, pulvinar ut, placerat id, sagittis aliquam, tortor. <br /><br />
Aliquam consequat eros nec orci. Nulla interdum libero. Vestibulum pretium lectus a metus. In elit wisi, placerat id, dignissim ac, rhoncus vel, massa. Praesent tempus orci eget est. Sed nibh risus, eleifend eget, pulvinar at, ornare ut, odio. Donec ultricies, wisi eget adipiscing varius, eros eros posuere sapien, non bibendum dolor libero sed lectus. Cras accumsan dignissim libero. Donec eleifend. Vivamus tortor nisl, condimentum tempus, tempor nec, tempus a, urna. Nam ante libero, nonummy eget, blandit eu, imperdiet nec, erat. Integer sodales nunc. Phasellus magna. Cras dui. Vestibulum vehicula ante sit amet nibh. Praesent quis nunc. Donec convallis urna a nibh. Proin imperdiet tellus nec massa. <br /><br />
Pellentesque non diam. Mauris mi. Morbi tristique consectetuer wisi. Nulla facilisi. Nam pede arcu, pretium ut, consectetuer a, tristique et, orci. Integer id orci. Ut imperdiet est sit amet quam. Phasellus et leo. Sed commodo porta erat. Aenean rhoncus imperdiet tortor. Nulla pede. Nulla nec erat. Donec accumsan, leo sit amet lobortis feugiat, sapien eros bibendum urna, non porta sapien diam nec nunc. Donec interdum sapien sed odio. Mauris eleifend purus vel eros. Phasellus leo diam, iaculis at, ornare mattis, sollicitudin sit amet, nisl. Suspendisse odio. Maecenas eleifend, leo bibendum ornare tristique, erat neque gravida quam, in tempor velit tellus non massa. <br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed est libero, eleifend quis, facilisis a, venenatis non, dolor. Duis lorem neque, posuere non, dictum et, fermentum at, ante. Fusce ut wisi id dolor condimentum lacinia. Curabitur vestibulum, risus eu porttitor ornare, dui arcu ornare turpis, ac eleifend lorem tellus eu elit. Aliquam nec ante. Proin luctus. Praesent congue, velit nec dignissim porttitor, dolor libero elementum justo, sed cursus ligula leo condimentum tortor. Phasellus ut felis. Morbi ut sem sodales neque vestibulum tincidunt. Aliquam aliquet neque lacinia dolor. Suspendisse feugiat sapien in pede. Maecenas diam sapien, fringilla nec, pulvinar ac, imperdiet sit amet, mauris. Morbi lobortis convallis libero. <br /><br />
</div>
</div>
</div>
</div>
</body>
</html>
