Problem beim Zentrieren [css/html]

Path

Hallo Leute,

ich habe ein kleines Problem mit meinem Design. Da es kein typisches Layout ist, habe ich Probleme es zu zentrieren.
Wie kann ich das Problem lösen?

HTML

<html><head>
<title>Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="background-color:#FFFFFF;">
<!-- Save for Web Slices (homepage_mark_sliced.psd) -->
<div style="position:absolute; algin:center; left:0px; top:0px; width:960px; height:685px;">
    <div style="position:absolute; left:0px; top:0px; width:85px; height:600px;">
        <img src="images/homepage_mark_sliced_01.jpg" width="85" height="600" alt="" />
    </div>
    <div style="position:absolute; left:85px; top:0px; width:875px; height:74px;">
        <img src="images/homepage_mark_sliced_02.jpg" width="875" height="74" alt="" />
    </div>
    <div style="position:absolute; left:85px; top:74px; width:788px; height:446px;">
        <img src="images/homepage_mark_sliced_03.jpg" width="788" height="446" alt="" />
    </div>
    <div style="position:absolute; left:873px; top:74px; width:87px; height:446px;">
        <img src="images/homepage_mark_sliced_04.jpg" width="87" height="446" alt="" />
    </div>
    <div style="position:absolute; left:85px; top:520px; width:1px; height:80px;">
        <img src="images/homepage_mark_sliced_05.jpg" width="1" height="80" alt="" />
    </div>
    <div style="position:absolute; left:86px; top:520px; width:788px; height:80px;">
        <img src="images/homepage_mark_sliced_06.jpg" width="788" height="80" alt="" />
    </div>
    <div style="position:absolute; left:874px; top:520px; width:86px; height:80px;">
        <img src="images/homepage_mark_sliced_07.jpg" width="86" height="80" alt="" />
    </div>
    <div style="position:absolute; left:0px; top:600px; width:43px; height:85px;">
        <img src="images/homepage_mark_sliced_08.jpg" width="43" height="85" alt="" />
    </div>
    <div style="position:absolute; left:43px; top:600px; width:125px; height:85px;">
        <img src="images/homepage_mark_sliced_09.jpg" width="125" height="85" alt="" />
    </div>
    <div style="position:absolute; left:168px; top:600px; width:123px; height:85px;">
        <img src="images/homepage_mark_sliced_10.jpg" width="123" height="85" alt="" />
    </div>
    <div style="position:absolute; left:291px; top:600px; width:127px; height:85px;">
        <img src="images/homepage_mark_sliced_11.jpg" width="127" height="85" alt="" />
    </div>
    <div style="position:absolute; left:418px; top:600px; width:126px; height:85px;">
        <img src="images/homepage_mark_sliced_12.jpg" width="126" height="85" alt="" />
    </div>
    <div style="position:absolute; left:544px; top:600px; width:124px; height:85px;">
        <img src="images/homepage_mark_sliced_13.jpg" width="124" height="85" alt="" />
    </div>
    <div style="position:absolute; left:668px; top:600px; width:124px; height:85px;">
        <img src="images/homepage_mark_sliced_14.jpg" width="124" height="85" alt="" />
    </div>
    <div style="position:absolute; left:792px; top:600px; width:128px; height:85px;">
        <img src="images/homepage_mark_sliced_15.jpg" width="128" height="85" alt="" />
    </div>
    <div style="position:absolute; left:920px; top:600px; width:40px; height:85px;">
        <img src="images/homepage_mark_sliced_16.jpg" width="40" height="85" alt="" />
    </div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>

Alles anzeigen

Gruß Path

explanator

Solange du absolute Positionsangaben verwendest, wird du es nie zentriert bekommen.
Lass alle absoluten Positionsangaben weg und schau dir mal an wie sich das mit dem Fluss von Elementen verhält.
Zudem solltest du auf Inlinestyles besser verzichten und eine CSS-Datei verwenden.

http://www.mediaevent.de/css/position.html
http://little-boxes.de/lb1/12.2-der-n…-der-boxen.html

Zur Zentrierung:
http://www.ich-lerne-css.de/Style/Examples/007/center.html

