Ergebnis 1 bis 13 von 13
-
19-08-2004, 22:29 #1
Mit CSS den Inhalt der Seite mittig Platzieren
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
-
20-08-2004, 00:45 #2
-
20-08-2004, 10:53 #3
AW: Mit CSS den Inhalt der Seite mittig Platzieren
Geändert von dkdenz (21-02-2005 um 23:27 Uhr)
-
20-08-2004, 11:04 #4
AW: Mit CSS den Inhalt der Seite mittig Platzieren
naja, im prinzip das selbe. nur bei meinen beispielen wird es klarer ersichtlich wies funzt
-
21-08-2004, 01:20 #5jsgreenhorn Guest
-
21-08-2004, 02:47 #6
AW: Mit CSS den Inhalt der Seite mittig Platzieren
Zitat von jsgreenhorn
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.Geändert von womstar (21-08-2004 um 02:51 Uhr)
-
02-02-2005, 15:55 #7
Mitglied
- registriert
- 01-06-2004
- Beiträge
- 28
AW: Mit CSS den Inhalt der Seite mittig Platzieren
Ich würd die XML Deklaration am Anfang weglassen, sonst schaltet der IE in den Quirksmodus.
-
21-02-2005, 23:13 #8
AW: Mit CSS den Inhalt der Seite mittig Platzieren
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>
Netscape 7.0
Mozilla 1.8Alpha1
IE 6
Opera 7.23
K-Meleon 0.9
FireFox 1.0
-
22-02-2005, 03:35 #9
AW: Mit CSS den Inhalt der Seite mittig Platzieren
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
-
13-11-2005, 15:00 #10
Grünschnabel
- registriert
- 13-11-2005
- Beiträge
- 3
AW: Mit CSS den Inhalt der Seite mittig Platzieren
hallo,
benutze bei mir lösung nummer 2, wollte jetzt gerne wissen, wie ich die breite verändere.
greetz & thx
Bastiii
-
13-11-2005, 15:13 #11
AW: Mit CSS den Inhalt der Seite mittig Platzieren
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.
-
13-11-2005, 16:00 #12
Grünschnabel
- registriert
- 13-11-2005
- Beiträge
- 3
AW: Mit CSS den Inhalt der Seite mittig Platzieren
bitte löschen
Geändert von Bastiii (13-11-2005 um 19:09 Uhr)
-
13-11-2005, 19:08 #13
Grünschnabel
- registriert
- 13-11-2005
- Beiträge
- 3
AW: Mit CSS den Inhalt der Seite mittig Platzieren
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;
}
<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>
bin für jede hilfe dankbar
greetz
Bastiii
Ähnliche Themen
-
CSS Content mittig mittig
Von crofthunter im Forum AllgemeinesAntworten: 6Letzter Beitrag: 29-06-2004, 09:17 -
Inhalt einer Form -> an zweite Seite
Von renejahn im Forum JavaScriptAntworten: 9Letzter Beitrag: 27-11-2003, 15:05 -
Fenster aus Seite A öffnen und aus Seite B schliessen
Von mc7121 im Forum JavaScriptAntworten: 2Letzter Beitrag: 29-08-2002, 14:38 -
HTML Seite mit Javascript vorladen
Von sweb im Forum JavaScriptAntworten: 1Letzter Beitrag: 16-08-2001, 08:55 -
Seite automatisch in Frame laden (Problem)
Von Oli im Forum JavaScriptAntworten: 1Letzter Beitrag: 06-12-2000, 05:59
Lesezeichen