Bild am äuserstem Rand platzieren

[Michael]

Hallo,

Ich möchte ein Bild ganz oben rechts, ohne Freiraum zum Rand platzieren.
Geht das?

Vielen Dank im voraus
Michael

[Dieter Raber]

Hallo,

Mit CSS, position: absolute
http://de.selfhtml.org/css/eigenschaften/positionierung.htm

Dieter

[Xava]

Hallo Michael

Ich möchte ein Bild ganz oben rechts, ohne Freiraum zum Rand
platzieren.
Geht das?

Ja, mit CSS. Folgendes müsste funktionieren:

<div style="position=absolute; top:0px; left:0px;">
   <img style="margin:0" src="..."/>
</div>

Mehr Informationen unter: http://de.selfhtml.org/navigation/css.htm#positionierung

[H2O]

Hallo.

<div style="position=absolute; top:0px; left:0px;">

^^^
Es sollte aber oben rechts sein.

Und warum packst du das Bild in ein div? Geht es nicht auch ohne?

<img style="position:absolute; top:0px; right:0px;" src="...">
Das müsste auch klappen.

Mehr Informationen unter: http://de.selfhtml.org/navigation/css.htm#positionierung

Du meinst wohl http://de.selfhtml.org/navigation/css.htm#positionierung
Schau dir mal die FAQ an: </faq/#Q-19>

Ich hoffe ich konnte helfen, H2O

[ichen]

Moin!

<img style="position:absolute; top:0px; right:0px;" src="...">

^^^^
Das versteht der opera aber nicht.
tschüss ichen

[H2O]

Hallo.

<img style="position:absolute; top:0px; right:0px;" src="...">
                                          ^^^^
Das versteht der opera aber nicht.

Oh, sorry. Wusste ich nicht.
Ich dachte right und bottom würden von allen Browsern angenommen.
Dann muss man es warscheinlich mit JS für andere Browser lösen.
Man nimmt die Fenstergröße und stellt dann das Bild entsprechend weit nach rechts.

Schönen Tag noch, H2O

[ichen]

Moin!

Dann muss man es warscheinlich mit JS für andere Browser lösen.
Man nimmt die Fenstergröße und stellt dann das Bild entsprechend weit nach rechts.

ich habe es immer so gelöst [pref:t=86141&m=508928]

tschüss ichen

[H2O]

Hallo.

ich habe es immer so gelöst [pref:t=86141&m=508928]

Spitzenidee. Als Hintergrundbild. Da muss man erst mal drauf kommen 8).

Schönen Tag noch, H2O

[Sven Rautenberg]

Moin!

<img style="position:absolute; top:0px; right:0px;" src="...">
                                          ^^^^
Das versteht der opera aber nicht.

Welcher? Meiner tut's nämlich.

- Sven Rautenberg

[ichen]

Moin!

Welcher? Meiner tut's nämlich.

mein 7.23.

tschüss ichen

[Detlef G.]

Hallo ichen,

Welcher? Meiner tut's nämlich.

mein 7.23.

Seltsam, mein Opera hat keine Probleme damit.

Version 7.23
Build 3227
Plattform Win32
Betriebssystem Windows 98

Auf Wiederlesen
Detlef

[Xava]

Hallo H2O!

<div style="position=absolute; top:0px; left:0px;">
                     ^^^
Es sollte aber oben rechts sein.

Stimmt.

Und warum packst du das Bild in ein div? Geht es nicht auch ohne?

<img style="position:absolute; top:0px; right:0px;" src="...">
Das müsste auch klappen.

Der <div>-Tag ist doch eigenst für CSS entstanden. Und soweit ich weis, unterstützen nicht alle Browser alle CSS-Kommandos bei allen HTML-Tags. Die Wahrscheinlichkeit, das sie beim <div>-Tag unterstützt werden, ist wohl am grössten.
Zudem setze ich Layout-Kommandos -- insbesondere Positionierung -- immer in <div>-Tags. Das macht ein Projekt übersichtlicher. Aber dass ist meine persönliche Meinung.

[...]
Du meinst wohl
http://de.selfhtml.org/navigation/css.htm#positionierung
Schau dir mal die FAQ an: </faq/#Q-19>

Danke!

[H2O]

Hallo.

Der <div>-Tag ist doch eigenst für CSS entstanden. Und soweit ich weis, unterstützen nicht alle Browser alle CSS-Kommandos bei allen HTML-Tags. Die Wahrscheinlichkeit, das sie beim <div>-Tag unterstützt werden, ist wohl am grössten.

Stimmt. Ich dachte alle Browser würden die direkt-Einbindung von style interpretieren, aber da lag ich wohl falsch. Entschuldige bitte.

