Nu har jag gett mig fanken på att inte använda tabeller. *snyft*
Men det går inte så bra. Sidan ser ut som följer:
http://member.webforum.nu/K%40llen/sajt.pdf
* Headern är som den ska.
* Topmenyn är som den ska.
* Menyn är som den ska.
Sedan börjar strulet. Det vita där det står text, text text ska gå ända ut till högerkanten, det grå ska bort. Menyn och innehållet ska fylla ut sidan så att footern alltid hamnar längst ner även om innehållet inte räcker till.
Hur fixar jag detta?
Även andra synpunkter tas emot på koden så här långt.
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testsida</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="stylesheet" type="text/css" href="presentation.css" />
</head>
<body>
<div id="container">
<div id="header"><h3>Header</h3></div>
<div id="menubar"><p>Huvudsida > subsida1 > subsida2</p></div>
<div id="bodyblock">
<div id="leftcolumn"><h4>Menu</h4></div>
<div id="content"><p>Text <br/>text<br/> text</p></div>
</div>
<div id="footer"><p>Copyright Jörgen Johnsson</p></div>
</div>
</body>
</html>
layout.css
body {
margin-top:0px;
margin-left:0px;
background:#FFFFFF;
background-image: url(background.gif);
background-repeat: repeat-y;
color: #333333;
text-align:left;
padding:0;
}
#container {
text-align:left;
border: none;
width:700px;
margin:left;
}
#header {
height:50px;
background:#FFFFFF;
color:#FFFFFF;
}
#menubar {
height:50px;
background:#F2F2F2;
border:none;
}
#bodyblock {
position:relative;
background: #DCDCDC;
width:700px;
padding:0;
}
#leftcolumn {
height: 100%;
float:left;
background:#DCDCDC;
color: #D7DBD3;
width:200px;
}
#content {
width:500px;
background-color:#FFFFFF;
color: #FFFFFF;
border:none;
text-align:left;
}
#footer {
height:25px;
background:#F2F2F2;
color: #FFFFFF;
border: none;
margin:0;
}