Div mittig im Sichtfeld
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
browser
code
ding
eigenschaft
ersten schicht
festen stelle
index
kleiner tipp
leute
machen
menge
mitte
objekt
page
plazieren
position
relative position
sichtfeld
webseite
zweite schicht
-
Hallo Leute
Ich möchte ein Div immer in der Mitte des Bildschirms haben, egal bis wo hin man gescrolt hat... das Div dient als Meldungspopup. Quasi wie eine Windowsmeldung... die sind ja auch immer mitte mitte...
Wie macht man sowas???
PS: Google hab ich schon gefragt, aber nich so wirklich das gefunden, was ich wollte
Gruß
Technofan -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du machst folgende Definition im CSS-Bereich (angenommen, das Feld ist 200px breit und 100px hoch):
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
Das sollte reichen. Die margin-Definitionen müssen jeweils die Hälfte von Höhe/Breite sein ;)
Beitrag geändert: 7.8.2008 14:29:06 von merovius -
aber, dann isses ja wirklich mittig auf der Page... ich wills aber mittig im Sichtfeld... so wie du hatte ichs auch.. Da meine HP aber live ist, wird se net refresht also bleibt man mim scrollbalken auf der Position... und das Div klebt an ner Festen Stelle mitten drinne.
-
aber, dann isses ja wirklich mittig auf der Page... ich wills aber mittig im Sichtfeld...
Bitte was? Was ist der Unterschied?
Was ich dir da gegeben habe, sollte genau das bewirken, was du verlangst, ein Div, welches in der Mitte des Sichtbereiches ist, ganz egal, wohin man scrollt.
Da meine HP aber live ist, wird se net refresht also bleibt man mim scrollbalken auf der Position... und das Div klebt an ner Festen Stelle mitten drinne.
Ich denk, das willst du? Dass das Ding an ner festen Stelle ist? Also, entweder verstehst du meine Lösung nicht, oder ich dien Problem nicht... -
das ding is an ner Festen stelle, das stimmt... es soll aber, wenn man scrolt mitwandern... und das teil ist immer an der selben stelle... es verschwindet also, wenn ich scrole...
das soll sich quasi an den Hardwarerand orientieren nicht am Browserrand
Beitrag geändert: 7.8.2008 15:17:22 von technofan -
Hab das mal ausprobiert, schau dir mal:
http://merovius.lima-city.de/div.html
an. Getestet mit FF3, Opera 9.5, Safari 3.1.2 alles ein Ergebnis, wie du es dir glaube ich vorstellst, einzig IE7 spinnt, aber das ist ja typisch IE und könnte möglicherweise auch einfach am Inline-Style liegen und sich durch eine Auslagerung beheben lassen (probier ich gleich mal aus).
Quelltext:
<html> <head> </head> <body> <div style="width: 200px; height: 100px; position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -50px; background: #FF0000;"></div> test<br> <!-- Viele Testzeilen --> </body> </html>
[edit] Okay, der IExplorer stellt sich tatsächlich quer, aber in allen anderen BRowser funktioniert das perfekt. Iexplorer macht aber bekanntlich des öfteren Schwierigkeiten.
Eine Alternative wäre, die ganze Zeite in ein Div-Element zu packen, mit dem Tag
overflow: auto;
Und dann meine obige Lösung nur mit
position: absolute;
zu nehmen, das sollte auch gehen... ist aber weniger elegant.
[edit2] Übrigens: Verstehe ich dich jetzt richtig, hab mir das gerade nochmal durchgelesen, dass z.B. das Ding auch fest bleiben soll, wenn man den BRowser verschiebt? Das müsstest du mit Javascript machen, es gibt Eigenschaften, die dir die Position des BRowsers angeben und dann kannst du die relative Position innerhalb des Browserfensters dazurechnen.... ist aber imho unendlich kompliziert, das Browserunabhängig zum Laufen zu bringen, weil verschiedene Browser mit diesen Eigenscahften, wenn es um Fensterposition etc. geht immer unterschiedlich umgehen.
[edit3] Ist übrigens imho auch nicht besonders sinnvoll... Bezweifel ernsthaft, dass das gehen wird, wird immer ne Menge Leute geben, bei denen das nicht geht (z.B. benutze ich zwie Monis, bei mir kann ich dir garantieren, dass das Div nicht angezeigt werden würde...). Es reicht doch, wenn es immer im Browserfenster zu sehen ist?
Beitrag geändert: 7.8.2008 15:34:55 von merovius -
na ja, ich habs jetzt auf ne Methode gemacht, die bei jedem gleich aussieht... alert() XD
weil ich ne HP ham will, die bei jedem gleich aussieht... -
Kleiner Tipp: mit z-index legst du sozusagen eine zweite Schicht auf die Webseite. Dort kannst du Objekte unabhängig von der ersten "Schicht" platzieren.
Grüße, Moritz -
Kleiner Tipp: mit z-index legst du sozusagen eine zweite Schicht auf die Webseite. Dort kannst du Objekte unabhängig von der ersten "Schicht" platzieren.
Grüße, Moritz
danke... aber scheint auch nicht so recht zu klappen, deshalb bleibe ich wohl bei alert()
aber hab dazu noch ne Frage.... kann man da auch Bilder einfügen??? also ins alert()... geht das?
wenn ja wäre das geil ^^ -
ich schätz mal du willst irgend ein Infofenster über deine Website legen... oder?
Dazu gäbs auch eine Menge AJAX Lösungen die optisch viel besser aussehen!
Google einfach mal danach, findet sich sicher einiges! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