Path

Hallo explanator,

ich habe es jetzt mit allen erdenklichen Position Attributen versucht. Das ganze Design zerhaut es mir.

HTML

<html><head>
<title>homepage_mark2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body style="background-color:#FFFFFF;">




<!-- ImageReady Slices (homepage_mark2.psd) -->
<div align="" style=" eft:0px; top:0px; width:960px; height:685px;">
	<div style=" left:0px; top:0px; width:85px; height:600px;">
		<img src="images/homepage_mark2_01.jpg" width="85" height="600" alt="" />
	</div>
	<div style="left:85px; top:0px; width:875px; height:74px;">
		<img src="images/homepage_mark2_02.jpg" width="875" height="74" alt="" />
	</div>
	<div style="left:85px; top:74px; width:788px; height:446px;">
		<img src="images/homepage_mark2_03.jpg" width="788" height="446" alt="" />
	</div>
	<div style="left:873px; top:74px; width:87px; height:446px;">
		<img src="images/homepage_mark2_04.jpg" width="87" height="446" alt="" />
	</div>
	<div style="left:85px; top:520px; width:1px; height:80px;">
		<img src="images/homepage_mark2_05.jpg" width="1" height="80" alt="" />
	</div>
	<div style="position:relativ; left:86px; top:520px; width:788px; height:80px;">
		<img src="images/homepage_mark2_06.jpg" width="788" height="80" alt="" />
	</div>
	<div style="left:874px; top:520px; width:86px; height:80px;">
		<img src="images/homepage_mark2_07.jpg" width="86" height="80" alt="" />
	</div>
	<div style="left:0px; top:600px; width:43px; height:85px;">
		<img src="images/homepage_mark2_08.jpg" width="43" height="85" alt="" />
	</div>
	<div style="left:43px; top:600px; width:125px; height:85px;">
		<img src="images/homepage_mark2_09.jpg" width="125" height="85" alt="" />
	</div>
	<div style="left:168px; top:600px; width:123px; height:85px;">
		<img src="images/homepage_mark2_10.jpg" width="123" height="85" alt="" />
	</div>
	<div style="left:291px; top:600px; width:127px; height:85px;">
		<img src="images/homepage_mark2_11.jpg" width="127" height="85" alt="" />
	</div>
	<div style="left:418px; top:600px; width:126px; height:85px;">
		<img src="images/homepage_mark2_12.jpg" width="126" height="85" alt="" />
	</div>
	<div style="left:544px; top:600px; width:124px; height:85px;">
		<img src="images/homepage_mark2_13.jpg" width="124" height="85" alt="" />
	</div>
	<div style="left:668px; top:600px; width:124px; height:85px;">
		<img src="images/homepage_mark2_14.jpg" width="124" height="85" alt="" />
	</div>
	<div style="left:792px; top:600px; width:128px; height:85px;">
		<img src="images/homepage_mark2_15.jpg" width="128" height="85" alt="" />
	</div>
	<div style="left:920px; top:600px; width:40px; height:85px;">
		<img src="images/homepage_mark2_16.jpg" width="40" height="85" alt="" />
	</div>
</div>




<!-- End ImageReady Slices -->
</body>
</html>

Alles anzeigen

so sieht es aus. Was mache ich falsch? Ich weiß, dass ich es auch mit Tabellen machen kann, aber ich möchte es mit DIVs machen.

Gruß Path

Bandit

Die ganzen Positionieren sind unnötig.
Vielleicht hilft dir dies: http://www.css4you.de/wslayout1/ex0003.html

SinnlosS

Du kannst dem äußersten Div position:relative; geben, dann kannst du alle Elemente innerhalb von diesem Div absolut positionieren und das äußerste Div mit margin:0 auto; zentrieren.

Also dein äußeres div:

HTML

<div style="position:relative;margin:0 auto;width:960px;height:685px;">
<!-- die restlichen Elemente absolut positioniert -->
</div>

Edit: Wie clever es ist beim gesamten Layout auf einer Breite von 960px die Elemente absolut zu positionieren, gerade auch im Hinblick auf Responsiveness, steht natürlich auf einem anderen Blatt.

Tags