Problem mit CSS

ackermaennchen · 12.08.2009

Hallo Leute, hab zwar die Suchfunktion benutzt und auch schon goggel gefragt, aber bisher noch nicht weitergekommen.

Zum Problem: hab in Photohop ein Template für eine Page erstellt, das ganze gesliced und abgespeichert. In dreamweaver importiert und Tabellen in divs,die nun alle den wert .position:absolute haben,umgewandelt. Jetz sind die ganzen divs richtig verschachtelt, allerdings links ausgerichtet. Um sie zu zentrieren hab ich sie alle mal in nen neuen div gepackt und den mit margin: auto versehen. Ergebniss: keine änderung.

Wie schaffe ich es nun das der gesamte Inhalt zentriert wird ohne die Anordnung der gesclicten Elemente zu zerstören.

hier die Codes dazu:

Code:

.div1 {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 950px;
	height: 1px;
	z-index: 1;
	background-image: url(Images/template/images/layout_01.png);
}
.div2 {
	position: absolute;
	left: 0px;
	top: 1px;
	width: 3px;
	height: 163px;
	z-index: 2;
	background-image: url(Images/template/images/layout_02.png);
}
.div3 {
	position: absolute;
	left: 3px;
	top: 1px;
	width: 947px;
	height: 163px;
	z-index: 3;
	background-image: url(Images/template/images/banner.png);
}
.div4 {
	position: absolute;
	left: 0px;
	top: 164px;
	width: 2px;
	height: 596px;
	z-index: 4;
	vertical-align: middle;
	background-image: url(Images/template/images/layout_04.png);
}
.div5 {
	position: absolute;
	left: 2px;
	top: 164px;
	width: 175px;
	height: 566px;
	z-index: 5;
	background-image: url(Images/template/images/navi.png);
}
.div6 {
	position: absolute;
	left: 177px;
	top: 164px;
	width: 773px;
	height: 566px;
	z-index: 6;
	background-image: url(Images/template/images/content.png);
}
.div7{
	position: absolute;
	left: 2px;
	top: 730px;
	width: 948px;
	height: 29px;
	z-index: 7;
	background-image: url(Images/template/images/footer.png);
}
.div8{
	position: absolute;
	left: 2px;
	top: 759px;
	width: 948px;
	height: 1px;
	z-index: 8;
	background-image: url(Images/template/images/layout_08.png);
}
.div9{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 1px;
	height: 761px;
	z-index: 9
}
.inhalt {margin: auto }

HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
	background-color: #0c3a6d;
}
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="inhalt"
<div class="div1"/>
</div>
<div class="div2"/>
</div>
<div class="div3"/>
</div>
<div class="div4"/>
</div>
<div class="div5"/>
</div>
<div class="div6"/>
</div>
<div  class="div7"/>
</div>
<div class="div8"/>
</div>
<div class="div9"/>
</div> 
/></div>
</body>
</html>

oOOo · 12.08.2009

AW: Problem mit CSS

du hast im body das inhaltsdiv nicht geschlossen:
<div class="inhalt"

winne52 · 12.08.2009

AW: Problem mit CSS

hängt vor dem body-end-Tag

oOOo · 12.08.2009

AW: Problem mit CSS

im css z.B.:

.inhalt {
margin:0 auto;
width:823px;
}

ackermaennchen · 12.08.2009

AW: Problem mit CSS

nöö klappt leider auch nich

sokie · 12.08.2009

AW: Problem mit CSS

Code:

