Gesamte Seite centern (valign und align)

[martinhahn90]

Servus Jungs,

nachdem ihr mir zuletzt schon sehr gut bei der Galerie geholfen habt (danke nochmals!), habe ich nun ein Folgeproblem: Ich stehe vor der Aufgabe, eine Seite komplett im Browserfenster zu zentrieren, sowohl vertikal als auch horizontal.

Wie das früher bei Tabellen ging, das weiß ich noch. Das war gar kein Problem dank des Attributs "valign". Nun ist es mit den DIVs aber etwas komplizierter und ich habe es noch nicht wirklich hinbekommen...

Habt ihr einen Rat, wie ich die gesate Seite von der Höhe her zentrieren kann? Die Breite ist nicht das Problem, das habe ich bereits hinbekommen.

 

[Herr_D]

AW: Gesamte Seite centern (valign und align)

auch schon x-Mal hier besprochen...


Cascading Style Sheets { Tutorials : Zentrieren eines Block-Level-Elements }

 

[martinhahn90]

Sorry dafür, aber hatte sogar vorher die SuFu genutzt, nur nichts gefunden. Als ich "valign center" eingab, kamen keine Ergebnisse - oder ich war zu blöd sie zu sehen.

Danke für den Link und sorry für das wiederholte Fragen.

Edit hsagt, sie hat den Fehler gefunden. Hätte halt im Forum und nicht auf dem Portal suchen sollen...

Klappt soweit wunderbar, aber (und dazu fand ich nichts in der Suche) wenn die BIldschirmauflösung zu gering ist, schneidet er "on top" etwas ab, in meinem konkreten Beispiel wäre es dann ein Teil des Logos...argh.

Es sieht auf einem Rechner mit hoher Auflösung super aus vom Zentrieren her, doch mit meiner Auflösung (1280 x 800) geht es leider nicht.

Habt ihr da noch Abhilfen? Overflow: visible; funzt nicht.

->

CSS-Code für den umschließenden DIV-Tag:
#main {
position: relative;
background-color: transparent;
margin: -350px 0 0 -455px;
position:absolute;
top: 50%;
left: 50%;
width: 910px;
height: 700px;
}

 

[Doitsu]

AW: Gesamte Seite centern (valign und align)

#main { 
position: relative;
background-color: transparent; 
margin: -350px 0 0 -455px; 
position:absolute; 
top: 50%; 
left: 50%; 
width: 910px; 
height: 700px; 
}

mach daraus mal:

#main { 
background-color: transparent; 
margin:0px auto 0px auto;
width: 910px; 
height: 700px; 
}

Sollte aufs gleiche ergebnis kommen.. Glaub ich ..

 

[martinhahn90]

AW: Gesamte Seite centern (valign und align)

Da hast du Recht, da kommt FAST das selbe bei rum. Oben ist noch ein kleiner Abstand (stört aber nicht, im Gegenteil) udn unten habe ich gleichviel Abstand. Allerdings sagte mit ein Kollege mit größerer Auflösung, er habe unten deutlich mehr Abstand. hmmm...

 

[Doitsu]

AW: Gesamte Seite centern (valign und align)

Na ja, beim Vertikal ausrichten geht so nicht, allerdings is das problem bei der ersten variante: Wenn die aufloesung kleiner ist, als das auszurichtende Objekt, wird es halt nach oben abgeschnitten.. Wie du ja gesehen hast.
Ansonsten koenntest du bei margin fuer den top-Wert (der erste) noch ein wenig dazu machen.. Damit es bei hohen aufloesungen nicht ganz soviel unten ist, und bei kleinen oben ein (noch groesserer) Abstand ist..

 

[martinhahn90]

AW: Gesamte Seite centern (valign und align)

Wenn ich es an eine Auflösung von 1280x800 anpasse, sodass oben nur 3px Platz sind (ca.), sieht es aber mit einer abcx1024er Auflösung schon so aus:


Relativ übel also. Ich kenne eine Seite, die ist komplett gecentert, aber ich finde einfach nicht den entsprechenden Code:
Ulrich Hoppe Fotografie/

 

[Bigmemo]

AW: Gesamte Seite centern (valign und align)

...
ich denke die Seite wird per JS zentriert...zuerst wird die Fenstergrösse des Benutzers ermittelt und danach kann man ja durch absolute Positionirung oben und unten bestimmen...

Bigmemo

 

[douth]

AW: Gesamte Seite centern (valign und align)

also soweit ich weiß geht das vertikale zentrieren ohne javascript mit reinem css nicht?!

 

[Bigmemo]

AW: Gesamte Seite centern (valign und align)

Hallo,

JS = JavaScript
ausserdem sollte die eigene Höhe(ein DIV-Element um den content) auch ermittelbar sein...

Bigmemo

 

[martinhahn90]

AW: Gesamte Seite centern (valign und align)

Danke Jungs, habe nun tausende CSS-Varianten probiert, die alle angeblich funktionieren. Fakt ist aber: Es bleibt das Problem, dass es nicht zentriert wird oder bei geringer Auflösung einfach etwas abgeschnitten wird.

Nun sagt ihr, das ganze müsse via JavaScript gehen. Klingt soweit ganz klasse, nur habe ich davon noch weniger Ahnung, als von dem Rest...

 

[Doitsu]

AW: Gesamte Seite centern (valign und align)

Na ja, mit document.body.clientWidth/Height die groesse vom Body auslesen, und dann damit dann den Div ausrichten..
Nachteil: Da Javascript beim Aufbau der Seite ausgefuehrt wird, ist es danach nicht mehr veraenderbar..
wie das ganze jetzt genau auszusehen hat.. kA, aber mich wuerde ein grosser Rand unten auch nicht weiter stoeren, weil es halt unten ist.. Oben waere es unschoen, ja.. Aber unten.. Was solls. Musst du wissen wie gross der nutzen -> aufwand unterschied ist ..