nicht angemeldet
DIV in der Mitte zentrieren, auch bei Scrollen
0 0 
MudGuard
DIV in der Mitte zentrieren, auch bei Scrollen
Hi Leute,
meine Ganze Frage steckt eigentlich schon im Header, aber hier nochmal etwas detailiert.
Ich arbeite an einer Seite, die mehr oder weniger einfach nur eine Liste mit Eintraegen ist. Wenn ich auf einen dieser Eintraege klicke, dann moechte ich einen DIV sichtbar machen und via JavaScript zusaetzlichen Inhalt zu diesem Eintrag in diesem DIV anzeigen lassen. Das ist bislang noch kein Problem.
Jetzt ist die Liste nur etwas laenger, d.h. man muss auch mal nach unten scrollen. Und jetzt wird mein DIV immer nur oben angezeigt (man muss hoch scrollen um da rein zu schauen). Wie krieg ich ihn auch unten zentriert?
Grober Aufbau:
<style>
div.entry
{
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
}
</style>
<body>
: Liste
<div class="entry"> Mehr Infos zur Liste </div>
Das hier http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte passt leider nicht. Waere super wenn mir jemand weiter helfen koennte. Paar Stichworte, wonach ich suchen koennte wuerden auch schon reichen.
Vielen lieben Dank!
Max
-
Hi Max,
Wenn ich auf einen dieser Eintraege klicke, dann moechte ich einen DIV sichtbar machen und via JavaScript zusaetzlichen Inhalt zu diesem Eintrag in diesem DIV anzeigen lassen. Das ist bislang noch kein Problem.
wird aber eins, wenn der jeweilige User kein JS aktiviert/ zur Verfügung hat.
Warum willst du das mit JS machen? Alternativ könntest du das auch per CSS machen (Stichwort: "CSS Tooltipps")Jetzt ist die Liste nur etwas laenger, d.h. man muss auch mal nach unten scrollen. Und jetzt wird mein DIV immer nur oben angezeigt (man muss hoch scrollen um da rein zu schauen).
Soll das DIV mit den Zusatzinformationen immer an derselben Stelle vom Viewport erscheinen (also relativ zum Browserfenster), oder in Abhängigkeit von dem Listeneintrag der gehovert/ angeklickt wird?
Wie krieg ich ihn auch unten zentriert?
Grober Aufbau:
<style>
div.entry
{
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
}
</style>
<body>
: Liste
<div class="entry"> Mehr Infos zur Liste </div>Bedenke, dass sich die absolute Positionierung eines Elements immer auf das nächsthöhere relativ positionierte bezieht. Gibt es kein solches, ist der Bezugspunkt das Wurzel-Element (Root), also meist das html-Element.
Gruß Gunther
-
Hi,
Bedenke
besser nicht
, dass sich die absolute Positionierung eines Elements immer auf das nächsthöhere relativ positionierte bezieht.
denn das ist falsch.
Basis für die absolute Positionierung ist das nächste Vorfahrenelement, das nicht static positioniert ist (bei dessen Fehlen der Viewport).cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hi Andreas,
Bedenke
besser nicht
, dass sich die absolute Positionierung eines Elements immer auf das nächsthöhere relativ positionierte bezieht.
denn das ist falsch.
richtig!
Basis für die absolute Positionierung ist das nächste Vorfahrenelement, das nicht static positioniert ist (bei dessen Fehlen der Viewport).
Ich glaube, ich gehe jetzt lieber ins Bett.
Gute Nacht & Dank für die Korrektur!
Gruß Gunther
-
-