nicht angemeldet
Div immer mittig des Browserfensters ausrichten (fixed?)
Hallo,
ich versuche gerade ein DIV ("Bitte warten" Anzeige) mittig im Browserfenster auszurichten. Das ist soweit kein Problem.
Der DIV-Container ist beim Seitenaufbau unsichtbar und wird wenn man auf einen Link klickt sichtbar gemacht (soweit auch alles kein Problem).
Nun hätte ich es gerne so, dass das DIV immer mittig zentriert wird.
Dies ist zur Zeit nur der Fall wenn ich mich ganz oben auf der Seite befinde. Wenn ich nach unten scrolle (und dort einen Link betätige der das DIV einblendet) erscheint es nicht mehr mittig.
Ich denke man müsste es via Javascript neu ausrichten? Ich habe hier schon ein bißchen herumprobiert, bin aber zu keinem brauchbaren Ergebnis gekommen.
Ist der Ansatz denn richtig? Wer kann mir ein paar 'Pointers' in die richtige Richtung geben wie ich das angehe?
-
Hallo,
ich versuche gerade ein DIV ("Bitte warten" Anzeige) mittig im Browserfenster auszurichten. Das ist soweit kein Problem.
wie hast du es denn gemacht?
Der DIV-Container ist beim Seitenaufbau unsichtbar und wird wenn man auf einen Link klickt sichtbar gemacht (soweit auch alles kein Problem).
und wie hast du das gemacht?
Nun hätte ich es gerne so, dass das DIV immer mittig zentriert wird.
,egal ob ... [to be continued]
Dies ist zur Zeit nur der Fall wenn ich mich ganz oben auf der Seite befinde. Wenn ich nach unten scrolle (und dort einen Link betätige der das DIV einblendet) erscheint es nicht mehr mittig.
also oben doch ein Problem...
Ich denke man müsste es via Javascript neu ausrichten? Ich habe hier schon ein bißchen herumprobiert, bin aber zu keinem brauchbaren Ergebnis gekommen.
und wenn der User JS deaktiviert hat?
Ist der Ansatz denn richtig? Wer kann mir ein paar 'Pointers' in die richtige Richtung geben wie ich das angehe?
Mein Tipp: Benutze CSS und die Suche hier im Forum oder bei Google & Co.
Stichwort(e): "horizontal vertikal zentrieren"Das ist ein häufig vorkommendes Thema, sodass es nicht schwer sein sollte, etwas passendes zu finden.
Gruß Gunther
--
c't Wettbewerb: SEO «» Search Engine Optimization «» Suchmaschinenoptimierung-
Hallo,
ich versuche gerade ein DIV ("Bitte warten" Anzeige) mittig im Browserfenster auszurichten. Das ist soweit kein Problem.
wie hast du es denn gemacht?
Das habe ich so gemacht:
<div id="loading" style="display:none;position:absolute;top:50%;left:50%;width:0;height:0;">
<div style="position:relative;top:-2.5em;left:-10em;width:20em;height:5em;border:3px solid #D63333;background:#EEEEEE;z-index:10;">Bitte warten... ihre Suchanfrage wird bearbeitet.
</div>
</div>Der DIV-Container ist beim Seitenaufbau unsichtbar und wird wenn man auf einen Link klickt sichtbar gemacht (soweit auch alles kein Problem).
und wie hast du das gemacht?
[...] onClick="document.getElementById('loading').style.display='inline';"
und wenn der User JS deaktiviert hat?
Ist denke ich nicht so schlimm, da es nichts an der Funktionalität der Website ändern. Konkret: Da die Datenbankabfragen so lange dauern will ich an bestimmten Stellen nur einen Hinweis einblenden dass sich was tut. Wenn der User JS deaktiviert hat bekommt er diesen zusäztlichen Hinweis halt nicht zu sehen.
Mein Tipp: Benutze CSS und die Suche hier im Forum oder bei Google & Co.
Stichwort(e): "horizontal vertikal zentrieren"Das ist ein häufig vorkommendes Thema, sodass es nicht schwer sein sollte, etwas passendes zu finden.
Ja, dazu findet man wirklich viel. Ich habe mir auch schon einen Ast abgegoogelt ;-)
Die Ausrichtung an sich funktioniert ja auch (siehe Code-Snippet oben). Mein Problem ist - und an der Stelle komme ich immer nicht weiter - dass sobald ich nach unten scrolle es nicht mehr mittig ausgerichtet ist. Es müsste im Prinzip "position:fixed" sein (was mit Firefox ja auch problemlos geht, aber im IE wiederum nicht).
Da das DIV aber ja nicht die ganze Zeit sichtbar "fixed" sein muss, sondern nur in dem Moment in dem man auf den Link klickt - dachte ich könnte man es vielleicht via Javascript neu ausrichten und mittig zentrieren (das würde reichen!)......?
p.s.: der "IE7-CSS-Fixed-Position-Hack" für den IE (http://dean.edwards.name/IE7/) hat irgendwie nicht funktioniert damit position:fixed im IE funktioniert...
-
hi,
Die Ausrichtung an sich funktioniert ja auch (siehe Code-Snippet oben). Mein Problem ist - und an der Stelle komme ich immer nicht weiter - dass sobald ich nach unten scrolle es nicht mehr mittig ausgerichtet ist. Es müsste im Prinzip "position:fixed" sein (was mit Firefox ja auch problemlos geht, aber im IE wiederum nicht).
Dafür gibt's ja Workarounds. (Würde ich hier aber auch nicht benutzen, da idR. Änderungen an der Struktur von Nöten sind.)
Da das DIV aber ja nicht die ganze Zeit sichtbar "fixed" sein muss, sondern nur in dem Moment in dem man auf den Link klickt - dachte ich könnte man es vielleicht via Javascript neu ausrichten und mittig zentrieren (das würde reichen!)......?
Ja, mach das.
Lies die aktuelle Scrollposition der Seite aus, und berechne dir danach die Position, an welche du das Element platzieren musst.pageYOffset ist der Einstieg, und wenn das nicht browserübergreifend das richtige Ergebnis liefert, dann hilft die Seite http://www.quirksmode.org/ weiter.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi,
Ja, mach das.
Lies die aktuelle Scrollposition der Seite aus, und berechne dir danach die Position, an welche du das Element platzieren musst.pageYOffset ist der Einstieg, und wenn das nicht browserübergreifend das richtige Ergebnis liefert, dann hilft die Seite http://www.quirksmode.org/ weiter.
Danke! Der pageYOffset Hinweis war glaube ich das was ich gesucht habe.
Werde versuchen damit was entsprechendes zu basteln :-)Gruß,
Baddel
-
-
Hallo,
meine erste Antwort war nicht so "böse" gemeint, wie man sie vielleicht auffassen kann. Dank deiner zusätzlichen Infos sehe ich jetzt klarer ;-)
Da das DIV aber ja nicht die ganze Zeit sichtbar "fixed" sein muss, sondern nur in dem Moment in dem man auf den Link klickt - dachte ich könnte man es vielleicht via Javascript neu ausrichten und mittig zentrieren (das würde reichen!)......?
Was ich jetzt noch nicht verstanden habe ist, wie lange das Div mit der Meldung denn jetzt eigentlich zu sehen ist?
Wenn der Link, der es beim anklicken einblendet, eine neue Seite lädt, verschwindet das Div doch sofort wieder?Die Ausrichtung an sich funktioniert ja auch (siehe Code-Snippet oben). Mein Problem ist - und an der Stelle komme ich immer nicht weiter - dass sobald ich nach unten scrolle es nicht mehr mittig ausgerichtet ist. Es müsste im Prinzip "position:fixed" sein (was mit Firefox ja auch problemlos geht, aber im IE wiederum nicht).
Daraus folgernd könntest du es ja auch so machen:
- mit position:fixed für Browser, die das verstehen
- mit JS (wie wahsaga auch schon geschrieben hat) für die IEs
Gruß Gunther
-
Hi,
meine erste Antwort war nicht so "böse" gemeint, wie man sie vielleicht auffassen kann. Dank deiner zusätzlichen Infos sehe ich jetzt klarer ;-)
Passt schon :)
Was ich jetzt noch nicht verstanden habe ist, wie lange das Div mit der Meldung denn jetzt eigentlich zu sehen ist?
Wenn der Link, der es beim anklicken einblendet, eine neue Seite lädt, verschwindet das Div doch sofort wieder?Ja, stimmt. Aber der Server braucht an der Stelle wo ich das Div einblenden möchte verhältnismäßig lange zum Antworten. In der Regel vergehen da schon so ca. 3 bis 5 Sekunden bis die neue Seite überhaupt geladen wird (und so lange würde dann ja auch das Div erscheinen).
Weiß nicht genau woran es liegt, aber an der Stelle wird eine Volltextsuche auf einer etwas größeren Datenbank erledigt und der Datenbank Server dazu steht Offsite, sprich ausgelagert bei nen anderen Provider in einem anderen RZ (aus Kostengründen). Wahrscheinlich dauert es deshalb so lange. Alles nur suboptimal, aber das ist wohl nen anderes Thema.Daraus folgernd könntest du es ja auch so machen:
- mit position:fixed für Browser, die das verstehen
- mit JS (wie wahsaga auch schon geschrieben hat) für die IEs
Ja, werde ich wohl so angehen...
-
-