Sideopbygning med CSS
Jeg forsøger at skrue et layout sammen med CSS. Ret simpelt....banner, menu (horizontal), undermenu (horizontal) og indholdrude med 2 spalter.1) Jeg har sat hele siden til at være 804 bred (defineret som attribute: width i <body>), men i IE går det helt galt - kun banneret har denne bredde.
2) Hvordan centrerer jeg alt indhold (elementer, ej tekst) i browseren?
Kode:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"></link>
<title>CSS opbygning</title>
</head>
<body>
<div id='outline'>
<img src='images/top.png'>
<div id='status'>Log på</div>
<div id='menu'>
<ul id='supernav'>
<li>
<a href='link1.htm'>LINK</a>
<a href='link2.htm'>LINK</a>
</li>
</ul>
</div>
<div id='content'>
<div id='spalte1'>
<div id='spalte1-indhold'>
Spalte 1........
Haec disserens qua de re agatur
et in quo causa consistat non videt...
</div>
</div>
<div id='spalte2'>
<div id='spalte2-indhold'>
Spalte 2
</div>
</div>
<img src='images/450h.gif'>
</div>
</div>
</body>
</html>
CSS:
body {
background-color : #FFFFFF;
font: 10pt 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
color : #000000;
margin: 0pt;
padding: 20;
width: 804;
}
#outline {
border-style: ridge;
border-color: black;
border-width: 1pt;
}
img {
border: 0pt;
}
#status {
margin: 0;
padding: 0;
background-color: black;
color: white;
font: 8pt 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
padding: 2pt;
text-align: right;
}
#menu {
margin: 0;
padding: 0;
background-color: #A9C7BF;
font: bold 8pt 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
}
#submenu {
margin: 0;
padding: 0;
background-color: #92B2A1;
font: 8pt 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
}
#content {
padding: 0pt;
}
#spalte1 {
margin: 0pt;
padding: 0pt;
background-color: #FFFCCF;
float:left;
width: 85%;
}
#spalte2 {
margin: 0pt;
padding: 0pt;
background-color: #EEEEEE;
float:left;
width: 15%;
}
#spalte1-indhold {
margin: 0pt;
padding: 2pt;
background-color: #FFFCCF;
}
#spalte2-indhold {
margin: 0pt;
padding: 2pt;
background-color: #EEEEEE;
}
#supernav
{
margin: 0;
padding: 2pt;
text-align: left;
display: block;
}
#supernav li
{
display: inline;
padding: 1pt;
text-transform: none;
}
#supernav a
{
color: #000000;
height: 12pt;
padding: 10pt;
margin: 0pt;
border: 0pt solid;
}
#supernav a:hover
{
color: #CCDDEE;
background: #DDDDDD;
border: 0pt;
}
