✔ mit DIV Layout zentrieren

Status
Nicht offen für weitere Antworten.
D

DanielBodensee

Mitglied
Hallo,

ich bin derzeit am erstellen eines Layout für eine Website. Das Layout hat mehrere Blöcke (bzw Felder +über div ?) und ist derzeit an der linken oberen Ecke als Bezugspunkt ausgerichtet.

Ich möchte nun das ganze Layout zentrieren, nur bringe ich das nicht fertig.

Über ein div-Tag, unter dem dann alle anderen Blöcke/DIV's stehen, funktioniert so nicht.

Wie kann ich es realisieren, dass mein Layout als gesamtes zentriert wird?

Gruss,
Daniel
 
<html>
<head>
</head>
<body>
<div align="center">
<div style="width:700px;height:500px"> <!-- div oder table, egal -->
<!-- Inhalt -->
</div>
</div>
</body>
</html>

---------------------------------------------

Naja, so mach ichs immer. Ciao...
 
Probier mal Folgendes:
Code: 
body {
	text-align:		center;
}
#container {
	margin:			0 auto;
	text-align:		left;
}
HTML: 
[…]

<body>
<div id="container">

	[…]

</div>
</body>
</html>
 
Hallo,

vielen Dank für die Tipps, jetzt funktioniert es tatsächlich, wow...

Nachdem ich alle position:absolute entfernt hatte, ging das ganze so wie ich es mir vorgestellt habe.

Sehe ich das dann richtig, dass ich bei einem zentrierten Layout keine position-angaben verwenden kann?

Gruss,
Daniel
 
Hallo,

ich habe jetzt nur ein Problem, die DIVs innerhalb des einen womit ich zentriere, bleiben nicht dort wo sie hin sollen.

Besser gesagt, ich habe ein DIV welches ich zentriere. In diesem DIV brauche ich noch vier weitere für Logo, Kopf, Menü und Inhalt.

Bei der absoluten positionierung ist das DIV für mein Logo ausserhalb des zum zentrieren erstellten DIV Lasse ich die die absolute Positionierung weg, stehen Loo und Kopf nicht wie gewollt nebeneinander sondern untereinander.

Wie muss ich die weiteren DIVs positionieren, damit diese im ersten DIV bleiben und relativ zu dessen Ränder positioniert werden?

Gruss,
Daniel
 
Ich kenne jetzt zwar nicht das Design, aber lass doch einfach die Positionierungsangaben weg, dann werden die Elemente alle untereinander dargestellt.
 
Hallo,

wegen dem Layout habe ich kurz ein GIF erstellt, was die benötigten DIVs zeigt. Mein Problem ist, dass zwar das DIV "Logo" richtig gesetzt ist, doch das DIV "Kopf" wird dann nicht daneben sondern darunter plaziert. Die Position gebe ich mit top und left an, dennoch klappt es nicht.

Bei der Angabe von Position:Absolut kann ich das Layout erstellen, nur leider läßt sich dann das ganze nicht auf der Seite zentrieren.

Weiss jemand eine Lösung?

Gruss,
Daniel
 

Anhänge

  • layout.gif
    layout.gif
    3,6 KB · Aufrufe: 266
Etwa so:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<style type="text/css">
		* {
			margin:			0;
			padding:		0;
			border-style:		none;
		}
		body {
			padding:		20px 1%;
			text-align:		center;
		}
		#container {
			margin:			0 auto;
			text-align:		left;
			width:			768px;
			background:		#ccc url(http://gallery.hd.org/_exhibits/pasta/two-green-fusilli-bg-CS.jpg) repeat-y -128px 0;
			line-height:		250%;
		}
		#logo {
			float:			left;
			width:			180px;
			background-color:	#00a6eb;
		}
		#kopf {	
			margin-left:		180px;
			background-color:	#ffed00;
		}
		#inhalt {
			line-height:		1000%;
		}
		#menü {
			float:			left;
			width:			180px;
		}
		#fuß {
			margin-left:		180px;
			background-color:	#ea5a00;
		}
	</style>
</head>


<body>
<div id="container">
	<div id="logo">Logo</div>
	<div id="kopf">Kopf</div>
	<div id="menü">Menü</div>
	<div id="inhalt">Inhalt</div>
	<div id="fuß">Fuß</div>
</div>
</body>
</html>
Müsste natürlich noch entsprechend angepasst werden.
 
1. Ich habe exakt das gleiche Problem, deswegen danke für deine Hilfe Gumbo. Wo drauf hast du deinen Vorschlag denn jetzt angepasst und was genau muss ich da für mich noch anpassen? Wenn ich alles so verändere wie im Vorschlag wird bei mir alles krumm und schief?

2. Wenn ich das Layout (hoffentlich) bald fertig habe, funktioniert denn in dieser Arbeitsweise mit CSS und Blöcken php include?


Danke im Vorraus

Leon
 
Zuletzt bearbeitet von einem Moderator:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück