[HTML / CSS] Design zentrieren

[Chrissi91]

Hi,

ich bin langsam am Verzweifeln.

Wie ihr hier sehen könnt, ist das Design Vertikal und Horizontal mittig. Also direkt in der Mitte des Bildschirmes. So habe ich es auch schon bei zig anderen Seite gemacht. Aber auf einmal will mir der Server die Funktion nicht mehr abkaufen:

Hier klicken

Align=Center" macht er, aber Valign="Middle" macht er nicht. Woran liegt es? Ich mache doch nichts anders als sonst.

Grße aus Berlin

Chrissi91

[Matze]

Versuche es mal mittels css:

Code:

margin: auto;

Edit: Ich habe festgestellt, dass meine Möglichkeit nur horizontal zentriert ...

[RobertP]

Machs mit CSS:

Code:

align="center" style="vertical-align:middle"

[pacman1986]

möglichkeit Nr.3 in css wäre

Code:

  
top:50%;
margin-top: -303; (minus die hälfte der höhe)

[RobertP]

Zitat:

Zitat von pacman1986

möglichkeit Nr.3 in css wäre

Code:

  
top:50%;
margin-top: -303; (minus die hälfte der höhe)

Woher weißt du dass 303 die Hälfte der Höhe is? Ändert sich doch je nach Auflösung :?:

[pacman1986]

Die Höhe dieses Projekts da diese Festsehen kann man die auch benutzen.

303 war nur ein besipiel hier müsste das projekt 606px groß sein

[RobertP]

Ahso jetzt check ichs :wink:

[Matze]

Was mich nun interessieren würde, auch wenn ich's nicht benötige: Wie würde man denn eine Webseite mit dynamischer Höhe vertikal ausrichten? Im Internet sind nur so Wischi-Waschi-Lösungen zu finden. Ich denke daher, dass es mit CSS ohne weiteres gar nicht sauber lösbar ist oder geht das doch irgendwie?

Vielleicht brauch ich's ja mal, denn die oben verlinkte Seite sieht mit einer hohen Auflösung ja lustig klein aus, ich musste den Inhalt auf dem Bildschirm erstmal suchen. :mrgreen:

[S2B]

Zitat:

Zitat von Matze

Im Internet sind nur so Wischi-Waschi-Lösungen zu finden.

Dito. Geht bis jetzt imho nur mit Wischi-Waschi oder eben absolut. :cry:

[Chrissi91]

Hi,

das momentane Design hat zum Glück eine feste Höhe und Breite.

Zitat:

Zitat von S2B

Zitat:

Zitat von Matze

Im Internet sind nur so Wischi-Waschi-Lösungen zu finden.

Dito. Geht bis jetzt imho nur mit Wischi-Waschi oder eben absolut. :cry:

Könnte man nicht mit PHP die Auflösung ermitteln, dann die aktuelle Größe des Designs (z.B. der Tabelle) und das dann ausrechnen?

Eure vorgeschlagenen Möglichkeiten probier ich gleich mal aus.

Grüße aus Berlin

Chrissi91

[faux]

Hier sind ein paar Lösungen. Es wird auch erklärt, dass es keine optimale Lösung gibt. ;)
http://css.fractatulum.net/sample/layout4format.htm

Zitat:

Zitat von Chrissi91

Könnte man nicht mit PHP die Auflösung ermitteln, dann die aktuelle Größe des Designs (z.B. der Tabelle) und das dann ausrechnen?

:shock: Wenn du uns nun erklärst, wie du dir vorstellst die Client-Auflösung mittels eines Server-Skriptes zu ermitteln...

Grüße
Faux

[Chrissi91]

xD

Also. Man könnte mit JS die Bildschirmauflösung ermitteln (in unserem Fall die Höhe), zieht die Höhe des Layouts ab (z.B. 603) und teil den Wert anschließend durcch 2.

Dann übergibt man den Wert PHP und schreibt bei top-margin hin: top-margin="<?php echo $ermittelter_wert ?>"

Edit: Deine Möglichkeit funktioniert. Fragt sich nur, wie ich die Scrollbar ganz rechts wegkriege. (Hier kliggen)

Außerdem ist der Text bei 800x600, 1024x768 nach rechts weg. Mit anderen Worten ich probier mal meine Idee mit JS und PHP. Weiß jemand, wie ich einen Wert von JS nach PHP übergebe? Möglichst nicht in der URL ...

[faux]

Zitat:

Zitat von Chrissi91

Also. Man könnte mit JS die Bildschirmauflösung ermitteln (in unserem Fall die Höhe), zieht die Höhe des Layouts ab (z.B. 603) und teil den Wert anschließend durcch 2.

Dann übergibt man den Wert PHP und schreibt bei top-margin hin: top-margin="<?php echo $ermittelter_wert ?>"

Wenn schon so, wieso dann noch extra PHP benutzen und nicht gleich mit JS berechnen? Desweiteren: Es haben einige JS völlig abgeschalten.

Zitat:

Zitat von Chrissi91

Edit: Deine Möglichkeit funktioniert. Fragt sich nur, wie ich die Scrollbar ganz rechts wegkriege. (Hier kliggen)

Ich habe keinen Scrollbalken. :gruebel:

Zitat:

Zitat von Chrissi91

Außerdem ist der Text bei 800x600, 1024x768 nach rechts weg. Mit anderen Worten ich probier mal meine Idee mit JS und PHP. Weiß jemand, wie ich einen Wert von JS nach PHP übergebe? Möglichst nicht in der URL ...

Das hängt jedoch mit den CSS-Einstellungen von #text zusammen.

Grüße
Faux

[S2B]

Zitat:

Zitat von Chrissi91

Also. Man könnte mit JS die Bildschirmauflösung ermitteln (in unserem Fall die Höhe), zieht die Höhe des Layouts ab (z.B. 603) und teil den Wert anschließend durcch 2.

Genau das ist eine dieser oben erwähnten Wischi-Waschi-Möglichkeiten. :zwinker:

Also: Entweder absolut oder gar nicht.

[Chrissi91]

:wiejetzt:

Wieso ist das eine Wischi Waschi Methode? Ist zwar nicht elegant gelöst, aber Fehler (Abgesehen von Leuten die kein JS aktiviert haben) dürften eigetnlich nicht auftreten. :P

[franktron]

Sag guckst du da vieleicht mit dem IE die Seite an wenn ja haste keine wirkliche chance das vernüftig hinzukriegen

[Matze]

Wie oben erwähnt haben nicht wenige JS ausgeschalten. Ich zähle zu denen, die es nur für wenige bestimmte Seiten aktiviert haben. Als Altenative müsstest du dann eben eine absolute Position angeben für die, die JS deaktiviert haben. Aber das ist für mich auch Wischi-Waschi.

[S2B]

Zitat:

Zitat von Matze

Aber das ist für mich auch Wischi-Waschi.

Kommt drauf an. Wenn die ganze Seite sowieso mit absoluter Position (= Frame-Ersatz :angel2: ) gemacht ist, passt das schon, für eine "Einstiegsseite" ist es auch ok, aber für "normale" Seiten in der Tat unbrauchbar. :cyclops:

[Chrissi91]

Zitat:

Zitat von franktron

Sag guckst du da vieleicht mit dem IE die Seite an wenn ja haste keine wirkliche chance das vernüftig hinzukriegen

Ja. Die Seite habe ich im IE angeschaut. Und sie sieht auch sehr gut aus. Aber nicht, wenn ich alle 5 Minuten was daran teste und du gerade dann kommst, wenn etwas Getestetes hochgeladen wird. Normalerweise sieht es in Ordnung aus. Aber durch das Problem mit dem Zentrieren muss ich derzeit nunmal viel testen.

Wieso habern eigentlich viele Leute JS deaktiviert? Hat das irgenwelche Vorteile? ^^

Ich habe eben vom chef erfahren, dass der Kunde kein JS haben will. Also hat sich das erledigt.

[DGL-luke]

Übermittelt der Browser im header nicht normalerweise die Systemauflösung?

[pacman1986]

du koenntest in der css datei mit javascript arbeiten
das stichwort hierfür heisst expression

Code:

         width: expression(document.body.clientWidth - 603 + "px");

[Matze]

Zitat:

Zitat von DGL-luke

Übermittelt der Browser im header nicht normalerweise die Systemauflösung?

Davon habe ich noch nie gehört. Welchen Header meinst du denn? Den User-Agent, den man bei den meisten Browsern nach belieben ausfüllen kann? Weil dieser übermittelt das nicht. Der enthält meist die Browserversion, die Browsersprache und das Betriebssystem. Meines Wissens geht es wirklich nur per JS (oder evtl. auch ActiveX, da dies ja auch client-seitig ausgeführt wird).

[St.Pauli]

Ich nehme mal an das die Größe deiner Box, die du zentrieren willst, konstant ist. Dann kannst du folgendes verwenden:

Code:

position: absolute;
width:  20em; /* Nur mal als Beispiel */
height: 20em;
top:  50%;
left: 50%;
margin-left: -10em; /* minus die Hälfte der Boxgröße */
margin-top:  -10em;

[Matze]

Das entspricht ja bereits erwähntem Code, mit dem Unterschied, dass sich die horizontale-Zentrierung auch für dynamische Breiten mit CSS lösen lässt und nicht, wie bei dir, mit fester Breite. ;)