Grafik an die richtige Stelle setzen

[Fabian]

Hallo
Meine Webseite ist so aufgebaut, dass auf der rechten Seite eine Rundung (rechts.bmp - bitte keine Beschwerden über Format und Name) zu sehen ist.
Diese platziere ich bisher per CSS píxelgenau:

div#Rundung {
  position:absolute;
  height:494px;
  width:40px;
  background-color:#F7C200;
  left:910px;  /* 938px; */
  top:10px;
  z-index:3;
}

img#Rundung {
  position:absolute;
  left:0px;
  top:0px;
  z-index:3;
}

Nun habe ich aber das Problem, dass wenn das Browserfenster verkleinert wird (oder wahrscheinlich auch bei einer Änderung der Bildschirmauflösung) das Bild rechts.bmp stehen bleibt.
Es sollte sich aber mitverschieben, damit es nahtlos passt.
Wie mache ich das?

In der HTML-Datei sieht das Ganze so aus:

<div id="RechteSeite">
<img id="RechteSeite" src="03_Rechts.bmp" />
</div>
<div id="Rundung">
<img id="Rundung" src="Rechts.bmp" />
</div>

Ich schätze mal, dass man den Rundung-Div-Tag irgendwie in den RechteSeite-Div-Tag packen muss und als postion:relative angeben sollte... . Bitte helft mir!

[wahsaga]

hi,

Nun habe ich aber das Problem, dass wenn das Browserfenster verkleinert wird (oder wahrscheinlich auch bei einer Änderung der Bildschirmauflösung) das Bild rechts.bmp stehen bleibt.

Warum platzierst du das Bild mit einem absoluten Pixelwert von Links (left) aus - wenn es doch Rechts (right) sein soll?

gruß,
wahsaga

[Fabian]

Im Prinzip hast du recht- allerdings bleibt das Problem ähnlich:
Jetzt wird das Bild zwar mitverschoben, es macht jedoch auch vor dem Text, von dem es sich rechts davon aufhalten sollte, keinen Halt... .

[wahsaga]

hi,

Im Prinzip hast du recht- allerdings bleibt das Problem ähnlich:
Jetzt wird das Bild zwar mitverschoben, es macht jedoch auch vor dem Text, von dem es sich rechts davon aufhalten sollte, keinen Halt...

Natürlich nicht - schließlich hast du es mit der absoluten Positionierung aus dem Fluss genommen.

Aber wenn du dem Text einen hinreichend großen Abstand nach rechts verordnest, sollte auch das lösbar sein.

gruß,
wahsaga

[Fabian]

Aber wenn du dem Text einen hinreichend großen Abstand nach rechts verordnest, sollte auch das lösbar sein.

Naja- unter lösbar verstehe ich etwas anderes.
Du meinst damit ja nur, dass es nicht mehr allzu oft zu der "Überlappungs-Situation" kommt bzw. diese nicht mehr so schnell auffällt- oder?

[wahsaga]

hi,

Aber wenn du dem Text einen hinreichend großen Abstand nach rechts verordnest, sollte auch das lösbar sein.

Naja- unter lösbar verstehe ich etwas anderes.
Du meinst damit ja nur, dass es nicht mehr allzu oft zu der "Überlappungs-Situation" kommt bzw. diese nicht mehr so schnell auffällt- oder?

Nein, ich meine das, was ich geschrieben habe.

gruß,
wahsaga

[Fabian]

Dann verstehe ich dich nicht:

| wenn du dem Text einen hinreichend großen Abstand nach rechts verordnest

Du meinst also:
Richte rechts.bmp mit der Anweisung right aus,
richte den Text mit der Anweisung right aus

Richtig?
Stimmt- das müsste funktionieren- ich sitz schon den ganzen Tag an 'nem recht großen Projekt und langsam ist es glaube ich Zeit, aufzuhören ^^

Vielen Dank für die tatkräftige Unterstützung!

Mir stellt sich nur noch eine Frage (naja- eigentlich unzählige ^^):
Wieso richtet man dann überhaupt mit der Anweisung "left" aus? Es ist doch eigentlich nie erwünscht, dass etwas seine Größe beibehält und dabei größer als das Browserfenster wird- oder?

[Der Martin]

Hallo Fabian,

Dann verstehe ich dich nicht:

| wenn du dem Text einen hinreichend großen Abstand nach rechts verordnest

Du meinst also:
Richte rechts.bmp mit der Anweisung right aus,

Right. ;-)

richte den Text mit der Anweisung right aus

Bad. Use margin and/or padding instead.
Die Positionsangabe right hat nur eine Wirkung, wenn du den Text auch explizit positionierst - das solltest du aber besser lassen.
Ein Textabsatz (p-Element) ist, wenn man ihn nicht einschränkt, so breit wie der zur Verfügung stehende Platz. Wenn am rechten Rand ein Bild steht, das er nicht überdecken soll, bietet sich margin-right oder padding-right an, oder?

Vielen Dank für die tatkräftige Unterstützung!

Dafür treffen wir uns hier. :-)

Wieso richtet man dann überhaupt mit der Anweisung "left" aus?

Tut man das? Hmm, manchmal... wenn's gar nicht anders geht.

Es ist doch eigentlich nie erwünscht, dass etwas seine Größe beibehält und dabei größer als das Browserfenster wird- oder?

Deswegen ist es meistens günstiger, ein Element nicht explizit zu positionieren, sondern mit seinen Randabständen zu arbeiten.

So long,

Martin

[Fabian]

Weil ich bei dem ganzen Left, Right, Padding... nicht mehr durchgecheckt hab, hab ichs jetzt anders gemacht:
Ich nehm jetzt einfach alles als Hintergrundbild (wobei ichs immer noch  per img-Tag einbinde, fällt mir gerade auf).

Somit habe ich nicht mehr das Problem mit einer Rundung, allerdings schieben sich die Texte übereinander, wenn man eine Auflösung < 1024x768 hat oder wenn man das Browserfenster verkleinert.

Könnt ihr euch das bitte mal anschauen?

http://home.arcor.de/favorithsoft/reiter/03.html

Bitte lacht nicht wegen dem primitiven CSS-File- das sind meine ersten Gehversuche mit dieser Technologie.

Ach und wundert euch nicht, weshalb ich so einen komischen Text auf meine Homepage schreibe ^^
Ich mach die Seite für die Freundin meiner Mutter :) .

[MudGuard]

Hi,

div#Rundung {
img#Rundung {

Von diesen beiden Selektoren kann nur einer tatsächlich ein Element auswählen, denn das per id "Rundung" identifierbare Element kann nicht gleichzeitig ein img- und ein div-Element sein.

cu,
Andreas