[COLOR=#000080]<div class=[COLOR=#0000ff]"div9"[/COLOR]/>[/COLOR]
[COLOR=#000080]</div>[/COLOR] 
[COLOR=Red][B]/>[/B][/COLOR][COLOR=#000080]</div>[/COLOR]
[COLOR=#000080]</body>[/COLOR]

was ist das ?

Code:

.inhalt {
margin: auto 
width: /*breite angeben! /*;
height: /* höhe angeben! /*;
position: relative;
}

(wobei das absolute positionieren aller elemente innerhalb von inhalt fragwürdig ist.)

wie oft willst du deine Klassen einsetzen? klassen machen nur dort sinn, wo man formatierungen ähnlicher Elemente mehrfach im Dokument verwendet.

ohne den Inhalt zu kennen scheint deine Struktur nicht logisch.

jelllo · 12.08.2009

AW: Problem mit CSS

normalerweise durch

Code:

body, .inhalt { text-align:center; }

doch wg position:absoulte geht das nicht.

probier mal

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body { 
	background-color: #0c3a6d; 
	text-align:center;
	}
#inhalt {
	position: absolute;
	width:823px;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin: auto; 
	}

#div1 { position: absolute;
	left: 0px;
	top: 0px;
	width: 950px;
	height: 1px;
	z-index: 1;
	background-image: url(Images/template/images/layout_01.png);
	}

#div2 { position: absolute;
	left: 0px;
	top: 1px;
	width: 3px;
	height: 163px;
	z-index: 2;
	background-image: url(Images/template/images/layout_02.png);
	}

#div3 { position: absolute;
	left: 3px;
	top: 1px;
	width: 947px;
	height: 163px;
	z-index: 3;
	background-image: url(Images/template/images/banner.png);
	}

#div4 { position: absolute;
	left: 0px;
	top: 164px;
	width: 2px;
	height: 596px;
	z-index: 4;
	vertical-align: middle;
	background-image: url(Images/template/images/layout_04.png);
	}

#div5 { position: absolute;
	left: 2px;
	top: 164px;
	width: 175px;
	height: 566px;
	z-index: 5;
	background-image: url(Images/template/images/navi.png);
	}

#div6 { position: absolute;
	left: 177px;
	top: 164px;
	width: 773px;
	height: 566px;
	z-index: 6;
	background-image: url(Images/template/images/content.png);
	}

#div7{ position: absolute;
	left: 2px;
	top: 730px;
	width: 948px;
	height: 29px;
	z-index: 7;
	background-image: url(Images/template/images/footer.png);
	}

#div8{ position: absolute;
	left: 2px;
	top: 759px;
	width: 948px;
	height: 1px;
	z-index: 8;
	background-image: url(Images/template/images/layout_08.png);
	}

#div9{ position: absolute;
	left: 0px;
	top: 0px;
	width: 1px;
	height: 761px;
	z-index: 9 }




</style>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="inhalt"/>
<div id="div1"/>1
</div>
<div id="div2"/>2
</div>
<div id="div3"/>3
</div>
<div id="div4"/>4
</div>
<div id="div5"/>5
</div>
<div id="div6"/>6
</div>
<div id="div7"/>7
</div>
<div id="div8"/>8
</div>
<div id="div9"/>9
</div></div>
</body>
</html>

Wobei ich aus den Klassen, IDs gemacht habe, da diese einmalig im Dokument auftauchen.

Hilfreich wäre es, einen Shot zu posten, aus dem der Soll-Zustand ersichtlich ist - und die background-images INKL. der im Code angegebenen Ordner-Struktur zum Download anzubieten.

habe jetzt 1-9 ergänzt, damit man überhaupt was sieht.

ackermaennchen · 12.08.2009

AW: Problem mit CSS

mhhh also eig is das nur das Layout, kommt also auf jeder seite vor. die absolute positionierung entstand nach der Formatierung der von photoshop ertsellten tabelln in div elemente

Eidth: Danke @jellow hat funktioniert. Warum er Klassen draus gemacht hat weiß ich nich.

jelllo · 12.08.2009

AW: Problem mit CSS

ackermaennchen schrieb:
Danke @jello hat funktioniert. Warum er Klassen draus gemacht hat weiß ich nich.

gerne.

Poste doch später mal, wo die Site zu sehen ist.

ackermaennchen · 12.08.2009

AW: Problem mit CSS

ohh das kann noch ne Weile dauern

wird die neue Hp unserer Schule, und ob sie überhaupt online geht so wie ich sie mir vorstelle steht ja auch noch nich ganz fest. Im mom is sie noch so: (allerdings nicht von mir erstellt)

die neue is dann vom design etwas an das standard layout von joomla angelehnt

timmy151 · 12.08.2009

AW: Problem mit CSS

hmm die Page sieht aber eh gut aus.

Respekt

ackermaennchen · 12.08.2009

AW: Problem mit CSS

ja sie wollen etwas neues, außerdem is die seite noch mit frames und Tabellen aufgebaut. (und hey n paar Kröten nebenbeei kann man immer gebrauchen

)

salvaro · 13.08.2009

AW: Problem mit CSS

Wirklich sauber ist aber was anderes.

Allein schon das dein .inhalt mit einer kleineren Weite definiert ist, als die sich darin befindenden .div

(wobei das absolute positionieren aller elemente innerhalb von inhalt fragwürdig ist.)

<- davon mal ganz abgesehen.

Der Internet Explorer 6 berücksichtigt nur einen Eckpunkt!
Der Internet Explorer 7 berechnet bei Angaben zu top und bottom die Höhe nicht!