Positionierung
Jürgen Berkemeier
- css
Hallo,
ich möchte ein Element (einen Link) so positionieren, dass er ganz unten im Browserfenster erscheint, wenn das Fenster groß genug ist, und sonst am Ende des Textes. Aber mit "<div style="position:absolute; bottom:10px;">Link</div>" erscheint der Text immer 10px über dem unteren Fensterrand. Sehen kann man das ganze auch unter http://www.uni-muenster.de/Physik/AP/Purwins/. Wie schaffe ich es, dass der Link bei kleinen Browserfenstern am Ende der Seite erscheint und mitscrollt, bei großen Fenstern aber ganz unten steht?
Gruß, Jürgen
Hallo,
ich möchte ein Element (einen Link) so positionieren, dass er ganz unten im Browserfenster erscheint, wenn das Fenster groß genug ist, und sonst am Ende des Textes. Aber mit "<div style="position:absolute; bottom:10px;">Link</div>" erscheint der Text immer 10px über dem unteren Fensterrand. Sehen kann man das ganze auch unter http://www.uni-muenster.de/Physik/AP/Purwins/. Wie schaffe ich es, dass der Link bei kleinen Browserfenstern am Ende der Seite erscheint und mitscrollt, bei großen Fenstern aber ganz unten steht?
Gruß, Jürgen
Hallo Jürgen ich würde das einfach mit PHP oder ASP machen (dynamisch) und zwar mit einer if Abfrage. Hmm mit JS müßte das auch gehen, einfach die Fenstergröße (browser) abfragen und demnach handeln.
lg
Dimitri
Hallo Jürgen ich würde das einfach mit PHP oder ASP machen (dynamisch) und zwar mit einer if Abfrage. Hmm mit JS müßte das auch gehen, einfach die Fenstergröße (browser) abfragen und demnach handeln.
was willst du mit php oder asp abfragen? wie soll sowas funktionieren?
Hallo,
Javascript geht hier nicht, da der Link genau dann benötigt wird, wenn der Besucher Javascript abgeschaltet hat. PHP o.ä. kommt nicht in Frage.
Gruß, Jürgen
Hallo Jürgen,
wenn ich das jetzt richtig versatnden habe, dann soll der Link immer am Ende des Gesamt-Fensters kleben und nicht 10px über dem unteren Rand des sichtbaren Teiles?
Dann müsstest Du die DIVs nur sauber schachteln. Das hat bei mir immer funktioniert. Mich würde das nun aber mal interessieren, wie Du das hinbekommen hast, dass Die unteren Links immer 10px über dem unteren Fensterrand kleben.
Liebe Grüße aus http://www.braunschweig.de
Tom
Hallo,
mit <div style="position:absolute; bottom:10px;"> klebt er immer 10px über dem unteren Fensterrand, auch wenn die Seite länger als das Fenster ist. Er hängt dann mitten im Text. In diesem Fall soll er aber am Ende der Seite unter dem Text stehen.
Gruß, Jürgen
Hallo Jürgen,
hast Du denn ein Div um die ganze Seite drum herumgelegt?
<div>
<div ID="obererSeitenteil">
Hier steht der normale Wahnsinn der Seite drin
</div>
<div ID="linkAmUnterenRand" style=".....">
<a href="...">bla</a>
</div>
</div>
Liebe Grüße aus http://www.braunschweig.de
Tom
Hallo Jürgen,
das hat mir nun auch keine Ruhe gelassen und ich habe noch ein wenig gebastelt.
Die Richtung stimmt so schon, aber so ganz hab ich's auch noch nicht durchschaut:
<html>
<head>
</head>
<body>
<div ID="seitenrahmen"
style="position:absolute;
top:10px;
height:100%;
width:400px;
background-color:#FCC;">
<p ID="obererSeitenteil"
style="witdh:100%; height:100%;
background-color:#CFC;">
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
</p>
<p ID="link">
<a href="...">blabla</a>
</p>
</div>
</body>
</html>
Liebe Grüße aus http://www.braunschweig.de
Tom
Und nochmal ich, hallo,
<head>
</head>
<body>
<div ID="seitenrahmen"
style="position:absolute;
top:10px;
height:97%; /* wegen des Statusleisten-Bugs im Explorer */
width:400px;
background-color:#FCC;">
<p ID="obererSeitenteil"
style="witdh:100%;
background-color:#CFC;">
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
Hier steht der normale Wahnsinn der Seite drin<br />
</p>
<!--
</p ID="spacer"
style="position:absolute;
height:5px;"></p>
-->
<p ID="link"
style="witdh:100%;
background-color:#CCF;
position:absolute;
height:40px;
bottom:5px;">
<a href="..."
style="position:absolute;
height:35px;
top:25px;"
>blabla</a>
</p>
</div>
</body>
</html>
Grüße aus http://www.braunschweig.de
Tom
Hallo Tom,
genau so sollte es sein, Danke.
Gruß, Jürgen