DIV Container zentriert über die Webseite anzeigen

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

eine Frage an euch Experten :wink:

Ich möchte einen DIV Container als Layer über meine Webseite anzegen lassen (Mit Ajax einblenden, nachdem der Benutzer auf einen Link klickt). Dazu hab ich erstmal eine freie stelle mit dem code direkt nach dem Body Tag eingefügt.

Nachdem der User auf den Link „Login“ klickt, soll ein Fenster zentriert erscheinen in dem ich eien Formular hineinlade. Der code, der in den oben genannten div Container hineingeladen wird ist folgender:

LOGIN

Username:

Kennwort:

Der Box wird also an der angegebenen absoluten Position angezeigt. Wie kann ich den Box aber zentrieren? Wenn ich in den Style oben position:center oder so eintrage, wird der Div Container nicht ÜBER der Webseite angezeigt, wie ich es will, sondern es wird ganz oben platziert und die restliche Seite rutscht nach unten. Wie krieg ich es hin, dass der Div Container über die Seite zentriert angezeigt wird? Mit tag funktioniert das auch irgendwie nicht. Die Funktion kennt ihr bestimmt von Fotogallerien, wo man euf ein verkleinertes Bild klickt und die Vergrößerung dann oben drüber angezeigt wird.

Danke schn ma für Hilfe!

#2

das zentrieren für feste grössen ist nicht schwer :smile:

<?xml version="1.0" encoding="iso-8859-1" ?>center me
/\* \<![CDATA[ \*/
html {width:100%; height:100%;}
body {width:100%; height:100%;}
#mylogin { 
position:absolute; 
width:500px; 
height:400px; 
left: 50%;
top: 50%;
margin-top: -200px;
margin-left: -250px;
background-color:#ff3300;
}
/\* ]]\> \*/
 LogMeIn

also immer top:50% left 50% und dann bei margin genau die hälte zurück gehen also bei width:500px dann margin-left:-250px.

#3

Moin,

Der code, der in den oben genannten div Container hineingeladen
wird ist folgender:

Da fehlt ja die Hälfte und die andere Hälfte ist zuviel. Typisch Stil der 1990er Jahre. Fehlerhafte Syntax, deprecated Tags, lauter Dinge, die Dir der Validator anmeckern würde, wenn Du eine Strict-Variante nehmen würdest (bedenke dass „Transitional“ für den Übergang dient und nicht für neue Websites geeignet bzw. gedacht ist).

Wie kann ich den Box aber zentrieren?

Ein Block-Element zentriert man mit „margin:0 auto“, ein Inline-Element, indem man dem Elternelement „text-align:center“ mitgibt. CSS Basics.

Wenn ich in
den Style oben position:center oder so eintrage

Oder so. Kannst ja auch eintragen „zentrieren:mitte“, das geht genauso wenig, ein „position:center“ gibts nicht. Auf gut Glück sollte man sowas nicht eintragen :smile:

Wie krieg ich es hin, dass der Div
Container über die Seite zentriert angezeigt wird?

Ggfs. brauchst u noch z-index.

Mit
tag funktioniert das auch irgendwie nicht.

ist eine Erfindung von Netscape und funktioniert nur in Netscape 4. Woher hast Du das?

Grüße,
-Efchen

#4

Moin,

diese Zentrierungsmethode ist gefährlich und sollte gar nicht verwendet werden!

Wenn nämlich der Viewport kleiner ist, als das darzustellende Element, rutscht hier der Inhalt oben bzw. links aus dem Viewport raus, wo ihn keine Scrollbalken wiederholen können! Für Menschen mit Netbooks (oder Handys, PDAs, also mit modernen Endgeräten) ist dann die Website u.U. unbenutzbar und der Besuch ist zu Ende.

Bitte das immer berücksichtigen!

Grüße,
-Efchen

#5

Danke :wink: