Mit CSS den Inhalt der Seite mittig Platzieren

**womstar** · 19-08-2004, 23:29

Hy Leute,

da oft die indirekte Frage gestellt wurde, wie man seinen Content mit CSS mittig bekommt, hier zwei sicher Lösungen.

Lösung 1:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>

<title>Content Center - Mit CSS den Inhalt der Seite mittig Platzieren</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">

#contentcenter	{

	margin: auto;

	width: 700px;	 
}

#maincontent	{

	width: 698px;

	border: 1px solid #CCC;

	background-color: #E8E8E8;
}

</style>
</head>

<body>
<div id="contentcenter">

	<div id="maincontent">

	... Weitere Code ...

	</div>

</div>
</body>
</html>

Lösung 2:

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>

<title>Content Center - Mit CSS den Inhalt der Seite mittig Platzieren</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">

#contentcenter	{

	width: 700px;

	position: absolute;
	left: 50%;

	margin-left: -350px;
}

#maincontent	{

	width: 698px;

	border: 1px solid #CCC;

	background-color: #E8E8E8;
}

</style>
</head>

<body>
<div id="contentcenter">

	<div id="maincontent">

	... Weitere Code ...

	</div>

</div>
</body>
</html>

Kompatibilität - Lösung 1
Fehlerfrei funktioniert diese Version in folgenden Browsern:
Opera 6 - 7
Mozilla
Firefox
Netscape 6 - 7
IE4 - 6

Leider funktioniert diese Version nicht im IE, wenn eine XML-Deklaration gesetzt wurde.
Ebenfalls setzt Opera 5 eine horizontale Scrollbar.

Kompatibilität - Lösung 2

Hier wird der Content mit einer absoluten Positionierung mit Prozentangaben gesetzt, der Wert von margin-left richtet sich nach der width - Angabe. Der Wert von width wird halbiert und ergibt den Wert für margin-left.

Fehlerfrei funktioniert diese Version in folgenden Browsern:
Opera 4 - 7
Mozilla
Firefox
Netscape 6 - 7
IE4 - 6

Fazit
Aus Kompatibilitätsgründen und aus Gründen der Validität würde ich die Lösung 2 empfehlen. Wenn die Browser sich dann mal weiter entwickelt haben, kann Lösung 2 als elegantere Methode gewählt werden.

Grüße Robert

**DaBurens** · 20-08-2004, 01:45

danke für die tips!

**dkdenz** · 20-08-2004, 11:53

http://www.intensivstation.ch/css/template.php

**womstar** · 20-08-2004, 12:04

naja, im prinzip das selbe. nur bei meinen beispielen wird es klarer ersichtlich wies funzt

jsgreenhorn · 21-08-2004, 02:20

geht auch so: dr.web und bluerobot .

**womstar** · 21-08-2004, 03:47

Zitat von jsgreenhorn

geht auch so: dr.web und bluerobot .

die erste methode von drweb, würde aber nur im IE funktionieren, die zweite entspricht der lösung 1.
das von bluerobot entspricht der lösung 2.

es wird sicher noch zig varianten geben, nur die oben beschriebenen 2 löungen sind die beiden hauptlösungen.

**Mr.Blonde** · 02-02-2005, 16:55

Ich würd die XML Deklaration am Anfang weglassen, sonst schaltet der IE in den Quirksmodus.

**dkdenz** · 22-02-2005, 00:13

