Horizontalees Scrollen und Element am rechten Rand

[JürgenB]

Hallo alle,

mit folgender Konstruktion klebe ich ein Element an den rechten Rand des Browserfensters:

<p style="position:absolute;right:5px;width:100px"><a href="http://www.example.de" title="Zur Example-Seite"><img src="example.gif" width="100" height="102" alt="Logo Example"></a></p>

Leider klebt das Element wirklich am rechten Rand des Browserfensters, nicht aber, wie ich es möchte, am rechten Seitenrand. Denn wenn wegen großer Schrift oder kleinem Browserfenster ein horizontaler Scrollbalken auftritt, wird das Element in die Mitte der Seite gescrollt. Ich möchte aber, das es sich immer am rechten Seiterand befindet und reingescrollt werden kann.

Zu sehen ist das Problem z.B. hier: http://www.j-berkemeier.de/Ritzelrechner.html. Sowohl der blaue Balken als auch das Bild etwas weiter unten sind betroffen.

Kann mir jemand einen Tipp geben, wie ich absolut positionierte Elemente an den rechten Seitenrand bringen kann?

Danke und viele Grüße, Jürgen

PS Ich habe das jetzt im FF2 und im IE7 beobachtet.

[gaby]

mit folgender Konstruktion klebe ich ein Element an den rechten Rand des Browserfensters:

<p style="position:absolute;right:5px;width:100px"><a href="http://www.example.de" title="Zur Example-Seite"><img src="example.gif" width="100" height="102" alt="Logo Example"></a></p>

Leider klebt das Element wirklich am rechten Rand des Browserfensters, nicht aber, wie ich es möchte, am rechten Seitenrand.

Hi,
Dann gib ihm 'float: right' anstatt 'position: absolute'.

Im HTML-Quellcode mußt du dann auch noch diese Float-Box _vor_ die Inhalts-Box stellen.

Grüße
gaby

[JürgenB]

Hallo gaby,

Dann gib ihm 'float: right' anstatt 'position: absolute'.

fast kein Unterschied. Es hängt immer noch am Browserrand und nicht am Seitenrand.

Gruß, Jürgen

[wahsaga]

hi,

Kann mir jemand einen Tipp geben, wie ich absolut positionierte Elemente an den rechten Seitenrand bringen kann?

In dem du die absolute Positionierung nicht auf den Viewport Bezug nehmen lässt, sondern auf ein anderes Element.

gruß,
wahsaga

[JürgenB]

Hallo wahsaga,

Kann mir jemand einen Tipp geben, wie ich absolut positionierte Elemente an den rechten Seitenrand bringen kann?

In dem du die absolute Positionierung nicht auf den Viewport Bezug nehmen lässt, sondern auf ein anderes Element.

und wie mache ich das? Und welches Element nehme ich da? Ich habe html und body auf width:100% gesetzt, kein Erfolg. Ich habe den Inhalt in ein zusätzliches div gepackt. Kein Effekt, das div und der body sind so breit wie der Viewport, der Inhalt geht aber über den rechten Rand hinaus.

Gruß, Jürgen

[wahsaga]

hi,

In dem du die absolute Positionierung nicht auf den Viewport Bezug nehmen lässt, sondern auf ein anderes Element.

und wie mache ich das?

In dem du in SELFHTML bzgl. absoluter Positionierung mal nachliest?

Und welches Element nehme ich da? Ich habe html und body auf width:100% gesetzt, kein Erfolg.

Was sollte das bringen?

Ich habe den Inhalt in ein zusätzliches div gepackt. Kein Effekt, das div und der body sind so breit wie der Viewport, der Inhalt geht aber über den rechten Rand hinaus.

Angaben bzgl. overflow gemacht, explizite Breitenangabe?

gruß,
wahsaga

[JürgenB]

Hallo wahsaga,

In dem du in SELFHTML bzgl. absoluter Positionierung mal nachliest?

Du meinst:

absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat. Scrollt mit.

Das nächsthöhere wäre der body. Auf die Idee, den überhaupt und dann auch noch absolut zu positionieren, wäre ich nie gekommen. Zumindestens auf meiner Testseite scheint es zu funktionieren.

http://www.j-berkemeier.de/test/Rechts_Test.html

Werde morgen mal prüfen, ob es auf den eigentlichen Seiten auch geht.

Danke und Gruß, Jürgen

[wahsaga]

hi,

Das nächsthöhere wäre der body. Auf die Idee, den überhaupt und dann auch noch absolut zu positionieren, wäre ich nie gekommen.

Ich auch nicht.
Warum absolute, warum nicht relative?

gruß,
wahsaga

[JürgenB]

Hallo wahsaga,

Warum absolute, warum nicht relative?

keine Ahnung. Vieleicht weil es in der Doku oben steht.
Aber ist das in diesem Fall nicht egal? Bringt relativ irgendwelche Vorteile?

Gruß, Jürgen

PS Ich habe es jetzt in meine Seiten eingebaut und es scheint zu funktionieren.

[wahsaga]

hi,

Warum absolute, warum nicht relative?

keine Ahnung. Vieleicht weil es in der Doku oben steht.

Wo, in SELFHTML?
Da steht "vom Default static abweichend".

Aber ist das in diesem Fall nicht egal? Bringt relativ irgendwelche Vorteile?

