Zwei Grafiken übereinander

[Schneeflocke]

Hi Leute,

ich bin nicht gerade die Design-Expertin. Ich habe ein vorgegebenes Stylesheet, in das ich soweit durchblicke. Es gibt eine Basisgrafik als Hintergrundgrafik. Ein Fotorahmen. Dieser ist als background-image definiert. Darüber wird ein dynamisches Benutzerbild gelegt. Das funktioniert auch. Nun soll auf das Benutzerbild in eine Ecke jedoch mit einer Mini-Grafik der Onlinestatus festgehalten werden. Jetzt klappt vorn und hinten nichts mehr. Ich habe gelesen, es gibt gar keine Option, Grafiken über foreground zu definieren. Und eine Zweitgrafik erstellen, in der alles vorhanden ist, geht ja nicht, da das Benutzerbild ja dynamisch erzeugt wird und zwischen den beiden fixen Grafiken liegt. Über die fixe Positionsangabe möchte ich es eigentlich nicht regeln, weil es nachher bei verschiedenen Auflösungen hin und her rutscht. Also steh ich aufm Schlauch und seh mal den Onlinestatus oder das Userbild. Oder beides untereinander....vielleicht kann mir jemand helfen, denn ich sitze bereits seit einigen Stunden daran...

Danke,

SF

[Dragon8]

Also ich weiß jetzt nicht, ob du mit fixen positionieren, das meinst was ich nun vorschlage.

Aber ich würde es folgendermaßen machen,

Das Benutzerbild wird als hintergrund eines divs gelegt, und dieses div wird entweder mit "position: absolute" oder "position: relative" positioniert.

Danach kannst in dem div in dem das benutzerbild als hintergrund vorhanden ist, ein zweites div reinschreiben.

Dort legste einfach dein bild für den onlinestatus als hintergrundbild rein und positioniert es mit "position: absolute".

Als kleines Beispiel mal den quelltext den ich zum ausprobieren genommen habe:

HTML-CODE:

<div id="bbild">

	<div id="status">

	</div>

</div>

CSS-CODE:

#bbild

{

	background-image: url("[Benutzerbild]");

	position: relative;

	top: 10px;

	left: 10px;

}

#status

{

	background-image: url("[Statusbild]");

	position: absolute;

	left: 10px;

	bottom: 10px;

}

Das wichtigste dabei ist dass das benutzerbild mit position: relative oder position: absolute positioniert wird,

und beim Statusbild dass es mit position: absolute positioniert wird.

Das bewirkt beim Statusbild, dass es 10px vom unteren und vom linken Rand, des übergeordneten elementes, hier das benutzerbild, angezeigt wird.

Eine, wie ich finde, gute Erklärung zu den verschiedenen Positionierungsverfahren findest auf SELFHTML

Ich hoffe du kannst damit etwas anfangen.

[Schneeflocke]

Danke, damit habe ich es gelöst