Jeg sidder og prøver mig lidt frem inden for CSS-verden, og har afskrevet en
layout-kode fra bogen "Webdesign - illustreret håndbog".
Det skulle gerne give mig en side med 3 kolonner, en header og en footer -
og det gør det da også, men det ser ikke rigtigt ud. Hverken i Firefox eller
i IE.
Er der én der kan fortælle mig hvad der er galt med disse koder:
HTML:
<html>
<head>
<title>layout</title>
<link rel="stylesheet" type="text/css" href="../css/layout.css">
</head>
<body>
<div id="banner"><h1>Banner</h1></div>
<div id="leftcol"><h1>Menu</h1></div>
<div id="indhold"><h1>Indhold</h1></div>
<div id="rightcol"><h1>Submenu</h1></div>
<div id="footer"><h1>Footer</h1></div>
</body>
</html>
CSS:
div#banner h1 {
margin: 0; margin-bottom: 10px; color: #000000;
background-color: #dddddd; font-size: 20px;
border: 1px solid black;
padding-top: 5px; padding-left: 10px;
}
div#leftcol {
width: 170px; float: left; background-color: #dddddd;
border: 1px solid black; height: 395px;
}
#indhold {
height: 395px; margin: 5px 150px 10px 180px;
border: 1px solid black; background: #ddd;
}
#rightcol {
position: absolute; right: 20px; top: 55px;
width: 140px; height: 395px;
border: 1px solid black; background: #ddd;
}
#footer h1 {
color: #000; background: #ddd; margin: 10px 0;
border: 1px solid black; padding: 5px 0px 5px 10px;
}
Det er lidt frustrerende som novice at sætte sig ind i kodningen, når man
ikke en gang kan få noget som man har afskrevet 100% fra en bog til at virke
