Problemer med CSS (omkransning og baggrundsfarve)
Jeg har 2 problemer med et simpelt layout jeg er ved at bygge op med CSS. Kode+CSS allernederst.I min side har jeg et banner, menu (horizontal), undermenu (horizontal) og 2 spalter.
1) Jeg vil gerne sikre, at de 2 spalter altid får hele "cellen" udfyldt med en baggrundsfarve - og ikke kun den plads, der er optaget af tekst. Jeg kunne selvfölgelig sätte hver spalte til at have height=600px; - men hvad nu hvis den ene spalte fylder mere end 600 px i höjden, så ser det ikke så pänt ud längere.
2) Jeg har forsögt at lave sådan at hele indholdet (banner, menu, undermenu og de 2 spalter) har en ydre omkrasning. Men det virker hverken i IE eller ildräven, idet kun de 3 överste elementer bliver omkranset.
Kode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"></link>
<title>Sideopbygning med CSS</title>
</head>
<body>
<div id='outline'>
<div id='banner'><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...
<br/><br/><br/><br/><br/><br/><br/>
Haec disserens qua de re agatur
et in quo causa consistat non videt...
<br/><br/><br/><br/><br/><br/><br/>
Haec disserens qua de re agatur
et in quo causa consistat non videt...
<br/><br/><br/><br/><br/><br/><br/>
Haec disserens qua de re agatur
et in quo causa consistat non videt...
<br/><br/><br/><br/><br/><br/><br/>
Haec disserens qua de re agatur
et in quo causa consistat non videt...
<br/><br/><br/><br/><br/><br/><br/>
Haec disserens qua de re agatur
et in quo causa consistat non videt...
<br/><br/><br/><br/><br/><br/><br/>
Haec disserens qua de re agatur
et in quo causa consistat non videt...
<br/><br/><br/><br/><br/><br/><br/>
Haec disserens qua de re agatur
et in quo causa consistat non videt...
<br/><br/><br/><br/><br/><br/><br/>
Haec disserens qua de re agatur
et in quo causa consistat non videt...
<br/><br/><br/><br/><br/><br/><br/>
Haec disserens qua de re agatur
et in quo causa consistat non videt...
<br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
<div id='spalte2'>
<div id='spalte2-indhold'>
Spalte 2
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background-color : #FFFFFF;
font: 10pt 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
color : #000000;
margin: 0 auto;
padding: 20px;
width: 800px;
}
#outline {
border-style: ridge;
border-color: black;
border-width: 1pt;
}
img {
border: 0pt;
}
#status {
margin: 0;
padding: 0;
background-color: black;
color: white;
font: 10pt 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
padding: 2pt;
text-align: right;
}
#menu {
margin: 0;
padding: 0;
background-color: #A9C7BF;
font: bold 9pt 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
}
#submenu {
margin: 0;
padding: 0;
background-color: #92B2A1;
font: 9pt 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
}
#supernav
{
margin: 0;
padding: 2px;
text-align: left;
display: block;
}
#supernav li
{
display: inline;
padding: 1px;
text-transform: none;
}
#supernav a
{
color: #000000;
height: 12px;
padding: 10px;
margin: 0;
border: 0 solid;
}
#supernav a:hover
{
color: #CCDDEE;
background: #DDDDDD;
border: 0px;
}
#content {
padding: 0pt;
}
#spalte1 {
margin: 0pt;
padding: 0pt;
background-color: #FFFCCF;
float:left;
width: 85%;
height: 600px;
}
#spalte2 {
margin: 0;
padding: 0;
background-color: #DDDDEE;
float:left;
width: 15%;
height: 600px;
}
#spalte1-indhold {
margin: 0;
padding: 2pt;
}
#spalte2-indhold {
margin: 0pt;
padding: 2pt;
}
