Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Gesamte Seite centern (valign und align)“

martinhahn90

Nicht mehr ganz neu hier

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.
 

martinhahn90

Nicht mehr ganz neu hier

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;
}
 
Zuletzt bearbeitet von einem Moderator:

Doitsu

Aktives Mitglied

AW: Gesamte Seite centern (valign und align)

Code:
#main { 
position: relative;
background-color: transparent; 
margin: -350px 0 0 -455px; 
position:absolute; 
top: 50%; 
left: 50%; 
width: 910px; 
height: 700px; 
}
mach daraus mal:
Code:
#main { 
background-color: transparent; 
margin:0px auto 0px auto;
width: 910px; 
height: 700px; 
}
Sollte aufs gleiche ergebnis kommen.. Glaub ich ..
 

martinhahn90

Nicht mehr ganz neu hier

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

Aktives Mitglied

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

Nicht mehr ganz neu hier

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

Nicht mehr ganz neu hier

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
 
D

douth

Guest

AW: Gesamte Seite centern (valign und align)

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

Bigmemo

Nicht mehr ganz neu hier

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

Nicht mehr ganz neu hier

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

Aktives Mitglied

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 ..
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.224
Neuestes Mitglied
Aliyah79
Oben