zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS-Seite horizontal und vertikal zentrieren!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.02.2010, 14:30
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2007
Beiträge: 67
Boof befindet sich auf einem aufstrebenden Ast
Standard CSS-Seite horizontal und vertikal zentrieren!

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.02.2010, 14:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.02.2010, 14:35
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Auf keinen Fall per position (siehe kleiner Viewport), sondern per FAQ 5.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #4 (permalink)  
Alt 04.02.2010, 15:03
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2007
Beiträge: 67
Boof befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
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 Beitrag anzeigen
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.
Mit Zitat antworten
  #5 (permalink)  
Alt 04.02.2010, 15:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Boof Beitrag anzeigen
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.
Mit Zitat antworten
  #6 (permalink)  
Alt 04.02.2010, 15:19
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2007
Beiträge: 67
Boof befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
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.
Mit Zitat antworten
  #7 (permalink)  
Alt 04.02.2010, 15:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Boof Beitrag anzeigen
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.
Mit Zitat antworten
  #8 (permalink)  
Alt 04.02.2010, 15:53
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Boof, ich verstehe nicht, wieso Du eine wackelige Methode verwenden willst, wenn es auch eine absolut sichere gibt.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #9 (permalink)  
Alt 04.02.2010, 15:58
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2007
Beiträge: 67
Boof befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 04.02.2010, 16:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:39 Uhr.