✔ [Positionierung] Seite wird nicht mittig dargestellt

Status
Nicht offen für weitere Antworten.
F

fischkrampf

Mitglied
Hallo,

ich schreibe gerade an einer Website mit CSS Positionierung. Ich möchte das die ganze Website mittig dargestellt wird. Weiter "innen" in meinem Layout verwende ich "float:left".
Ich glaube dadruch das immer eine Komponente links in der nächst höheren steht bekomme ich die komplette Site nicht mehr in die Mitte gerückt. Ich habe mal einen einfachen Testcase erstellt:

Code: 
<html>
<head>
	<title>test</title>
</head>

<body style="text-align: center;">
<div style="text-align: center;">
	<div style="text-align: center; ">
		<div>
			<div style="float: left; width: 100px; height: 60px; border:1px solid #000000;"></div>
			<div style="float: left; width: 10px; height: 60px; background-color: #EE5555;"></div>
		</div>
		<div style="clear: left; float: left; width: 100px; height: 10px; background-color: #55EE55;"></div>
	</div>
</div>
</body>
</html>

Aussehen soll das ganze wie folgt:

Es liegen 2 Layer direkt nebeneinander. Ein weiterer schliesst direkt unten an die beiden an.

Vielleicht anschaulicher (L = O = P = Layer):

LLLLLLLLOO
LLLLLLLLOO
PPPPPPPOO
PPPPPPPOO

Habt Ihr eine Ahnung was ich ändern muss damit die Site in der Mite angezeigt wird?

Danke schon im Vorraus für jede Hilfe!

Gruß
Jochen
 
Mich würde jetzt nur noch interessieren, ob du die DIVs in der Seite auch so klein-dimensioniert einbaust?

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>test</title>

<style type="text/css">
<!--
body
{
text-align: center;
}

div.main
{
width: 114px;
margin: 0 auto;
}

div.boxL
{
float: left;
width: 100px;
height: 60px;
border: 1px solid #000000;
}

div.boxR
{
float: left;
width: 10px;
height: 60px;
background-color: #EE5555;
border:1px solid #EE5555;
}

div.footer
{
clear:left;
width: 114px;
height: 10px;
background-color: #55EE55;
font-size: 0;
}
-->
</style>

</head>
<body>

<div class="main">
  <div>
     <div class="boxL"></div>
     <div class="boxR"></div>
  </div>
  <div class="footer"></div>
</div>

</body>
</html>
[ Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23 ]


greez, maik.l
 
Wow! Vielen Dank für die schnelle Antwort!

Auf deine Frage: Ich hab zwar wenig Content, aber in die Boxen krieg ich ihn net ganz unter..

Ich probiers gleich mal aus und schreib dann das Ergebniss..

[Edit]

Ja, hat geklappt. Danke für die Hilfe.
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück