CSS-Seite horizontal und vertikal zentrieren!

Boof · #1 (**permalink**) 04.02.2010, 13:30

Hallo zusammen!

Ich versuche mich gerade an einer neuen Website, die ich zum ersten Mal in XHTML und CSS erstellen möchte. Die letzte Version hatte HTML und ein paar kleine CSS-Scripte. Ich würde die Seite gerne horizontal und vertikal zentrieren und habe dazu fongenden Script:

XHTML-Datei:

HTML-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>CSS-Test - Mitte zentriert</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="harpo.css"/>

</head>
<body>
    <div id="bigbox">
      <div id="innenbox">
      </div>
    </div>
  </body>
</html>

ausgelagerter CSS-Script:

Code:

body {
  background-image: url(blank.jpg);
  padding:0px;
  margin:0px;
}
#bigbox { 	
  position:absolute;
  height:595px; 
  width:992px;
  margin:-296px 0px 0px -496px;
  top: 50%; 
  left: 50%;

  padding: 0px;
  background-image: url(back.jpg);
}
#innenbox { 	
	position:absolute;
	color: #0000FF;
	top: 26px;
	left: 46px;
}

Da ich in XHTML und CSS nur leichte Grundkenntnisse habe,
habe ich zwei Fragen dazu:

1.) Testlink: CSS-Test - Mitte zentriert. Ich hätte gerne, dass sie Website (wie im Script angegeben) in einer Größe von 992 px x 595 px horizontal und vertikal immer zentriert angezeigt wird. Ist der von mir angegebene Script so OK? Bzw, kann man darauf auch weiter aufbauen. Für mich ist wichtig, dass die Website auch in den gängigsten Browsern IE, Mozilla Firefox, Opera, Safari (PC), Google Chrome auch richtig angezeigt wird.

2.) In dem (unter Frage 1) angegebenen Testlink, habe ich zur besseren Veranschaulichung in der Mitte einfach mal eine Testgrafik eingefügt. Was den Außenrahmen betrifft, der hier eine schwarze Pixelgrafik mit Namen blank.jpg besitz, so würde ich diesen Bereich auch gerne ein wenig Gestalten, so dass oben, rechts, unten und links (anstatt der Pixelgrafik) jeweiles eine einzelne Grafik liegt. Der jeweilige Außenbereich (der ja logischer Weise variable sein muss) soll sich bei kleineren Bildschirmauflösungen außen zusammenschieben und nicht zwischen dem mittleren Inhaltsbereich (wo momentan die Testgrafik liegt). Ich weis nur nicht, wie ich meinen Script dafür umbauen muss. Kann mir da einer helfen, oder einen Tipp geben? Wäre echt nett!

Herzliche Grüße
Boof

fricca · #2 (**permalink**) 04.02.2010, 13:34

Diese Zentriermethode ist nicht empfehlenswert, weil bei kleinem Viewport die Inhalte unerreichbar nach links und oben verschwinden.
Eine Alternative ohne dieses Manko findest du unter FAQ Punkt 5.

Zu deiner Grafik-Frage: Du musst schon genau das herzeigen, wass du machen willst, sonst kann man dir nichts dazu sagen.
Wie immer gilt: Erst Inhalt, dann HTML, dann CSS. CSS kann man nur sinnvoll anwenden, wenn es sinnvolles HTML gibt.

heiko_rs · #3 (**permalink**) 04.02.2010, 13:35

Auf keinen Fall per position (siehe kleiner Viewport), sondern per FAQ 5.

Boof · #4 (**permalink**) 04.02.2010, 14:03

Zitat:

Zitat von fricca

Diese Zentriermethode ist nicht empfehlenswert, weil bei kleinem Viewport die Inhalte unerreichbar nach links und oben verschwinden ...

Danke für die Info. Ich sollte vielleicht dazu sagen, dass es sich hier um eine Website handelt, die nur für eine Mindestauflösung ab 1024 x768 Pixeln gedacht ist und nicht für kleinere Viewports.

Zitat:

Zitat von fricca

Zu deiner Grafik-Frage: Du musst schon genau das herzeigen, wass du machen willst, sonst kann man dir nichts dazu sagen.
Wie immer gilt: Erst Inhalt, dann HTML, dann CSS. CSS kann man nur sinnvoll anwenden, wenn es sinnvolles HTML gibt.

Das geht schlecht, dass ganze ist in der Planung, deswegen müsste ich vorher wissen, wie ich sowas machen kann. Ich versuche die Frage aber mal anders zu stellen. Früher gabe es für sowas Frames. In der Mitte gab es das, was jetzt meine Testgrafik zeigt und außen eine einzige Datei, die sich (je nach Bildschirmauflösung) zusammen geschoben hat. Ich möchte gerne rund um den Inhaltsbereich auch etwas gestalten (sozusagen für größere Bildschirmauflösungen über 1024 px x 768 px). Beim zusammenschieben (wie es früher die Frames machten), sollten sich die Außengrafiken jedoch nicht in der Mitte neben dem Inhaltsbereich zusammenschieben lassen, sondern außen am Bildschirmrand.

