nicht angemeldet
Ausrichtung unten rechts
Moin,
da es auf meine letze Nachricht noch keine Reaktionen gab, probiere ich es mal mit einem Beispiel:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.untenrechts { background-color:#FF0000; position:fixed; bottom:16px; right:16px; width:16px; height:16px}
</style>
</head>
<body>
text
<a href="weiter" class="untenrechts"></a>
</body>
</html>
Der Link in Form des roten Quadrats soll rechts unten erscheinen.
Das funktioniert im Opera, Mozilla und im Konqueror auch, der Internet Explorer macht aber genau das Gegenteil oder positiert das Element eben gar nicht.
Gibt es eine Variante, die auch der Internet Explorer versteht?
Die horizontale Ausrichtung läßt sich für alle Browser leicht mit einer Tabelle realisieren- welche möglichkeiten gibt es für die vertikale Ausrichtung?
Die vertikale Ausrichtung mit einer Tabelle (hier würde ich um den Seiteninhalt eine Tabellenzelle, etwa mit style="height:90%" basteln ) hat den Nachteil, daß sie einer Positionierung von oben entspricht und bei einer ungünstigen Kombination aus Browser und Fenstergröße eine häßliche Scrollbar erscheint, mit der sich die Seite um zwei Pixel nach unten ziehen läßt. Gibt es hier die Möglichkeit einer echten Ausrichtung von unten?
Jetzt habe ich aber ein noch größeres Problem: obiges Beispiel führt nur dann zu guten Resultaten, wenn der Text auf der Seite nicht zu lang ist- ansonsten entstehen häßliche Überlagerungseffekte. Das rote Quadrat soll immer unterhalb des Textes stehen (also mitscrollen). Kann man das Element vielleicht am Body ausrichten?
Danke für Eure Hilfe,
Martin
-
Hallo,
der Internet-Explorer versteht das 'fixed' nicht. Da solltest Du 'absolute' nehmen. Weiß aber nicht, wie die anderen Browser darüber 'denken'.
HTH
Gruß Frank-
Moin,
Da solltest Du 'absolute' nehmen. Weiß aber nicht, wie die anderen Browser darüber 'denken'.
Diese Variante funktioniert im Mozilla, Internet Explorer und Opera, im Opera allerdings nicht ganz so genau, d.h. mit mehr Abstand vom Rand als bei den anderen Browsern.
Das ganze sieht aber nur so lange gut aus, wie der Inhalt der Seite kleiner ist als das Fenster. Öffnet man die Seite jetzt, sieht es -wenn man von Überlagerungen absieht- gut aus, scrollt man nach unten, befindet sich das Quadrat weiter oben auf der Seite.
Ich möchte, daß das Quadrat erst dann sichtbar wird, wenn man nach ganz unten gescrollt hat. Gibt es da nicht eine Möglichkeit? Vielleicht eine Ausrichtung am Body?
Danke für Eure Hilfe,
Martin-
Hallo Martin,
wenn Du den Bereich am body ausrichten willst, probiere: position:relative;
HTH
Gruß Frank-
Moin,
wenn Du den Bereich am body ausrichten willst, probiere: position:relative;
<style type="text/css">
.untenrechts { background-color:#FF0000; position:relative; bottom:16px; right:16px; width:16px; height:16px}
</style>So?
Jetzt steht das Quadrat im Internet Explorer je nach Fenstergröße an beliebiger Stelle- mal mitten auf der Seite, aber nie rechts dafür aber oft am Ende des Textes.
Opera und Mozilla zeigen das rote Quadrat in dieser Version überhaupt nicht an.
Ist denn irgendwo vom w3c definiert bis wohin das body-Element reicht? Um den gesamten Seiteninhalt- soviel ist schon mal sicher, aber was ist, wenn die Seite das Fenster nicht ausfüllt- reicht body bis zum unteren Fensterrand oder bis zum Ende des Inhalts? Der Internet Explorer verwendet wohl die letztere Interpretation und plaziert das Quadrat im Abstand von 16 über dem letzten Wort.
Vielleicht weißt Du noch eine bessere Lösung?
Danke,
Martin-
Hallo Martin,
Ist denn irgendwo vom w3c definiert bis wohin das body-Element reicht?
Du kannst ja sagen body:height:100%; width:100%
HTH
Gruß Frank-
Moin,
Du kannst ja sagen body:height:100%; width:100%
kann ich, das hat aber keinen Einfluß.
So sieht das Beispiel jetzt aus:<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body { height:100%; }
.untenrechts { background-color:#FF0000; position:relative; bottom:16px; right:16px; width:16px; min-width:16px; height:16px}
</style>
</head>
<body>
ganz viel text
<a href="weiter" class="untenrechts"> </a></body></html>
^^^^^^Mit dem Non-Breaking-Space erreicht man, daß das Element im Mozilla und im Opera überhaupt angezeigt wird- die Verwendung von min-width und width hat jedoch keinen Einfluß- hat jemand Ahnung woran das liegt?
Das Problem tritt nur bei position:relative auf, bei absolute und fixed ist das Element genau 16 breit.
Obwohl ich die Angabe body { height:100%; } gemacht habe, reicht der body nicht bis an den unteren Fensterrand- das Elemnt wird in allen Browsern immer noch über dem letzten Element angezeigt.
Welche Möglichkeiten gibt es, das Problem zu beseitigen?
Danke für Eure Hilfe,
Martin
-
-
-
-
-