Homepage selbermachen 7.852 Themen, 35.619 Beiträge

DIV Box horizontal und vertikal zentrieren?

Silent Bob / 9 Antworten / Baumansicht Nickles

hallo,

ich habe eine div box mit einem hover effekt versehen. bewegt man die maus über die box, wird ein anderes bild angezeigt.

das funktioniert auch super.

aber nun soll diese box auf der seite immer genau in der mitte stehen.
horizontal und vertikal.

wie geht das? ich habe das schon über eine tabelle versucht, aber damit
scheinen sich div boxen auch nicht positionieren zu lassen.
egal was ich mache, die box steht immer links in der mitte.

hat einer ne idee?

bei Antwort benachrichtigen
Borlander Silent Bob „DIV Box horizontal und vertikal zentrieren?“
Optionen

Folgendes funktioniert zumindest mit IE und MozFire, sollte aber eigentlich auch überall anders laufen:

<div style="background-color:silver;width:200px;height:150px;margin-left:-100px;margin-top:-75px;left:50%;top:50%;position:absolute;"></div>

Die Größenangaben und Margins mußt Du natürlich an Deine gegbenheiten anpassen...

Btw.: Den Hover-Effekt auch schon mit CSS realisiert?


Gruß
Borlander
bei Antwort benachrichtigen
Silent Bob Borlander „Folgendes funktioniert zumindest mit IE und MozFire, sollte aber eigentlich auch...“
Optionen

hi,

ja den hover effekt hab ich mit css gemacht. ich kann kein javascript *g*

aber das mit der div box klappt nicht so ganz. jedenfalls versteh ich das nicht so ganz. mit der silbernen box aus deinem beispiel geht das.

aber ich habe eine box von der grösse 752px breit und 152px hoch.
und die ist jetzt total nach rechts verschoben.
was bewirken margin-left und dann die zahlen mit dem bindestrich davor?
das verstehe ich noch nicht so ganz

bei Antwort benachrichtigen
Zaphod Silent Bob „hi, ja den hover effekt hab ich mit css gemacht. ich kann kein javascript g aber...“
Optionen

margin-left: linker Abstand
Bindestrich: Minus-Zeichen, negativer Wert.
Wenn deine Box verschobe erscheint, schau mal nach, wie die Elternelemente positioniert sind ...
HTH, Z.

bei Antwort benachrichtigen
Silent Bob Zaphod „margin-left: linker Abstand Bindestrich: Minus-Zeichen, negativer Wert. Wenn...“
Optionen

ahh. ich glaube ich habe verstanden!!

wenn meine box also 752 pixel breit ist, muss sie einen linken abstand
von 50% haben, und davon muss nochmal die hälfte der breite meiner box, also 376pixel abgezogen werden, damit diese auch wirklich mittig erscheint. das gleiche gilt dann auch für oben.

okay, besten dank!

bei Antwort benachrichtigen
Borlander Silent Bob „hi, ja den hover effekt hab ich mit css gemacht. ich kann kein javascript g aber...“
Optionen
ja den hover effekt hab ich mit css gemacht. ich kann kein javascriptbild *g*
Ist auch die beste Lösung, JS dafür ein zu setzen ist mit den durch CSS vorhandenen Möglichkeiten unsinnig ;-)
bei Antwort benachrichtigen
Silent Bob Borlander „ Ist auch die beste Lösung, JS dafür ein zu setzen ist mit den durch CSS...“
Optionen

ich bin auch eher der fan von css, obwohl ich da die krise kriege wenn ich pixelgenau
positionieren will. da interpretieren IE und firefox schonmal unterschiedlich.

aber den hover effekt finde ich recht einfach zu machen.

bei Antwort benachrichtigen
Zaphod Silent Bob „ich bin auch eher der fan von css, obwohl ich da die krise kriege wenn ich...“
Optionen

Pixelgenau positionieren ist Blödsinn - du kennst weder Standardschriftgröße, Bildschirmauflösung und Fenstergröße des Benutzers. Fließendes Layout rulez :D
HTH, Z.

bei Antwort benachrichtigen
Silent Bob Zaphod „Pixelgenau positionieren ist Blödsinn - du kennst weder Standardschriftgröße,...“
Optionen

hast ja recht... ;-)

kommt nie wieder vor

bei Antwort benachrichtigen
Borlander Nachtrag zu: „Folgendes funktioniert zumindest mit IE und MozFire, sollte aber eigentlich auch...“
Optionen

Funktioniert so auch mit Opera, nur aktualisiert dieser die vertikalte Position bei Größenänderungen des Browserfensters nicht (erst bei neuladen der Seite)...

bei Antwort benachrichtigen