Grafik relativ zu einem Div platzieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absoluten positionieren
angabe
angegebene anzahl
bild
code
grafik
helfen
hintergrundbild
inhalt
pixel
prozent
rechnen
richtigen platz
spalten
stehenden text
tabelle
text
unterschiedlicher text
verschieben
vordergrund
-
Hi, ich habe eine Seite in einem Div. Das Div zentriert sich, außerhalb des Divs besteht kein Inhalt, alles nur weiß. In dem Div ist oben eine Tabelle. In jeder Splate ist Text. Über einer wird zur Zeit mittels CSS eine Grafik gezeigt. Die Grafik ist teilweise transparent, man sieht also teilweise den Inhalt. Das soll auch so sein. Wer jetzt aber einen großen Bildschrim hat, bei dem hängt die Grafik zu weit links (sie ist mit top und left paltziert), we einen kleinen Bildschrim hat, bei dem hängt sie zu weit rechts. Dieser Effekt tritt ein, da CSS ja bei den absoluten Positionen in der Browserecke beginnt zu zählen. Relaive Positionen helfen mir auch nicht, da die Grafik sonst auch irgendwo unbestimmbar rumhänge, es wird ja dort angefangen zu zählen, wo die Grafik ohne CSS stände. In der Tabellenspalte kann ich die Grafik auch nicht platzieren, denn sonst würde sie den darin stehenden Text verdrängen. Das darf nicht geschehen.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das Problem hatte ich früher auch oft. Bis ich dann auf die angame "margin" in css gestoßen bin.
statt das halbtransparente Bild mit "top" zu verschieben, gib einfach mal "margin-top" an, anstatt "left" probiers mal mit "margin-left".
Falls dir das nicht geholfen hat, poste doch einfach mal den Quelltext, das dürfte für alle, die dir helfen wollen, einfacher sein. =)
Grüße,
Trundle -
Noch optimaler währe es, wenn es möglich währe, in einer Tabellenspalte so zu sagen 2 Ebenen gäbe. Eine für den Text (Hintergrund), und eine für die Grafik (Vordergrund). Ist das möglich? Das währe nimlich das Beste, was es in dem Fall gäbe.
Margin sorgt ja dafür, dass das Bild in Absatand zum nächsten Objekt gehalten wird. In dem Fall würde es glaube ich den Text verdrängen, das darf ja nicht passieren.
Eine weitere sehr gute Lösung währe es, wenn ich in CSS 300px+25% rechnen könnte, und die Grafik so an den richtigen Platz rücken könnte. Geht das? -
Das mit dem x Pixel + x Prozent geht leider nicht.
Ich habe noch mal nachgedacht, das mit den zwei Ebenen wäre realisierbar. Zuerst platziert den Text, dann das halbtransparente Bild, danach ein spacer.gif, um die Zelle auf den Inhalt angepasst auszudehnen:
<div style="position:absolute">TEXT</div>
<img src="halbtransparent.png" style="position:absolute;" />
<img src="spacer.gif" width="x" height="y" />
Das einzige Problem wäre dann, dass man das Ganze bei anderem Text anders anpassen müsste...
//EDIT: Ich hätte gern nochmal den quelltext
Beitrag zuletzt geändert: 6.1.2010 18:56:35 von easynetpage -
Also es muss unterschiedlicher Text gezeigt werden. Das regel ich über PHP. Es ist einfach nur ein Div, welches zentriert wird, darin befindet sich eine Tabelle, und in einer der Spalten soll eine Grafik gezeigt werden, zusätzlich aber auch noch Text.
-
das-koenigreich schrieb:
[...] Es ist einfach nur ein Div, welches zentriert wird, darin befindet sich eine Tabelle, und in einer der Spalten soll eine Grafik gezeigt werden, zusätzlich aber auch noch Text.
Und auf diesem Bild soll ein Text darüber? Dann nehme doch einfach ein Hintergrundbild... -
trueweb schrieb:
Daran habe ich auch schon gedacht, aber ein Teil des Textes soll durch die Grafik überdeckt werden. Also Grafik = Vordergrund.
Und auf diesem Bild soll ein Text darüber? Dann nehme doch einfach ein Hintergrundbild...
-
das-koenigreich schrieb:
Eine weitere sehr gute Lösung währe es, wenn ich in CSS 300px+25% rechnen könnte, und die Grafik so an den richtigen Platz rücken könnte. Geht das?
So was ähnliches geht, habe ich auch hier schon erwähnt, ist warscheinlich nur falsch angekommen:
<style type="text/css"> *.zur_richtigen_position_verschieben { position: absolute; top: 0px; left: 50%; // Zentriert das Element parallel zum eigentlichen Seiteninhalt margin-top: 50px; // VERSCHIEBT das Element von der mit "top" und "left" definierten Stelle um 50px nach unten margin-left: -50px; // VERSCHIEBT das Element von der mit "top" und "left" definierten Stelle um -50px nach rechts (also 50px nach links) } </style>
Die margin-angaben werden beim absoluten Positionieren nicht mehr dazu gebraucht, einen äußeren Rand zu definieren, sondern um das Element von einer absolut definierten Stelle um die angegebene Anzahl Pixel zu verschieben.
Beitrag zuletzt geändert: 7.1.2010 22:43:14 von easynetpage -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
