mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 20.01.2022 09:12 Benutzername: Passwort: Auto-Login

Thema: Webseite vertikal zentrieren vom 04.03.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Webseite vertikal zentrieren
Seite: 1, 2  Weiter
Autor Nachricht
Odin_333
Threadersteller

Dabei seit: 23.01.2009
Ort: -
Alter: 37
Geschlecht: Männlich
Verfasst Do 04.03.2010 10:17
Titel

Webseite vertikal zentrieren

Antworten mit Zitat Zum Seitenanfang

Guten Morgen zusammen.

Komme eigentlich aus dem Printbereich, also nicht erschrecken, bezüglich meiner Unwissenheit.

Vor einiger Zeit habe ich damit angefangen, für mich privat eine Webseite zu gestalten (Dreamweaver CS3)

Fernab von Themen wie Flash usw. stehe ich ganz einfach vor dem Problem, dass ich gerne den gesammten Eingabe- und Darstellungsbereich (ca 850 x 850px) auf jedem Monitor horizontal (kein Problem) aber eben auch vertikal zentriert haben möchte (ähnlich dem hier: http://hatecke.ch/)

Ich hab mir schon die Finger wund gesucht, aber bis auf das, dass es wohl irgendwie mit css funktionieren soll, weiss ich leider nicht weiter.

Evtl. hat jemand einen Tipp oder einen passenden Link, wäre für jede Hilfe dankbar.
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 39
Geschlecht: Männlich
Verfasst Do 04.03.2010 10:46
Titel

Antworten mit Zitat Zum Seitenanfang

Horizontales Zentrieren ist mittels CSS nicht möglich.

Es gibt aber einige Tricks den Effekt dennoch zu erreichen


CSS
Code:
div#horizontal {
   display:block;
   position:absolute;   
   width:100%;
   height:1px;
   top:50%;
   left:0px;
   overflow:visible;
   visibility:visible;
}

div#horizontal #wrapper {
   position:absolute;
   background-color:#ffffff;
   width:867px;
   height:571px;
   top:-286px;
   left:50%;
   margin-left:-428px;
   overflow:visible;
}



HTML

Code:
<div id="horizontal">
   <div id="wrapper">
      <!--content-->
   </div>
</div>


Das sind jetzt bsphafte Abmessungen. Die mußt Du für Dein Projekt natürlich dementsprechend anpassen.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Odin_333
Threadersteller

Dabei seit: 23.01.2009
Ort: -
Alter: 37
Geschlecht: Männlich
Verfasst Do 04.03.2010 10:54
Titel

Antworten mit Zitat Zum Seitenanfang

Danke schonmal, aber laut Code (bin Laie) wird der entsprechende Inhalt dadurch ja nur horizontal zentriert, ich suche aber nach einer Möglichkeit, dass eine Box (beinhaltet dann menüs usw) auf jedem Bildschirm im Browser links und rechts, und oben und unten zentriert ist.
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 39
Geschlecht: Männlich
Verfasst Do 04.03.2010 10:59
Titel

Antworten mit Zitat Zum Seitenanfang

Das macht das auch.

Wieso probierst Du es nicht erstmal aus?

Gib #wrapper am besten eine ander Hintergrundfarbe. Dann siehst Du es besser *zwinker*


Zuletzt bearbeitet von Kash am Do 04.03.2010 11:00, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Odin_333
Threadersteller

Dabei seit: 23.01.2009
Ort: -
Alter: 37
Geschlecht: Männlich
Verfasst Do 04.03.2010 11:08
Titel

Antworten mit Zitat Zum Seitenanfang

Bin grad nicht am Arbeitsplatz, versuche es aber heute Abend.

Danke jedenfalls schonmal im Voraus.
  View user's profile Private Nachricht senden
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein Status:0
Alter: 49
Geschlecht: Männlich
Verfasst Do 04.03.2010 11:19
Titel

Re: Webseite vertikal zentrieren

Antworten mit Zitat Zum Seitenanfang

Odin_333 hat geschrieben:
..., dass ich gerne den gesammten Eingabe- und Darstellungsbereich (ca 850 x 850px) auf jedem Monitor horizontal (kein Problem) aber eben auch vertikal zentriert haben möchte (ähnlich dem hier: http://hatecke.ch/)

...


An der Beispielseite sieht man auch gut welche Probleme durch diese Lösung entstehen. Wenn du dein Browserfenster kleiner ziehst, verschwindet der obere und linke Teil der Website unerreichbar im Nirwana. Hat ein Besucher nur eine geringe Monitorauflösung (und deine Links sind ganz oben auf der Seite) wird er leider nicht weit kommen.
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 39
Geschlecht: Männlich
Verfasst Do 04.03.2010 11:30
Titel

Re: Webseite vertikal zentrieren

Antworten mit Zitat Zum Seitenanfang

top hat geschrieben:
Odin_333 hat geschrieben:
..., dass ich gerne den gesammten Eingabe- und Darstellungsbereich (ca 850 x 850px) auf jedem Monitor horizontal (kein Problem) aber eben auch vertikal zentriert haben möchte (ähnlich dem hier: http://hatecke.ch/)

...


An der Beispielseite sieht man auch gut welche Probleme durch diese Lösung entstehen. Wenn du dein Browserfenster kleiner ziehst, verschwindet der obere und linke Teil der Website unerreichbar im Nirwana. Hat ein Besucher nur eine geringe Monitorauflösung (und deine Links sind ganz oben auf der Seite) wird er leider nicht weit kommen.


Das passiert bei meiner Lösung auch. Daher sollte man bei der Konzeption schon darauf achten das es bei 1024*768 oder auch bei 800*600 noch zu sehen ist. Wobei zweiteres sicherlich mittlerweile ausgeschlossen werden kann.
  View user's profile Private Nachricht senden
squiler

Dabei seit: 01.06.2005
Ort: Dresden
Alter: 44
Geschlecht: Männlich
Verfasst Do 04.03.2010 11:37
Titel

Antworten mit Zitat Zum Seitenanfang

Zentrierung Seiteninhalt in 3 Schritten:

1.Schritt
body {text-align: center;} das überzeugt den IE schon mal von deinem Vorhaben

2.Schritt
div#wrapper {margin: 20px auto;} durch auto wird der verbleibende Außenabstand links und rechts gleichmäßig aufgeteilt --- damit ist die Seite auch im FF mittig

3. Schritt

div#wrapper {margin: 20px auto; text-align: left;} aufhebung des Mittelsatzes ganz nach Bedarf *zwinker*
  View user's profile Private Nachricht senden
 
Ähnliche Themen Text in DIV vertikal zentrieren
vertikal zentrieren in dreamweaver cs3
[CSS] Zentrieren vertikal und horizontal
Text in Textfeld vertikal zentrieren in PS?
[CSS] Bild + Text vertikal zentrieren?
[css] div(float: right) vertikal im elternelement zentrieren
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.