Extrahierte Sclices aus PS mit DIVs horizontal mittig anordnen

[kerbstone]

Einleitung:
Ich habe in Photoshop eine Webseite erstellt,
die ich mittels Slices in Fragmente unterteilt habe.
Im Anschluss daran habe ich die Sclices aus
Imageready als JPEGs extrahiert und in DIVs einfügen lassen.

<div id="container">
<div id="slice_1"><img ...></div>
<div id="slcie_n"><img ...></div>
</div>

Problem:
Die komplette Webseite wird nicht horizontal zentriert dargestellt.
Ich habe es beim Container mit dem Wert auto bei margin left und right
ausprobiert, dies brachte jedoch leider nicht den gewünschten Erfolg

Hier mein original Code:

<style type="text/css">
<!--
#Container {
	position:absolute;
	left:0px;
	top:0px;
	width:954px;
	height:688px;
}

#idelement-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:3px;
	height:688px;
}

#idelement-02_ {
	position:absolute;
	left:3px;
	top:0px;
	width:948px;
	height:35px;
}

#idelement-03_ {
	position:absolute;
	left:951px;
	top:0px;
	width:3px;
	height:688px;
}

#idelement-04_ {
	position:absolute;
	left:3px;
	top:35px;
	width:20px;
	height:29px;
}

(...)
-->
</style>

<div id="Container">
	<div id="idelement-01_">
		<img id="idelement_01" src="images/20100915_01.jpg" width="3" height="688" alt="" />
	</div>
	<div id="idelement-02_">
		<img id="idelement_02" src="images/20100915_02.jpg" width="948" height="35" alt="" />
	</div>
           <div id="idelement-03_">
		<img id="idelement_03" src="images/20100915_03.jpg" width="3" height="688" alt="" />
	</div>
	<div id="idelement-04_">
		<img id="idelement_04" src="images/20100915_04.jpg" width="20" height="29" alt="" />
	</div>

(...)
</div>

Könnt ihr mir bitte sagen, wie ich die Webseite zentriert bekomme?

Vielen Dank im voraus!!!

[AmicaNoctis]

Hallo,

warum packst du das Stylesheet in einen Kommentar? Wenn die Browser nicht zufällig tolerant damit umgingen, würdest du es damit deaktivieren.

Du schreibst margin left und right, aber wie hattest du es wirklich geschrieben als du es versucht hast? Mit Bindestrich?

Gruß,

Amica

[Wyveres]

#Container {
	position:absolute;
	left:0px;
	top:0px;
	width:954px;
	height:688px;
}

Absolut positionierte Elemente Ignorieren in der Regel margin-left und right.

wenn du die Styles dem entsprechend zum Container relativ setzt und den Container Selbst ohne Position und mit margrin left und right auto austattest sollte das eigentlich gehen.

[AmicaNoctis]

Absolut positionierte Elemente Ignorieren in der Regel margin-left und right.

Seit wann?

[Wyveres]

Seit wann?

Seit immer ;D und ich hätte da noch Auto hin schreiben sollen. Wenn man ... auf absolut positionierte Elemente margin-left:auto; und marign-right:auto; versucht.

Wenn man explizit pixelwerte angibt oder prozent dann nicht.

zentiert da left:0; hier durch marin-left:auto; aufgehoben wird.

#Container {
	position:relative;
	left:0px;
	top:0px;
	width:954px;
	height:688px;
	margin-left:auto;
	margin-right:auto;
	border:1px solid black;
}

pappt am linken rand ...

#Container {
	position:absolute;
	left:0px;
	top:0px;
	width:954px;
	height:688px;
	margin-left:auto;
	margin-right:auto;
	border:1px solid black;
}

sitzt 100px von links entfernt.

#Container {
	position:absolute;
	left:0px;
	top:0px;
	width:954px;
	height:688px;
	margin-left:100px;
	margin-right:auto;
	border:1px solid black;
}

[AmicaNoctis]

Ok, das mit auto stimmt, ich dachte, du meinst, dass es generell nicht geht.

Jedenfalls:

position: absolute;
top: 0;
left: 50%;
width: /*die Breite, z. B.*/ 200px;
margin-left: /*die halbe negative Breite, z. B.*/ -100px;

funktioniert.

[kerbstone]

Danke für die schnelle Hilfe.

@Wyveres: Dein Code wirkt Wunder Es funktioniert!!! Das muss ich jetzt erstmal verstehen.

[Kropff]

Mensch Kinners, lasst diesen position-Kram. Der ist hier überflüssig wie ein Kropf(f).

Peter

[AmicaNoctis]

Mensch Kinners, lasst diesen position-Kram.

Was hast du denn gegen position? Es lässt sich jedenfalls besser damit arbeiten als mit floats und irgendwelchen zusätzlichen div-Suppen.

[Kropff]

Was hast du denn gegen position?

Ist imho viel zu unflexibel.

Es lässt sich jedenfalls besser damit arbeiten als mit floats7

Nö. Spätestens wenn du anfängst, relative und absolute zu kombinieren, bekommst du teilweise riesengroße Probleme mit dem iE 6 und 7. Außerdem sind die float-Probleme im IE 6 und 7 wohlbekannt und es gibt die entsprechenden Fixes.

und irgendwelchen zusätzlichen div-Suppen.

Wenn die Leute alles in divs klatschen, so ist das ihr Problem. Das geht imho auch sehr häufig viel eleganter. Ist allerdings auch immer vom Design anhängig.

Peter

[AmicaNoctis]

Ist imho viel zu unflexibel.

Nö. Spätestens wenn du anfängst, relative und absolute zu kombinieren, bekommst du teilweise riesengroße Probleme mit dem iE 6 und 7.

Da habe ich (zu beiden Punkten) gegenteilige Erfahrungen gemacht. Aber egal, ich hör mal auf, das hier zu sehr in den OT-Bereich zu ziehen.

[kerbstone]

@Kropff:

Jetzt bin ich aber neugierig geworden.

Was für elegantere Lösungen bestehen denn zur Umsetzung?
Imageready lässt entweder Tabellen oder DIVs zu.

Sprichst Du nun XSL an, das eine weitere Möglichkeit darstellt?
In Form von http://symphony-cms.com ?

[AmicaNoctis]

Ich denke, Kropff will auf seine geliebten floats hinaus

Mit XSL hat das erstmal nichts zu tun, XSL-FO ist im Webumfeld untypisch und eher (aber nicht ausschließlich) zum Generieren von PDFs genutzt. XSL-T nutze ich zwar auch sehr oft, aber das kommt auch nicht ohne CSS aus, weil man damit nur Dokumente transformiert (in diesem Falle zu HTML).

[Kropff]

Was für elegantere Lösungen bestehen denn zur Umsetzung? Imageready lässt entweder Tabellen oder DIVs zu.

Ohne Klickibunti arbeiten. Sondern HTML und CSS lernen.

Peter

[kerbstone]

Nun habe ich das Problem, dass ich nicht weiß, wie ich zwei
absolut getrennte DIVs relativ zueinander positionieren kann.
Anbei ein Screenshot. Folgend der CSS Code, ich habe wirklich keine Ahnung:

/* div configurations */
#Tabelle_01 {
	position:relative; /* Main Frame */
	left:0px;
	top:-8px;
	width:954px;
	margin-left:auto;
	margin-right:auto;
}

#id20100923-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:3px;
	height:688px;
}

#id20100923-02_ {
	position:absolute;
	left:3px;
	top:0px;
	width:948px;
	height:56px;
}

#id20100923-03_ {
	position:absolute;
	left:951px;
	top:0px;
	width:3px;
	height:688px;
}

#id20100923-04_ {
	position:absolute;
	left:3px;
	top:56px;
	width:511px;
	height:45px;
}

#id20100923-05_ { /* Logo */
	position:absolute;
	left:514px;
	top:56px;
	width:409px;
	height:45px;
}

#id20100923-06_ {
	position:absolute;
	left:923px;
	top:56px;
	width:28px;
	height:271px;
}

#id20100923-07_ {
	position:absolute;
	left:3px;
	top:101px;
	width:20px;
	height:226px;
}

#id20100923-08_ { /* Banner */
	position:absolute;
	left:23px;
	top:101px;
	width:601px;
	height:182px;
}

#id20100923-09_ { /* 2. Logo */
	position:absolute;
	left:624px;
	top:101px;
	width:299px;
	height:54px;
}

#id20100923-10_ {
	position:absolute;
	left:624px;
	top:155px;
	width:299px;
	height:142px;
}

#id20100923-11_ {
	position:absolute;
	left:23px;
	top:283px;
	width:601px;
	height:14px;
}

#id20100923-12_ { /* Horizontal Header Menu */
	position:absolute;
	left:23px;
	top:297px;
	width:900px;
	height:30px;
	background-image: url(images/20100923_12.jpg);
	color:#5A5A5A;
	text-align:center;
	font-size:24px;
}

#id20100923-13_ {
	position:absolute;
	left:3px;
	top:327px;
	width:948px;
	height:5px;
}

#id20100923-14_ { /* Content Container */
	position:absolute;
	left:3px;
	top:332px;
	width:948px;
	background-image:url(images/20100923_13.jpg);
	background-repeat:y;
}

#contentalignment {
	padding:0px /*top*/ 0px /*right*/ 0px /*bottom*/ 16px /*left*/;	
}

#id20100923-15_ {
	position:absolute;
	left:3px;
	top:628px;
	width:20px;
	height:60px;
}

#id20100923-16_ { /* Horizontal Footer Menu Container */
	position:absolute;
	left:23px;
	top:628px;
	width:900px;
	height:31px;
	background-image: url(images/20100923_16.jpg);
}

#id20100923-17_ {
	position:absolute;
	left:923px;
	top:628px;
	width:28px;
	height:60px;
}

#id20100923-18_ {
	position:absolute;
	left:23px;
	top:659px;
	width:900px;
	height:29px;
}

#idElement-19 { /* Content Headline */
	margin-bottom:20px;
	font-family: Arial Narrow;
	font-size: 24px;
	color:#A6A6A6;
}

#idElement-20 { /* Content Left */
	float: left;
	width: 430px;
	font-family: Arial Narrow;
	font-size: 21px;
	color:#5A5A5A;
	margin-right: 20px;
}

#idElement-21 { /* Content Right */
	font-family: Arial Narrow;
	font-size: 21px;
	color:#5A5A5A;
	margin-right: 20px;
}

#idElement-22 { /* another element */
	float:left;
	margin-top:8px;
	margin-left:12px;
	text-align:left;
}

#idElement-23 { /* Impressum Link */
	margin-top: 0px;
	margin-right:52px;
	color:#5A5A5A;
	text-align:center;
	font-size:24px;
}