Absolute kann diverse Nachteile haben.

gruß,
wahsaga

[JürgenB]

Hallo wahsaga,

Wo, in SELFHTML?
Da steht "vom Default static abweichend".

na und absolute war eben in der Liste das erste von static abweichende. Da ich nicht verstehe, warum ich den Body überhaupt positionieren muss, habe ich eben das erste genommen. Und da die reguläre Position des Bodys doch (0,0) ist, dürften relativ und absolute ohne left und top (heißt dann doch beide sind 0) keine Unterschied machen.

Absolute kann diverse Nachteile haben.

was ich im Moment noch nicht verstehe. Bei beiden Positionierungen wird der Body doch aus seiner normalen Position, dem Nullpunkt, geschoben. Ob absolut oder relativ sollte in diesem Fall doch egal sein.

Gruß, Jürgen

[Detlef G.]

Hallo Jürgen

was ich im Moment noch nicht verstehe. Bei beiden Positionierungen wird der Body doch aus seiner normalen Position, dem Nullpunkt, geschoben.

Nein, bei position:relative bleibt es im Elementfluss, es verhält sich genauso, wie beim Defaultwert position:static (reserviert den nötigen Platz, richtet seine Breite nach dem Elternelement aus, margin/padding des Elternelements werden berücksichtigt) und wird _nur_ verschoben (falls von 0 abweichende Angaben zur Position gemacht werden).
Bei position:absolute wird es praktisch aus dem Dokument entfernt und an der angegeben Position wieder draufgeklebt (wie ein Aufkleber). Es ist für den Rest der Seite praktisch nicht mehr vorhanden. Auch seine Breite richtet sich nicht mehr nach der des Elternelements sondern nach seinem Inhalt.

Ob absolut oder relativ sollte in diesem Fall doch egal sein.

In deinem speziellen Fall _kann_ es sein, dass es keinen Unterschied macht, ich würde mich aber nicht darauf verlassen, dass es jeder Browser genauso sieht.

Auf Wiederlesen
Detlef

[JürgenB]

Hallo Detlef und wahsaga,

ich habe gerade mal relative getestet und es brachte nicht den gewünschten Effekt. das Element klebte wieder am rechten Viewport-Rand und nicht am Seitenrand.

... Es ist für den Rest der Seite praktisch nicht mehr vorhanden. Auch seine Breite richtet sich nicht mehr nach der des Elternelements sondern nach seinem Inhalt.

Ich dachte, es darf nur einen Body geben. Ich bzw. meine Seite hat jedenfalls nur einen.

Ob absolut oder relativ sollte in diesem Fall doch egal sein.

In deinem speziellen Fall _kann_ es sein, dass es keinen Unterschied macht, ich würde mich aber nicht darauf verlassen, dass es jeder Browser genauso sieht.

s.o.

Gruß, Jürgen

[Detlef G.]

Hallo Jürgen

ich habe gerade mal relative getestet und es brachte nicht den gewünschten Effekt. das Element klebte wieder am rechten Viewport-Rand und nicht am Seitenrand.

Ich bin mir ziemlich sicher, dass es am Rand des body klebt.
Gib body mal einen Border, damit du siehst, wie groß er ist.

Ich dachte, es darf nur einen Body geben. Ich bzw. meine Seite hat jedenfalls nur einen.

Ja, meine Aussagen bezogen sich allgemein auf Unterschiede zwischen relative und absolute und nicht speziell auf die Anwendung auf body.

Ob absolut oder relativ sollte in diesem Fall doch egal sein.

In deinem speziellen Fall _kann_ es sein, dass es keinen Unterschied macht, ich würde mich aber nicht darauf verlassen, dass es jeder Browser genauso sieht.

s.o.

Wie du siehst, ist es nicht egal, auch wenn mir dein Ausgangsproblem bei der Antwort nicht bewusst war.

(Lies noch einmal, welche Unterschiede ich aufgezählt habe.)

Auf Wiederlesen
Detlef

[JürgenB]

Hallo Detlef,

um die Diskussion zum eigentlichen Problem zurückzubringen, habe ich meine Testseite etwas modifiziert.

http://www.j-berkemeier.de/test/Rechts_Test.html

Man kann jetzt per JS den Body wahlweise auf absolute oder relative stellen. IM IE macht es keinen Unterschied, im FF schon. Ich liebe CSS.

Das es einen Unterschied zwischen position:absolute und relative gibt, ist mir schon klar. Aber in meinem Fall geht es um den body. Und der hat keine nachfolgenden Elemente, nur "Kinder". Und das er im Fall absolute seine Breite nach dem Inhalt richtet, ist gewünscht. Und er soll auch nicht aus seiner Defaultposition herausbewegt werden.

Gruß, Jürgen

[Detlef G.]

Hallo Jürgen

IM IE macht es keinen Unterschied, im FF schon. Ich liebe CSS.

Ja, der liebe IE machts verkehrt, lies mal die Beschreibung zu [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=overflow:visible] (beim W3C).

... Und das er im Fall absolute seine Breite nach dem Inhalt richtet, ist gewünscht.

Den Effekt würdest du auch mit position:relative und float:left erreichen, ich denke aber nicht, dass das in deinem speziellen Fall dann besser wäre, als position:absolute zu verwenden.

Auf Wiederlesen
Detlef