Zentrieren der gesamten Website....

[Toni]

Hallo,
ich würde gerne meine Website zentrieren, habe auch schon einen Css-Code geschrieben, doch das Ganzen funktioniert nur mit FireFox aber nicht mit Internet-Explorer. Wie schaffe ich es denn, dass das auch mit Internetexplorer funktioniert?

Wäre toll, wenn mir jemand weiterhelfen könnte...

Hier noch der Code, mit dem ich die Seite zentriert habe:

  
margin: 0 auto 0 auto;

Mit freundlichen Grüßen
Toni

[suit]

Wie schaffe ich es denn, dass das auch mit Internetexplorer funktioniert?

mit dem internet explorer 6 aufwärts schaffst du das, wenn du ihn nicht in den quirksmode schickst

http://de.selfhtml.org/css/formate/box_modell.htm#doctype_switch

[Toni]

mit dem internet explorer 6 aufwärts schaffst du das, wenn du ihn nicht in den quirksmode schickst

http://de.selfhtml.org/css/formate/box_modell.htm#doctype_switch

Hi,
das klappt aber nicht, der zentriert mir trotzdem das ganze nicht....

www.fleischfressende-pflanzen.pytalhost.de

mfg
Toni

[schwarze Piste]

Tachchen!

www.fleischfressende-pflanzen.pytalhost.de

1. Also ich sehe auf der Seite einen arg wilden Mix aus diversen
Formatierungsversuchen per HTHL und CSS. Letzteres würde reichen.

2. Ich kann nicht entdecken, dass du schon versucht hättest, den
IE in den Standard-Modus zu bringen. Suits Link sollte da helfen.

Gruß

Die schwarze Piste

[Beat]

das klappt aber nicht, der zentriert mir trotzdem das ganze nicht....

www.fleischfressende-pflanzen.pytalhost.de

Du willst das Grundgerüst einer HTML Datei zur Kenntnis nehmen
http://de.selfhtml.org/html/allgemein/grundgeruest.htm#html
und
http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp

mfg Beat

[schwarze Piste]

Tachchen!

Ich tippe auf einen alten IE, einen ungünstigen Doctype ... oder beides. :-)

Vermeide den Quirks-Mode und hilf ganz dolle alten IEs mit einem unschönen
text-align: center.

Gruß

Die schwarze Piste

[Toni]

Tachchen!

Ich tippe auf einen alten IE, einen ungünstigen Doctype ... oder beides. :-)

Vermeide den Quirks-Mode und hilf ganz dolle alten IEs mit einem unschönen
text-align: center.

Gruß

Die schwarze Piste

Hi,
und mit Css kann ich das nicht formatieren?
mfg
Toni

[ChrisB]

Hi,

bitte zitiere sinnvoll.

Vermeide den Quirks-Mode und hilf ganz dolle alten IEs mit einem unschönen
text-align: center.

und mit Css kann ich das nicht formatieren?

Erst mal raus aus dem Quirks Mode, und ein vollstaendiges, valides [1] HTML-Dokument erstellen.

Und selbstverstaendlich gehoert auch text-align zu den CSS-Eigenschaften - es kann hier als Workaround fuer uralte IE-Versionen genutzt werden, die Zentrierung ueber margin:auto noch nicht beherrschen. Ueberhaupt solltest du *alles*, was die Darstellung betrifft, ueber CSS regeln.

[1] Das heisst, erst mal die Fehler beseitigen.

MfG ChrisB

[*Markus]

Hallo,

In Pseudocode erklärt mache ich das immer so bei einer Seite, die für mindestens 800px Breite erstellt ist:
Body:
width:100%;

Inhaltscontainer:
width:790px;
position:absolute;
left:100%;
margin-left:-395px;

Es wird also immer, egal bei welcher Bildschirmbreite der ganze Zirkus zuerst 50% der gesamten Breite nach links versetzt, und danach um die Hälfte der Inhaltscontainerbreite wieder nach links verschoben. Der "Nebeneffekt" ist dann ein immer genau zentrierter Inhaltscontainer.

Markus

[*Markus]

Nachtrag:

Es wird also immer, egal bei welcher Bildschirmbreite der ganze Zirkus zuerst 50% der gesamten Breite nach links versetzt, [...]

Zuerst wird der Container natürlich nach rechts verschoben. Dann wieder um die Hälfte der Inhaltscontainerbreite nach links.

Markus

[*Markus]

Argh, noch ein Fehler. Was ist nur heute mit mir los..

width:100%;

Inhaltscontainer:
width:790px;
position:absolute;
left:100%;
margin-left:-395px;

Es muss left:50% heißen, nicht left:100%.

Markus

[Harlequin]

Yerf!

