womstar
Lounge-Member
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:
Lösung 2:
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
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
