Opsætning af bokse med CSS?
Hej.Jeg har et problem med nedenstående kode, specielt med boksene i koden, med navnet "content".
Den burde danne 6 bokse der står to og to ved siden af hinanden HELT tæt, altså uden mellemrum både til siden men også for oven og for neden.
sådan ser det også ud i min egen internet explorer, men i andre versioner af samme browser og firefoks ser det galt ud, jeg håber der er nogen der kan hjælpe mig med at rette det til, da jeg har hevet mig i håret over det et stykke tid nu?
På forhånd tak!
Kode:
<!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" lang="da">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
body {
width:750px;
margin:0 auto;
margin-top:30px;
background-color: ;
background-image: url("");
}
/* ----- HEADER ----- */
#header {
width:750px;
height:110px;
background-color:;
background-image: url("");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0px 30px;
}
/* FAUX LAYOUT WRAPPER */
/*
This div is optional: When you delete it the navigation bar and the content block won't have the same size when one of them has a larger height then the other. I recommend you to leave this faux layout wrapper here.
IMPORTANT: In order to make this work you have to download http://csseasy.com/layouts/fixed/background_3.gif (copy past in your address bar) and place it in the same folder as this html file. DON'T HOTLINK to this file.
*/
#wrapper{
width:750px;
background:url(background_3.gif) repeat-y; /* WARNING: IF YOU CHANGE THE COLORS OF THE LAYOUT YOU HAVE TO CHANGE THIS IMAGE! */
overflow:auto; /* USE FIREFOX GUYS! WE ONLY NEED THIS LINE BECAUSE INTERNET EXPLODER ISN'T READING CODE PROPERLY */
margin-top:10px;
}
/* ----- NAVIGATION ----- */
#navigation {
width:200px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background-image: /*url("menu2.PNG");*/
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 12px 30px;
background-color:#333333;
float:left;
}
/* ----- MAIN CONTENT ----- */
#content{
margin-left:10px;
width:540px;
min-height:540px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background-color:#333333;
float:left;
}
/* ----- FOOTER ----- */
#footer {
margin-top:10px;
width:750px;
height:100px;
background-color:#333333;
}
</style>
</head>
<body>
<div id="header">
<MAP NAME="infomenu">
<AREA SHAPE="RECT" COORDS="419,33,496,62" HREF="http://" TITLE="">
<AREA SHAPE="RECT" COORDS="511,33,618,62" HREF="http://" TITLE="">
<AREA SHAPE="RECT" COORDS="635,32,727,63" HREF="http://" TITLE="">
<AREA SHAPE="RECT" COORDS="9,5,385,74" HREF="http://" TITLE="">
</MAP>
<IMG SRC="Logo.bmp" USEMAP="#infomenu" BORDER="0">
</div>
<div id="wrapper">
</div>
<div id="navigation">
<MAP NAME="menu_test">
<AREA SHAPE="RECT" COORDS="83,86,172,102" HREF="http://" TITLE="GIMP Tutorials">
</MAP>
<IMG SRC="menu2.png" USEMAP="#menu_test" BORDER="0">
</div>
<div id="content">
<p style="height:143px;width:242px;padding:10px;border:4px solid red;float:left " >Nyhed 1</p>
<p style="height:143px;width:242px;padding:10px;border:4px solid darkblue;float:left " >Nyhed 2</p>
<p style="height:143px;width:242px;padding:10px;border:4px solid darkblue;float:left " >Nyhed 3</p>
<p style="height:143px;width:242px;padding:10px;border:4px solid red;float:left " >Nyhed 4</p>
<p style="height:143px;width:242px;padding:10px;border:4px solid red;float:left " >Nyhed 5</p>
<p style="height:143px;width:242px;padding:10px;border:4px solid darkblue;float:left " >Nyhed 6</p>
</div>
<div id="footer">
<p style="height:10px;width:490px;margin-top: 40px;padding-left:310px;"><b>© 2009 <b>
</div>
</body>
</html>