Entgegen der bestehenden Vermutung,
nur der IE könnte mit text-align:center Content zentriert darstellen,
hier nun der Gegenbeweis:

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>
<title>text-align:center</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* <![CDATA[ */
body {
  background:#fff;
  padding:20px;
  margin:0px;
  text-align:center;
}
#inhalt {
  text-align:left;
  margin:0px auto;
  padding:0px;
  width:700px;
  height:400px;
  background:#ff0000;
  border:1px dashed #000;
}
 /* ]]> */
</style>
</head>
<body>
    <div id="inhalt">
    </div>
</body>
</html>

Getestet mit:
Netscape 7.0
Mozilla 1.8Alpha1
IE 6
Opera 7.23
K-Meleon 0.9
FireFox 1.0

**womstar** · 22-02-2005, 04:35

Das liegt wohl ehr am dem hier "margin:0px auto;" als am "text-align:center".
Kannst ja mal das hier "text-align:center" rausnehmen, sollte dann immer noch funktionieren. Nebenbei schließt sich dies dann der Lösung 1 an.

Na gut, außer der IE5-5.5 will noch das "text-align" haben ..

Grüße Robert

**Bastiii** · 13-11-2005, 16:00

hallo,

benutze bei mir lösung nummer 2, wollte jetzt gerne wissen, wie ich die breite verändere.

greetz & thx
Bastiii

**dkdenz** · 13-11-2005, 16:13

Wenn Du das:
http://forum.jswelt.de/showpost.php?...38&postcount=8
als Lösung Zwei bezeichnest,
dann musst Du einfach bei width:700px; Deinen benötigten Wert eintragen.

**Bastiii** · 13-11-2005, 17:00

bitte löschen

**Bastiii** · 13-11-2005, 20:08

nungut, habe mich jetzt selber ein bissel dran versucht, allerdings bekomme ich schwierigkeiten, wenn ich eine andere bildschirmauflösung einstelle, dabei verschieben sich immer die 2 menü "spalten":

auflösung 1024x768:
"klick"

auflösung 1152x864:
"klick"

habs auch mal hochgeladen, so könnt ihr euch selbst ein bild drüber machen:
HP

style.css:

body {
background:#0099FF;
padding:20px;
margin:0px;
text-align:center;
}
#header {
text-align:center;
margin:2px auto;
padding:1px;
width:907px;
height:100px;
background:#0000B3;
border:solid 1px black;
color:white;
}

#links {
text-align:center;
padding:2px;
margin:2px auto;
position:absolute;
top:126px;
left:56px;
width:155px;
height:350px;
border:solid 1px black;

}

#rechts {
text-align:center;
padding:2px;
margin:2px auto;
position:absolute;
top:126px;
right:56px;
width:155px;
height:350px;
border:solid 1px black;

}

#inhalt {
text-align:center;
margin:2px auto;
padding:2px;
width:580px;
height:350px;
background:#0000B3;
border:solid 1px black;
color:white;
}

#footer {
text-align:center;
margin:2px auto;
padding:1px;
width:907px;
height:20px;
background:#0000B3;
border:solid 1px black;
color:white;
}

index.php:

<html>
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<div id="header">
Header
</div>
<div id="links">
Menue
</div>
<div id="inhalt">
Inhalt
</div>
<div id="rechts">
Menue
</div>
<div id="footer">
Footer
</div>

</body>
</html>

gibts da irgend nen trick dabei, kann man die zwei menü "spalten" irgendwie fest machen?

bin für jede hilfe dankbar

greetz
Bastiii

Thema: Mit CSS den Inhalt der Seite mittig Platzieren

LinkBack

Themen-Optionen

Anzeige

Mit CSS den Inhalt der Seite mittig Platzieren

AW: Mit CSS den Inhalt der Seite mittig Platzieren

AW: Mit CSS den Inhalt der Seite mittig Platzieren

AW: Mit CSS den Inhalt der Seite mittig Platzieren

AW: Mit CSS den Inhalt der Seite mittig Platzieren

AW: Mit CSS den Inhalt der Seite mittig Platzieren

AW: Mit CSS den Inhalt der Seite mittig Platzieren

AW: Mit CSS den Inhalt der Seite mittig Platzieren

AW: Mit CSS den Inhalt der Seite mittig Platzieren

AW: Mit CSS den Inhalt der Seite mittig Platzieren

AW: Mit CSS den Inhalt der Seite mittig Platzieren

AW: Mit CSS den Inhalt der Seite mittig Platzieren

AW: Mit CSS den Inhalt der Seite mittig Platzieren

Ähnliche Themen

CSS Content mittig mittig

Inhalt einer Form -> an zweite Seite

Fenster aus Seite A öffnen und aus Seite B schliessen

HTML Seite mit Javascript vorladen

Seite automatisch in Frame laden (Problem)

Lesezeichen

Lesezeichen

Berechtigungen

ist ein Exit aus .forEach()...

Fragezeichen aus String entfernen

Text/Wort markieren und farbig...

Javascript weiterleitung...

Google Charts aus CSV oder...

ist ein Exit aus .forEach()...

ist ein Exit aus .forEach()...

ist ein Exit aus .forEach()...

CSS aus diesem Script holen ?

Fragezeichen aus String entfernen