Elemente/Inhalte immer auf dem Screen zentrieren....

Zitat von hubutz

Hallo zusammen,

ich frage mich, ob es nicht möglich ist (ich bin CSS unerfahren, versuche mich aber etwas daran), festzulegen, dass bestimmte Elemente zwar die komplette Breite des Bildschirms nutzen dürfen, aber (!wichtig) immer zentriert angezeigt werden.

Als Beispiel:

Code

#topbar { height: 34px;
          margin: 0 auto;
          padding: 0;
          width: 75%;
          text-align: center;
}

Diese "Bar" hätte ich gerne immer in der Mitte des Screens, egal ob dann nach links und rechts noch 1000px Platz ist, oder es direkt an den Rand kommt. Mit dem Inhalt #content soll es genauso sein.

Geht das? Ich dachte das ginge wohl mit diesem _text-align: center;_ aber das macht wohl irgendwas anderes, auf jedenfall nicht das was ich gerne hätte.

Liebe Grüße und vielen Dank,
hubutz

Alles anzeigen

dann verhindert was anderes , dass dies immer in der Mitte ist,

sonst müßt es in der Mitte sein ;)

url wäre hilfreich

lg

Also, text-align ist für die Ausrichtung von Text da. Da Du den Text ja linksbündig willst, kannst Du das also weglassen oder auf left stellen. Für die Ausrichtung von Block-Elementen wird margin: auto genommen, was Du ja schon richtig drin stehen hast.

Deswegen sieht das für mich im FF jetzt auch ok aus. Stimmt doch, oder? Content und Header sind jeweils zentriert, der Text in den beiden Boxen ist linksbündig. Es kann allerdings sein, dass ältere Internet Explorer die margin-Methode nicht beherrschen. Das müsstest Du mal nachschlagen.

... Ok, ich hab mal nachgeschaut. Hatte mir notiert, dass das mit IE 5.5 und drunter nicht geht. Eigentlich ist das egal, denn damit surft kaum noch jemand. Falls es Dich aber stört, kannst Du mit Conditional Comments älteren IEs ein spezielles Stylesheet zuweisen, in dem Du dann den beiden Boxen z.B. einen linken Abstand von 25% oder so gibst.

Ist das Problem also geklärt? Oder stört Dich, dass Header und Content nicht auf der gleichen Höhe anfangen? Das liegt vermutlich daran, dass die beiden Boxen verschiedene Breiten haben. Die Firefox-Erweiterung "WebDeveloper-Toolbar" hilft bei sowas wirklich weiter (oder einfach mal beiden Boxen testweise einen farbigen Rahmen geben, dann siehsts Du's auch).

Zitat von hubutz

Hallo,
kann leider nicht genau nachsehen, schaue heute abend aber nochmal genau (spätestens morgen, hab dann Urlaub), kann aber sein, dass es hier am IE5 liegt (der auf der Maschine noch läuft -.-).

Und ja, es stört mich, dass Header unten Content nich aufderselben Höhe anfangen, aber wenn es an verschiedenen Breiten liegt (werde das zuhause dann mit der Erweiterung testen), bekomme ich das sicher hin. Vor allem stört mich halt, dass das Bild und die "Praxis für Blablba" nicht so recht zentriert dazu sind.

Danke mal für die Hilfe! tut mir leid, dass ich jetzt nicht gleich drauf schauen kann :/ Melde mich spätestens morgen wieder.

ja die alten IEs sind noch im Einsatz,

überliste den alten ...;)

gib um das ganze nochmals ein div, dieses zentrierst du so wie im 1. Beitrag von Dir geschrieben

das div darunter, dem gibste dann ..text-align..left ;)

die unterschiedlichen Höhen musst Du für die Browser herausfinden..
jeder interpretiert ja padding undmargin anders,

Du tust Dir leichter, wenn Du bei ids oder class , die die Struktur ergeben sollten immer 0 nimmst und extra angibst..
Beispiel

div.ganzepage{margin: 0;padding:0;}

magst Du dann h1 im header tiefer haben, gib dem ein padding,

anders verzweifelst du anfangs ... und später auch ;)

Grund der Verzweiflung hat einen Namen: IE :cry:

lg

Ich hab jetzt keine Zeit, es mir im Detail anzuschauen, deshalb nur kurz noch mal ein Tip: Wenn Du an sowas arbeitest, hilft es ungemein, die Boxen zu sehen, die Du zu platzieren versuchst. Deshalb installiere Dir am besten mal die Web Developer Toolbar für den Firefox:
https://addons.mozilla.org/de/firefox/addon/60

Dann im FF die Seite aufrufen und aus der neuen Toolbar CSS > View Style Information (oder Strg+Shift+Y). Wenn Du jetzt die Maus über einen Bereich hältst, siehst Du einen Rahmen um die Box. Damit sieht man dann sehr gut, ob die Box (im Gegensatz zum Inhalt der Box) mittig ist, oder zu weit links oder rechts etc. Gerade bei solchen Problemen, falsche Positionierung etc., hilft das ungemein. Alternativ kannst Du natürlich auch einfach selber Rahmen oder Hintergrundfarben testweise ins Stylesheet schreiben, aber mit der Toolbar ist es schon einfacher.

Ok, habe jetzt doch noch mal schnell einen Screenshot gemacht. So sieht es bei mir im FF aus, die Rahmen sind von der Toolbar reingemalt:
http://johannes-ruthenberg.de/temp/screenshot_hubutz.jpg
Der Header sieht für mich mittig aus, die Box mit dem Inhalt steht vermutlich weiter links als sie sollte. Aber wenn ich den Screenshot mal wie in Deinem Beispiel von der Team-Seite gemacht hätte, mit zwei Co0ntent-Spalten, würde es doch stimmen, oder? So sieht's im FF2 und IE7 aus. Hast Du das Problem also nur in bestimmten Browsern oder sehe ich jetzt was nicht?