Hjælp til "Bokse" i CSS
Jeg er igang med at opsætte min side.. Selvfølgelig skal designet være i CSS, men nu har jeg i et par dage sat fast ét sted.Jeg kan ikke få tre "bokse-rækker" indsat ordentligt s:
Jeg har prøvet lidt af hvert, og det er meningen at .boks1 skal være i højre side, mens .boks skal være i midten, og .boks2
Det hele skal foregå inde i .body_middle
Der skal som sagt være tre rækker.
I venstre række vil jeg have to bokse, i midten én, og i højre side tre.
.body_middle er bare et 834px billede, horisontalt (x/vandret).
Jeg har repeatet det vertikalt (y/horisontalt), og vil have selve billederne til at have 10px mellemrum fra hinanden, siderne og toppen.
Egentlig ikke så svært, vil jeg tro, men fatter nærmest nada af margin s:
Så håber nogle af jer vil hjælpe, efter jeg har ventet i to dage på rowl, uden ordentlige svar ^^'
index.php
<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body background="bg.png" fixed;>
<center>
<p>
<div class="banner"></div>
<div class="menu"></div>
<div class="body_middle">
<div id="boks"><br>
<div class="boks1_top">
<br>
<b>Log Ind</b>
</div>
<div class="boks1_middle"></div>
<div class="boks1_bottom"></div>
</div>
<div class="boks_top">
<br>
<b>Community</b>
</div>
<div class="boks_middle"></div>
<div class="boks_bottom">
</div>
<div class="boks2_top">
<br>
<b>Nyheder</b>
</div>
<div class="boks2_middle"></div>
<div class="boks2_bottom"></div>
</div></div></div>
<div class="body_bottom"><?php require_once "footer.php"; ?>
</div>
</center></body>
</html>
default.css
body {
font-family: Tahoma, Verdana; font-size: 11px; color: #000000;
margin:0px;
padding:0px 10px 0px 10px;
text-align: center; /*For IE6 Shenanigans*/
}
* {
margin: 0;
padding: 0;
}
#wrapper{
width: 836px;
margin: 0 auto;
text-align: left;
}
.menu {
background-image: url("images/menu.png");
width: 834px;
top: 154px;
height: 28px;
vertical-align: middle;
overflow: hidden;
}
.banner {
background-image: url("images/banner.png");
width: 836px;
height: 141px;
margin-top: 1%;
margin-right: 0%;
}
.body_middle {
background-image: url("images/body_middle.png");
width: 834px;
height-repeat: repeat-y;
margin-right: 0%;
overflow: hidden;
}
.body_bottom {
background-image: url("images/body_bottom.png");
width: 834px;
height: 40px;
overflow: hidden;
}
#boks_left {
width: 221px;
height: 100px;
margin-left: 10px;
margin-top: 10px;
float: left;
position: absolute;
}
#boks_middle {
width: 380px;
height: 100px;
margin-top: 10px;
position: absolute;
}
#boks_right {
width: 210px;
height: 100px;
margin-right: 10px;
margin-top: 10px;
float: right;
position: absolute;
}
#boks {
width: 824px;
height: 150px;
}
.boks_top {
background-image: url("images/boks_top.png");
width: 374px;
height: 36px;
margin-top: 10px;
}
.boks_middle {
background-image: url("images/boks_middle.png");
width: 372px;
background-repeat: repeat-y;
}
.boks_bottom {
background-image: url("images/boks_bottom.png");
width: 374px;
height: 17px;
}
.boks1_top {
background-image: url("images/boks1_top.png");
width: 215px;
height: 39px;
float: left;
margin-left: 10px;
margin-top: 10px;
}
.boks1_middle {
background-image: url("images/boks1_middle.png");
width: 213px;
background-repeat: repeat-y;
float: left;
margin-left: 10px;
margin-top: 49px;
}
.boks1_bottom {
background-image: url("images/boks1_bottom.png");
width: 215px;
height: 18px;
float: left;
}
.boks2_top {
background-image: url("images/boks2_top.png");
width: 204px;
height: 34px;
float: right;
margin-right: 10px;
margin-top: 10px;
}
.boks2_middle {
background-image: url("images/boks2_middle.png");
width: 202px;
background-repeat: repeat-y;
float: right;
}
.boks2_bottom {
background-image: url("images/boks2_bottom.png");
width: 204px;
height: 13px;
float: right;
}
.body_middle kan svare til denne kode:
.body_middle {
height-repeat: repeat-y;
width: 832px;
border: 2px solid black;
background: white;
overflow: hidden;