Es wird also immer, egal bei welcher Bildschirmbreite der ganze Zirkus zuerst 50% der gesamten Breite nach links versetzt, und danach um die Hälfte der Inhaltscontainerbreite wieder nach links verschoben. Der "Nebeneffekt" ist dann ein immer genau zentrierter Inhaltscontainer.

...was besonders dann "nett" ist, wenn der Viewport kleiner als der Inhaltsbereich ist, da dann links und rechts abgeschnitten wird und somit Inhalt verloren geht.

Gruß,

Harlequin

[suit]

...was besonders dann "nett" ist, wenn der Viewport kleiner als der Inhaltsbereich ist, da dann links und rechts abgeschnitten wird und somit Inhalt verloren geht.

defect by design ;) zudem benötigt man dafür ein zusätzliches html element, welches bei der standardkonformen methode, block-elemente mittels margin zu zentrieren ebenfalls wegfällt

die _einzige_ voraussetzung dafür ist, dass der internet exploder 6 im standardkonformen modus rendert

[*Markus]

Hallo,

Es wird also immer, egal bei welcher Bildschirmbreite der ganze Zirkus zuerst 50% der gesamten Breite nach links versetzt, und danach um die Hälfte der Inhaltscontainerbreite wieder nach links verschoben. Der "Nebeneffekt" ist dann ein immer genau zentrierter Inhaltscontainer.

...was besonders dann "nett" ist, wenn der Viewport kleiner als der Inhaltsbereich ist, da dann links und rechts abgeschnitten wird und somit Inhalt verloren geht.

Wobei sich die Frage stellt wie sinnvoll es ist, dass eine Seite bei 400px Bildschirmbreite Breite noch leserlich sein soll. Wieviele Leute surfen denn unter 800px Bildschirmbreite? Die Information um jeden Preis noch irgendwie anzuzeigen, und sei es, dass ein Satz über 12 Zeilen zusammengequetscht sein würde, nur damit man alle Information noch irgendwie hat, ist ungefähr genauso vernachlässigbar wie noch für einen Netscape 4.7 zu schreiben.
Und wenn ich will, dass meine Webseite auf einem Handy problemlos angezeigt werden soll, dann muss ich mir sowieso andere Lösungen überlegen.

Aber ich bin sicher, dass du eine bessere Lösung hast. Warum hast du sie nicht gleich präsentiert?

Markus

[Harlequin]

Yerf!

Aber ich bin sicher, dass du eine bessere Lösung hast. Warum hast du sie nicht gleich präsentiert?

Weil margin:auto bei standardkonformen Rendering (und text-align:center als Workaround für alte IEs) schon genannt wurde. Diese Variante hat den Vorteil, dass man auch mit min- und max-width arbeiten kann und bei zu kleinem Viewport bekommt man zumindest einen Scrollbalken.

Gruß,

Harlequin

[*Markus]

Hallo,

Weil margin:auto bei standardkonformen Rendering (und text-align:center als Workaround für alte IEs) schon genannt wurde. Diese Variante hat den Vorteil, dass man auch mit min- und max-width arbeiten kann und bei zu kleinem Viewport bekommt man zumindest einen Scrollbalken.

Ok, ich habe zu diesem Zweck mal folgendes gebastelt.

  
<?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
<head>  
<title>Marginauto</title>  
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>  
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>  
<meta http-equiv="content-style-type" content="text/css"/>  
<style type="text/css">  
body {  
 margin:auto auto auto auto; padding:0;  
 text-align:center;  
 }  
  
#Content {  
 width:800px;  
 margin:0px auto;  
 text-align:left;  
 border:1px dotted #333;  
 background-color:#DDD;  
 }  
</style>  
</head>  
<body>  
   <div id="Content">  
   Text Test Test Test Text Text Test Test Test Text Text Test Test Test Text Text Test Test Test Text Text Test Test Test Text  
   </div>  
</body>  
</html>  

man verliert den Inhalt links zwar nicht mehr, und bis zu einer gewissen Breite den Inhalt rechts auch nicht, aber ab einer gewissen Grenze ist der Inhalt am äußersten rechten Rand ebenfalls abgeschnitten. Im Endeffekt hat man wieder Information verloren, weil man diesmal mit dem Scrollbalken nicht mehr so weit rüber kommt, dass man noch alle Inhalte sieht.

Oder kann man es irgendwie noch besser machen?

Markus

[suit]

Ok, ich habe zu diesem Zweck mal folgendes gebastelt.

basteln ist eine schlechte idee ;)

<?xml version="1.0" encoding="UTF-8"?>

quirks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Marginauto</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
<meta http-equiv="content-style-type" content="text/css"/>

WTF?

<style type="text/css">
body {
margin:auto auto auto auto; padding:0;
text-align:center;
}

#Content {
width:800px;
margin:0px auto;
text-align:left;
border:1px dotted #333;
background-color:#DDD;
}
</style>
</head>
<body>
   <div id="Content">
   Text Test Test Test Text Text Test Test Test Text Text Test Test Test Text Text Test Test Test Text Text Test Test Test Text
   </div>
</body>
</html>

>   
> Im Endeffekt hat man wieder Information verloren, weil man diesmal mit dem Scrollbalken nicht mehr so weit rüber kommt, dass man noch alle Inhalte sieht.  

blödsinn  
  

>   
> Oder kann man es irgendwie noch besser machen?  

wie bereits erwähnt - mir ordentlichem code  
  
text-align center ist lediglich dafür da um text zu zentrieren, dieser dämliche workaround ist für die ie 5.5 abwärts von nöten (verbreitungsgrad tendentiell null)  
  
das body-element lässt sich übrigens auch zentrieren ...

[*Markus]

<?xml version="1.0" encoding="UTF-8"?>
quirks

Huh? Ich dachte der IE schaltet ohne Doctype in den Quirks?!.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Marginauto</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
<meta http-equiv="content-style-type" content="text/css"/>
WTF?

Wieso WTF?
"This document was successfully checked as XHTML 1.0 Strict!"
CSS:
Congratulations! No Error Found.

<style type="text/css">
body {
margin:auto auto auto auto; padding:0;
text-align:center;
}

#Content {
width:800px;
margin:0px auto;
text-align:left;
border:1px dotted #333;
background-color:#DDD;
}
</style>
</head>
<body>
   <div id="Content">
   Text Test Test Test Text Text Test Test Test Text Text Test Test Test Text Text Test Test Test Text Text Test Test Test Text
   </div>
</body>
</html>

> >   
> > Im Endeffekt hat man wieder Information verloren, weil man diesmal mit dem Scrollbalken nicht mehr so weit rüber kommt, dass man noch alle Inhalte sieht.  
> blödsinn  
  
Probiere es einfach aus und verkleinere auf unter 200px.  

> >   
> > Oder kann man es irgendwie noch besser machen?  
> wie bereits erwähnt - mir ordentlichem code  
  
Ok, also wie zentriert man denn nun "richtig"? margin:auto wurde verwendet. text-align:center kann rausfliegen, gut, und was ist denn jetzt nun "falsch"?  
  
Markus

-- 
![](http://signatur.pithax.net/linuxbanner2.gif)

[suit]

Huh? Ich dachte der IE schaltet ohne Doctype in den Quirks?!.

nicht nur - bitte nachlesen

Wieso WTF?

unerheblich ob valide oder nicht wenn du überflüssigen käse in dein dokument kleisterst: text/html, appication/xhtml+xml - was jetzt?
text/css als default für stylesheets? ist doch schon default - warum nochmal angeben wo du doch ohnehin bei der einbindung zusätzlich den mime-type angeben musst - nur quelltextmüll

margin:auto auto auto auto; padding:0;

auch das ist übrigens blödsinn: margin: auto; hätte gereicht

Ok, also wie zentriert man denn nun "richtig"? margin:auto wurde verwendet. text-align:center kann rausfliegen, gut, und was ist denn jetzt nun "falsch"?

nichts, ich kann dein "informationen gehen verloren" nicht nachvollziehen

[Harlequin]

Yerf!

Oder kann man es irgendwie noch besser machen?

Einen anderen Browser nehmen? Firefox 2.0.0.18, IE 6 und Opera 9.5 zeigen bei mir keine Probleme mit deinem Code (außer das er den IE6 unnötigerweise in den Quirksmode schockt[1], was aber wegen text-align:center egal ist)

Gruß,

Harlequin

[1] der Vertipper ist so schön, dass ich ihn stehen lass ;-)

[*Markus]

Hallo

Oder kann man es irgendwie noch besser machen?

Einen anderen Browser nehmen? Firefox 2.0.0.18, IE 6 und Opera 9.5 zeigen bei mir keine Probleme mit deinem Code (außer das er den IE6 unnötigerweise in den Quirksmode schockt[1], was aber wegen text-align:center egal ist)

Also hab's nur mit FF3 getestet, und wenn ich auf eine Größe von ca 200px verkleinere, dann fangen an, die Wörter am rechten Rand zu verschwinden.
Selbst mit dem Scrollbalken erwischt man nicht mehr alle.

Markus

[Harlequin]

Yerf!

Also hab's nur mit FF3 getestet, und wenn ich auf eine Größe von ca 200px verkleinere, dann fangen an, die Wörter am rechten Rand zu verschwinden.
Selbst mit dem Scrollbalken erwischt man nicht mehr alle.

Hast du dir das mal genauer angeschaut? Bei mir schiebt der FF3 (grad eben installiert) die Scrollbars aus dem Viewport raus... WTF?

Dafür kann HTML und CSS nun wirklich nix, das ist ein Bug in der FF3 GUI.

Gruß,

Harlequin

[suit]

Dafür kann HTML und CSS nun wirklich nix, das ist ein Bug in der FF3 GUI.

mein firefox 3 macht das nicht (verson 3.0.3 unter vista x64)

[*Markus]

Dafür kann HTML und CSS nun wirklich nix, das ist ein Bug in der FF3 GUI.

mein firefox 3 macht das nicht (verson 3.0.3 unter vista x64)

Bei mir, FF 3.0.4 kann ich ab einer gewissen Grenze nicht weiter nach rechts scrollen, wodurch der Text von da an abgeschnitten wird.
So sieht es bei mir aus, wenn ich die Browser zusammenquetsche nicht mehr weiter nach rechts scrollen kann. Ein Teil des Inhalts ist definitiv nicht mehr zu sehen:

Markus

[Harlequin]

Yerf!

So sieht es bei mir aus, wenn ich die Browser zusammenquetsche nicht mehr weiter nach rechts scrollen kann. Ein Teil des Inhalts ist definitiv nicht mehr zu sehen:

An dem Bild ist schön zu sehen, dass die Scrollbar selbst nicht mehr vollständig ist, oder wo ist der rechte Pfeil hingerutscht? Das ist definitiv ein Firfox-Problem und es betrifft nicht nur die Scrollbar sondern z.B. auch die Tab-Leiste.

Gruß,

Harlequin

[*Markus]

Hallo,

An dem Bild ist schön zu sehen, dass die Scrollbar selbst nicht mehr vollständig ist, oder wo ist der rechte Pfeil hingerutscht? Das ist definitiv ein Firfox-Problem und es betrifft nicht nur die Scrollbar sondern z.B. auch die Tab-Leiste.

Ok, danke für die Info. Selbst, wenn es ein CSS-Problem wäre, würde ich es ehrlich gesagt ignorieren, denn wer schiebt den Browser derart zusammen oder betrachtet Webseiten auf dieser Auflösung mal Handybenutzer ausgenommen. Für diese Gruppe würde ich sowieso eine Extraseite erstellen, die ausschließlich für diese Zielgruppe gedacht ist.

Markus

[suit]

Yerf!

So sieht es bei mir aus, wenn ich die Browser zusammenquetsche nicht mehr weiter nach rechts scrollen kann. Ein Teil des Inhalts ist definitiv nicht mehr zu sehen:

An dem Bild ist schön zu sehen, dass die Scrollbar selbst nicht mehr vollständig ist, oder wo ist der rechte Pfeil hingerutscht? Das ist definitiv ein Firfox-Problem und es betrifft nicht nur die Scrollbar sondern z.B. auch die Tab-Leiste.

ich hab mir jetzt firefox 3.0.4 installiert auf dem rechner wo zuvor noch ff2 darauf war: siehe da: das problem tritt auch hier auf

das hat übrigens nichts mit der zentrierung zu tun - sobald der viewport unter einer bestimmten breite ist, ist der scrollbar nicht mehr richtig bedienbar (tritt auch hier im forum auf)

sobald die fensterbreite auf unter 334 pixel (bzw die viewportbreite auf unter 327 pixel) sinkt ist die menüleiste, die scrollbalken, die adressezeile usw nicht mehr bedienbar

ggf liegts auch am skin, ich hab aber keine lust mir was anders zu installieren :D

das suchfeld unten (strg+f) ist übrigen schon weit früher abgeschnitten

[Harlequin]

Yerf!

mein firefox 3 macht das nicht (verson 3.0.3 unter vista x64)

Firefox 3.04 unter Windows XP (32bit). Der schiebt ab einer gewissen Mindestbreite seine GUI-Elemente nicht weiter zusammen sondern einfach aus dem Fenster raus...

Gruß,

Harlequin

[suit]

Wobei sich die Frage stellt wie sinnvoll es ist, dass eine Seite bei 400px Bildschirmbreite Breite noch leserlich sein soll.

mir stellt sich die frage, wie sinnvoll es ist, unnötig eine technisch schlechtere (umständlichere) lösung zu verwenden, wenn es doch eine standardkonforme, fehlerfreie und richtige lösung gibt die noch dazu einfacher (mit EINER ZEILE css extra) ohne rechnen umsetzbar ist

Wieviele Leute surfen denn unter 800px Bildschirmbreite?

die breite meines bildschirms messe ich in einer si-einheit namens "meter" - diese ist für die breite des anzeigebreichs meines browses (gemessen in bildpunkten) nicht relevant

ich mit meinen nintendo ds mit < 800px viewportbreite unterwegs - ähnlichs dürfte auch für sämtliche iphone-besitzer gelten