fricca · #5 (**permalink**) 04.02.2010, 14:10

Zitat:

Zitat von Boof

Danke für die Info. Ich sollte vielleicht dazu sagen, dass es sich hier um eine Website handelt, die nur für eine Mindestauflösung ab 1024 x768 Pixeln gedacht ist und nicht für kleinere Viewports.

Ach komm. Die Zeiten, in denen man für irgendwelche Auflösungen "optimiert" hat, sind lange vorbei.
Die Auflösung interessiert überhaupt nicht. Auch jemand mit 1920 x 1200 kann sein Browserfenster so klein machen, dass im Viewport weniger als deine Wünsche übrigbleiben.

Aber ich muss ja nicht verstehen, warum du lieber eine offensichtlich problembehaftete Methode einsetzt.
Habe ich dir nicht schon mal Lektüre zu modernem Webdesign empfohlen? Davon ist offensichtlich nichts bei dir angekommen. Schade. War immerhin ein Versuch.

Bei deinen Grafikwünschen kann ich dir nicht helfen. Ich weiß nicht, was du erreichen willst.

Boof · #6 (**permalink**) 04.02.2010, 14:19

Zitat:

Zitat von fricca

Ach komm. Die Zeiten, in denen man für irgendwelche Auflösungen "optimiert" hat, sind lange vorbei.
Die Auflösung interessiert überhaupt nicht. Auch jemand mit 1920 x 1200 kann sein Browserfenster so klein machen, dass im Viewport weniger als deine Wünsche übrigbleiben.

Danke, ich weis schon was du meinst. Meine Frage war auch nicht, ob diese Art für kleinere Bildschirmauflösungen (Viewports) gut ist! Auch lautete die Frage nicht, ob eine Optimierung Sinn macht! Es ist lieb und nett gemeint von dir, aber darum geht es in meiner Frage nicht!

Um es kurz zu fassen; Meine Frage lautete einfach, ob es mit dieser Methode bei Bildschirmauflösungen (von 1024 x768 px aufwärts - und nicht abwärts) Probleme geben kann.

fricca · #7 (**permalink**) 04.02.2010, 14:40

Zitat:

Zitat von Boof

Meine Frage lautete einfach, ob es mit dieser Methode bei Bildschirmauflösungen (von 1024 x768 px aufwärts - und nicht abwärts) Probleme geben kann.

Die Antwort darauf lautet einfach: Ja.

heiko_rs · #8 (**permalink**) 04.02.2010, 14:53

Boof, ich verstehe nicht, wieso Du eine wackelige Methode verwenden willst, wenn es auch eine absolut sichere gibt.

Boof · #9 (**permalink**) 04.02.2010, 14:58

Zitat:

Zitat von fricca

Die Antwort darauf lautet einfach: Ja.

Hm, nicht gerade gesprächig, aber trotzdem herzlichen Dank. Und welche Probleme kann es da (für größere Bildschirmauflösungen) geben. Den Script habe ich nicht selber so geschrieben, sondern aus einerm (angeblich) sehr empfehlenswerten Buch.

Da du mir schon mehrfach geantwortet hast, möchte ich dir auch erklären, warum ich diese Website für eine Bildschirmauflösung von 1024 x 768 (aufwärts) optimieren möchte.

Die alte Website hat mittlerweile so an Umfang, dass ich an einer Neugestaltung nicht mehr dran vorbei komme. Auch bin ich einer, der gerne wissen möchte, wie die Website mit jeder Bildschirmauflösung aussieht. Deswegen auch der Innenbereich, der zurZeit die Testgrafik hat. Der Außenbereich dient einfach nur als Passepartout sozusagen.

Dieses Passepartout möchte ich natürlich für größere Bildschirmauflösungen (ab 1024 x 768 ) auch noch etwas gestalten, was aber ein anderes Thema ist und ganz oben meine zweite Frage war.

Gruß Boof

fricca · #10 (**permalink**) 04.02.2010, 15:03

Ich habe es bereits erklärt. Die Bildschirmauflösung ist irrelevant. Es zählt der Viewport. Das ist die Fläche, die im Browser für die Anzeige zur Verfügung steht. Damit können deine Besucher machen, was sie wollen. Darauf hast du keinen Einfluss.

Wenn du sinnvoll umgestalten willst, dann verabschiede dich von festen Größen. Zumindest aber von Höhen -- und der aus Frame-Zeiten stammenden vertikalen Zentrierung.
Aber das hatten wir alles schon mal. Ich habe das Gefühl, auf Beratungsresistenz zu treffen, daher verabschiede ich mich jetzt.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Seite mittig zentrieren	FabriceAbc	CSS	17	24.05.2011 21:53
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren	Alien	CSS	17	20.03.2011 10:23
Vertikal zentrieren	rusty	CSS	13	08.04.2009 22:54
CSS Menu - active Seite hervorheben	celine70	CSS	2	19.12.2008 23:59
vertikal + horizontal zentrieren mit CSS ( ohne Layouttabelle )	Webstandard	CSS	8	14.09.2006 14:20