Håller på att försöka göra en hemsida i CSS helt utan tabeller, Men som alltid så blir det inte som jag vill!? Men den här gången tänker jag inte ge upp...
Här är min HTML kod...
Kod: Markera allt
<html>
<head>
<title>CrazyCaseMod.se - Project-Planner</title>
<meta name="Generator" content="Stone's WebWriter 4">
<script type="text/javascript">
// <!--
// -->
</script>
<!-- ---------- ------------- ------------------ ------------------- --------- PRIVATE -------- ------------------ ------------------- ------------------------ -->
<link rel="stylesheet" type="text/css" href="../Style_Main.css" />
</head>
<body>
<div id="Top_1">
<img id="IMG_logo" src="../bilder/logo.png">
<div id="Top_text">CrazyCaseMod.se</div>
<div id="Top_text2"><!-- #include file="../Version.inc" --></div>
</div>
<div id="Top_2">
<input class="button" id="button1111111" type="button" value="Logga ut" onclick="window.location = './index.asp?qSite=logout'" onmouseover="document.getElementById(this.id).style.background = '#010101 url(../bilder/button_orange.jpg) repeat-x'" onmouseout="document.getElementById(this.id).style.background = '#AAAAAA url(../bilder/button_grey.jpg) repeat-x'" />
</div>
<div id="Middle_1" style="background-color:#FFFFFF;">
<div class="ContentBox" id="Middle_1_Content_Reklam">
<div class="ContentBox_1" id="Middle_1_Content_Reklam_top">
Reklam:
</div>
<div class="ContentBox_2" id="Middle_1_Content_Reklam_Content">
Här ska det ligga reklam... Jippi, Fungerar det????????? Jag hoppas det!!!
</div>
</div>
<div id="Middle_1_ContentHolder">
<div class="ContentBox" id="Middle_1_Content_1">
<div class="ContentBox_1" id="Middle_1_Content_1_top">
Info:
</div>
<div class="ContentBox_2" id="Middle_1_Content_1_Content">
Här ska!...
</div>
</div>
<div class="ContentBox" id="Middle_1_Content_2">
<div class="ContentBox_1" id="Middle_1_Content_2_top">
Aktiva:
</div>
<div class="ContentBox_2" id="Middle_1_Content_2_Content">
Här ska det ligga en massa intresanta saker som ni vill ha!... fdfjdfjdjkfjkdjkfjkdfjdjkfdjkfjdkf
</div>
</div>
<div class="ContentBox" id="Middle_1_Content_3">
<div class="ContentBox_1" id="Middle_1_Content_3_top">
Färdiga:
</div>
<div class="ContentBox_2" id="Middle_1_Content_3_Content">
Här ska det ha!...
</div>
</div>
<div class="ContentBox" id="Middle_1_Content_4">
<div class="ContentBox_1" id="Middle_1_Content_4_top">
I dvala:
</div>
<div class="ContentBox_2" id="Middle_1_Content_4_Content">
Här ska det ligga en massa intresanta saker som ni vill ha!...fggggggggggggggg gsfdf f ggggssd
</div>
</div>
<div class="ContentBox" id="Middle_1_Content_5">
<div class="ContentBox_1" id="Middle_1_Content_5_top">
Väntar på *:
</div>
<div class="ContentBox_2" id="Middle_1_Content_5_Content">
Här ska det ligga en massa intresanta saker som ni vill ha!...fggggggggggggggg gsfdf f ggggssd
</div>
</div>
<div class="ContentBox" id="Middle_1_Content_6">
<div class="ContentBox_1" id="Middle_1_Content_6_top">
Alla:
</div>
<div class="ContentBox_2" id="Middle_1_Content_6_Content">
Här ska det ligga en massa intresanta saker som ni vill ha!...fggggggggggggggg gsfdf f ggggssd
</div>
</div>
</div>
</div>
<div id="Bottom_1">
Sidan är gjord av Daniel Andersson, <a href="http://CrazyCaseMod.se">CrazyCaseMod.se</a>
</div>Kod: Markera allt
body
{
background-repeat:repeat;
background-image:url(bilder/bg.jpg);
margin:0px 0px 0px 0px;
}
.ContentBox
{
width:250px;
margin-right:15px;
margin-bottom:20px;
}
.ContentBox_1
{
border-color:#4A4A4A;
border-bottom-width:0px;
border-top-width:1px;
border-right-width:1px;
border-left-width:1px;
border-style:solid;
background-image:url(bilder/table-top.png);
background-repeat:repeat-x;
padding-left:20px;
padding-top:5px;
font-size:15px;
font-weight:bold;
}
.ContentBox_2
{
border-color:#4A4A4A;
border-bottom-width:1px;
border-top-width:2px;
border-right-width:1px;
border-left-width:1px;
border-style:solid;
background-image:url(bilder/bg2.jpg);
background-repeat:repeat;
padding:10px;
padding-top:20px;
}
/* -------------------------------------- */
#Top_1
{
background-repeat:repeat-x;
background:url(bilder/top.png);
height:85px;
width:100%;
margin:0px 0px 0px 0px;
}
/* ---------------------- */
......
/* ----------------------- */
#Middle_1
{
padding-left:20px;
padding-top:40px;
padding-bottom:70px;
}
#Middle_1_ContentHolder
{
width:600px;
}
#Middle_1_Content_Reklam
{
width:130px;
margin-right:50px;
}
#Middle_1_Content_1
{
width:515px;
}
#Middle_1_Content_2
{
}
#Middle_1_Content_3
{
}
#Middle_1_Content_4
{
}
/* ----------------------- */
#Bottom_1
{
padding-top:10px;
text-align:center;
font-family:'Courier New';
font-size:12px;
border-style:solid;
border-color:#000000;
border-width:0px;
border-top-width:1px;
background-repeat:repeat-x;
background-image:url(bilder/meny.png);
height:34px;
}
(Och sen sitter den orange listen där nere under som den ska...)
Men problemet då är att alla läggs under varrandra... Jag vill ha "reklam" ute till vänster, och sen ska dem andra sitta två i bredd till höger om den (i tre rader med den breda ensam överst)
Så jag la till "float:right;" i ".contentBox" klassen (alla dem boxarna ingår i den klassen). Då kom boxarna på rätt plats förutom att dem andra ska sitta till höger om reklam, inte under den... Men som ni ser så trycks inte den orange listen ner som den borde göra... Saker ska väll bara kunna komma ovanpå varrandra om man kör "position:absolute;" eller "float:fixed"??
Mvh. Daniel
Tacksam för snabba svar! (Ju snabbare ni hjälper mig med detta, desto snabbare kommer ni kunna få utnyttja gratis tjänsten
)
