Svenska ElektronikForumet

Tjena.

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>

Och här är lite av min CSS kod...

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 då blir det såhär:
Bild

(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"??
Bild

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

)

Three column layout in CSS.

Jag tror att du ska ha float:left på dem, de som ska ligga längst till vänster ska dessutom ha clear:left. Sätt explicit position:relative också om du inte gjort det.

Så ser i alla fall den grej jag fått av en annan kille ut, jag vill ha ett snyggt sätt att packa in mina grupper av bookmarks på så liten yta som möjligt.

Tack!

Problemet löste sig när jag satte "float:left;" på alla boxarna och satte "clear:both;" på under listen.

Sen ville jag att boxarna till höger skulle sitta i samma höjd som boxarna till vänster (inte reklam boxen, utan dem i mitten) alltså som i en tabell. Det löste jag genom att lägga en <div> runt "Aktiva" och "Färiga" samt en runt "I dvala" och "Väntar på *" och sätta "Clear:both;" på dem med.

Så här blev det då, exakt som jag ville ha det!

Mvh. Danne

Svenska ElektronikForumet

Webdesign - CSS - Hjälp! [BILDER]

Webdesign - CSS - Hjälp! [BILDER]

Re: Webdesign - CSS - Hjälp! [BILDER]

Re: Webdesign - CSS - Hjälp! [BILDER]

Re: Webdesign - CSS - Hjälp! [BILDER]