Dann muss es jetzt wohl so heißen:
<div style="position:absolute; top:0px; right:0px;">
<img style="margin:0px;" src="...">
</div>

So ich hoffe das stimmt 8)

Zudem setze ich Layout-Kommandos -- insbesondere Positionierung -- immer in <div>-Tags. Das macht ein Projekt übersichtlicher. Aber dass ist meine persönliche Meinung.

Ja. Übersichtlicher machen sie es schon irgendwie...

Danke!

Kein Problem.

Schönen Tag noch, H2O

[Ingo Turski]

Hi,

Der <div>-Tag ist doch eigenst für CSS entstanden. Und soweit ich weis, unterstützen nicht alle Browser alle CSS-Kommandos bei allen HTML-Tags.

und woher hast Du dieses Wissen? Und hast Du es einmal kritisch hinterfragt?

Zudem setze ich Layout-Kommandos -- insbesondere Positionierung -- immer in <div>-Tags. Das macht ein Projekt übersichtlicher. Aber dass ist meine persönliche Meinung.

Ok, aber die dürfte sich mit der Meinung vieler hier nicht decken, auch nicht mit meiner. Ein DIV ist ein "sinnloses" Element und es zusätzlich zu verwenden kann nicht übersichtlich sein, weder was den - hierdurch unnötig erweiterten - (x)html-Code noch das CSS betrifft.

freundliche Grüße
Ingo

[H2O]

Hallo.

und woher hast Du dieses Wissen? Und hast Du es einmal kritisch hinterfragt?

Also kann ich das style-Attribut doch direkt im img einbinden?

Ok, aber die dürfte sich mit der Meinung vieler hier nicht decken, auch nicht mit meiner. Ein DIV ist ein "sinnloses" Element und es zusätzlich zu verwenden kann nicht übersichtlich sein, weder was den - hierdurch unnötig erweiterten - (x)html-Code noch das CSS betrifft.

Ja. Aber manchmal ist ein bisschen div doch etwas übersichtlicher (zwar nicht immer, aber naja...).

Schönen Tag noch, H2O

[Ingo Turski]

Hi,

Also kann ich das style-Attribut doch direkt im img einbinden?

natürlich. Und inline-Styles müssen es ja auch nicht unbedingt sein.
Eine Ausnahme (die Xava vielleicht im Hinterkopf hatte) mag die Mischung bestimmter CSS-Angaben für das IMG-Element sein, die im Netscape 4 Probleme bereiten - aber dafür das (x)html-Markup verschandeln?

Ja. Aber manchmal ist ein bisschen div doch etwas übersichtlicher (zwar nicht immer, aber naja...).

Zeige mir ein Beispiel, in dem zwei Elemente übersichtlicher als eines sind.

freundliche Grüße
Ingo

[H2O]

Hallo.

natürlich. Und inline-Styles müssen es ja auch nicht unbedingt sein.
Eine Ausnahme (die Xava vielleicht im Hinterkopf hatte) mag die Mischung bestimmter CSS-Angaben für das IMG-Element sein, die im Netscape 4 Probleme bereiten - aber dafür das (x)html-Markup verschandeln?

OK, danke für die Information.

Zeige mir ein Beispiel, in dem zwei Elemente übersichtlicher als eines sind.

OK, OK. Du hast gewonnen ;)
Man kann auch einfach ein paar Zeilenumbrüche im Quelltext notieren um einen Abstand zu halten.
Also, div nur Übersicht zu benutzen ist auch Mist (ich sehe es ja ein).

Schönen Tag noch, H2O

[ichen]

Moin!

<div style="width:100%; height:höhe des bildes; background:url(url/zum/bild.gif); background-position:right;">
</div>
das müsste klappen
tschüss ichen

[siro]

Hallo Ichen.

<div style="width:100%; height:höhe des bildes; background:url(url/zum/bild.gif); background-position:right;">
</div>

Kann man IMHO noch kürzen:
<div style="height:höhe des bildes;background:url(url/zum/bild.gif) right no-repeat;"></div>

Die Breite ist zumindest bei mir (IE5/IE6/Opera7/FireFox0.9) automatisch auf 100% bei allen Divs.

MfG _Siro

[ichen]

Moin!
ok, hast recht. noch zu ergänzen:
in body muss(!) margin:0; angegeben werden, weil sonst das bild nicht direkt in die ecke gesetzt wird, sondern mit 5 pixel abstand zum rand.
schönen tag noch
ichen

[siro]

in body muss(!) margin:0; angegeben werden, weil sonst das bild nicht direkt in die ecke gesetzt wird, sondern mit 5 pixel abstand zum rand.

...dann fehlt nur noch dass "padding:0;" im Style des body für Opera 7. In Opera 6 scheint es mit dem div überhaupt nicht zu funktionieren.

MfG _Siro