Jag har tidigare byggt sidor med tabeller och är helt ny på det här med divvar, och jag fattar nästan ingenting. Jag vill att #main, #left, #spacer, #spalt och #right ska vara "fast" i webbläsarens botten och att dom ska anpassa sig efter varandra. Finns det någon vänlig männsika som skulle vilja hjälpa mig lösa det här problemet... Hoppas ni förstår vad jag menar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD[...]1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Author" />
<meta name="keywords" content="" />
<meta name="description" content="description" />
<meta name="robots" content="all" />
<title>K</title>
<style type="text/css">
body, html {
background-image: url(grafik/bg.png);
margin: 0px;
padding: 0px;
font-family: "Verdana", Helvetica, Arial, Sans-serif;
font-size: 11px;
}
#container {
margin: 10px auto;
margin-top: 0px;
margin-bottom: 0px;
float: center;
padding: 0px;
width: 830px;
}
#header {
height: 111px;
width: 809px;
background-image: url(grafik/header.jpg);
}
#meny {
background-image: url(grafik/meny.jpg);
width: 575px;
height: 17px;
float: left;
}
#left {
float:left;
width: 15px;
height: 450px;
background-image: url(grafik/leftborder.jpg);
}
#main {
float: left;
width: 595px;
height: 433px;
background-image: url(grafik/main.jpg);
}
#menyleft {
float: left;
width: 98px;
height: 38px;
background-image: url(grafik/menyleft.jpg) ;
}
}
#menyright {
float: left;
width: 132px;
height: 17px;
background-image: url(grafik/menyright.jpg);
}
#menydown {
float: left;
width: 545px;
height: 21px;
background-image: url(grafik/menydown.jpg);
}
#gigtop {
float: left;
width: 161px;
height: 21px;
background-image: url(grafik/gigtop.jpg);
}
#gigmiddle {
float: left;
width: 161px;
height: 164px;
background-image: url(grafik/gigmiddle.jpg);
}
}
#gig {
float: left;
width: 161px;
height: 28px;
background-image: url(grafik/gig.jpg);
}
#gigdown {
float: left;
width: 161px;
height: 12px;
background-image: url(grafik/gigdown.jpg);
}
}
#spacer {
float: left;
width: 48px;
height: 443px;
background-image: url(grafik/spacer.jpg);
}
#spalt {
float: left;
width: 129px;
height: 239px;
background-image: url(grafik/spalt.jpg);
}
#right {
float: left;
width: 19px;
height: 239px;
background-image: url(grafik/right.jpg);
}
h1 {
margin: 0px
padding: 0px;
font-size: 15px;
color: #FFFFFF;
}
.scrollbox {padding: 10px; height: 345px; width: 292px;
overflow: auto; scrollbar-arrow-color: #000000;
scrollbar-track-color: #FFFFFF;scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
background-color: #FFFFFF;}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="left">
</div>
<div id="menyleft">
</div>
<div id="meny">
</div>
<div id="menyright">
</div>
<div id="menydown">
</div>
<div id="gigtop">
</div>
<div id="main">
kfdogjghjkhjjhkgjhkjhfk<br>
kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjgjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>
</div>
<div id="spacer">
</div>
<div id="gigmiddle">
</div>
<div id="gig">
</div>
<div id="gigdown">
</div>
<div id="spalt">
</div>
<div id="right">
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Jag har tidigare byggt sidor med tabeller och är helt ny på det här med divvar, och jag fattar nästan ingenting. Jag vill att #main, #left, #spacer, #spalt och #right ska vara "fast" i webbläsarens botten och att dom ska anpassa sig efter varandra. Finns det någon vänlig männsika som skulle vilja hjälpa mig lösa det här problemet... Hoppas ni förstår vad jag menar. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="Author" /> <meta name="keywords" content="" /> <meta name="description" content="description" /> <meta name="robots" content="all" /> <title>K</title> <style type="text/css"> body, html { background-image: url(grafik/bg.png); margin: 0px; padding: 0px; font-family: "Verdana", Helvetica, Arial, Sans-serif; font-size: 11px; } #container { margin: 10px auto; margin-top: 0px; margin-bottom: 0px; float: center; padding: 0px; width: 830px; } #header { height: 111px; width: 809px; background-image: url(grafik/header.jpg); } #meny { background-image: url(grafik/meny.jpg); width: 575px; height: 17px; float: left; } #left { float:left; width: 15px; height: 450px; background-image: url(grafik/leftborder.jpg); } #main { float: left; width: 595px; height: 433px; background-image: url(grafik/main.jpg); } #menyleft { float: left; width: 98px; height: 38px; background-image: url(grafik/menyleft.jpg) ; } } #menyright { float: left; width: 132px; height: 17px; background-image: url(grafik/menyright.jpg); } #menydown { float: left; width: 545px; height: 21px; background-image: url(grafik/menydown.jpg); } #gigtop { float: left; width: 161px; height: 21px; background-image: url(grafik/gigtop.jpg); } #gigmiddle { float: left; width: 161px; height: 164px; background-image: url(grafik/gigmiddle.jpg); } } #gig { float: left; width: 161px; height: 28px; background-image: url(grafik/gig.jpg); } #gigdown { float: left; width: 161px; height: 12px; background-image: url(grafik/gigdown.jpg); } } #spacer { float: left; width: 48px; height: 443px; background-image: url(grafik/spacer.jpg); } #spalt { float: left; width: 129px; height: 239px; background-image: url(grafik/spalt.jpg); } #right { float: left; width: 19px; height: 239px; background-image: url(grafik/right.jpg); } h1 { margin: 0px padding: 0px; font-size: 15px; color: #FFFFFF; } .scrollbox {padding: 10px; height: 345px; width: 292px; overflow: auto; scrollbar-arrow-color: #000000; scrollbar-track-color: #FFFFFF;scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; background-color: #FFFFFF;} </style> </head> <body> <div id="container"> <div id="header"> </div> <div id="left"> </div> <div id="menyleft"> </div> <div id="meny"> </div> <div id="menyright"> </div> <div id="menydown"> </div> <div id="gigtop"> </div> <div id="main"> kfdogjghjkhjjhkgjhkjhfk<br> kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjgjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br>kfdogjghjkhjjhkgjhkjhfk<br> </div> <div id="spacer"> </div> <div id="gigmiddle"> </div> <div id="gig"> </div> <div id="gigdown"> </div> <div id="spalt"> </div> <div id="right"> </div> </div> <div style="clear: both;"></div> </div> </body> </html>