nicht angemeldet
Text oder transparentes img über img
0 0 0 0 
Der Martin
0 0 Der Martin
0 0 Der Martin
0
0
Text oder transparentes img über img
Für zusätzliche Sprachversionen möchte ich Text in der entsprechenden Sprache über Bildern platzieren. Derzeit ist der Text noch fest einkopiert mit Gimp. Meine versuche das gleiche mit CSS und negativem Margin hinzubekommen habe ich abgebrochen, weil, was bei einem einzelnen Bild noch recht gut klappt, bei Bildblöcken mit teilweise floatenden Bildern zu layout Alptraum mutiert, zumindest habe ich sofort den Überblick verloren.
Gibt es in html/CSS ander Möglichkeiten, Text über Bilder zu legen? Bitte kein JS. Ich möcht eben erreichen, dass ich in allen sprachversionen die gleichen Images laden kann und nur der Textanteil sprchspezifisch geladen werden muß.
?
-
Hi there,
Gibt es in html/CSS ander Möglichkeiten, Text über Bilder zu legen? Bitte kein JS. Ich möcht eben erreichen, dass ich in allen sprachversionen die gleichen Images laden kann und nur der Textanteil sprchspezifisch geladen werden muß.
Ja, der einfachste Weg ist das Bild nur als Hintergrundbild jenes Elementes einzusetzen, in dem man den Text plaziert...
-
Hi there,
Gibt es in html/CSS ander Möglichkeiten, Text über Bilder zu legen? Bitte kein JS. Ich möcht eben erreichen, dass ich in allen sprachversionen die gleichen Images laden kann und nur der Textanteil sprchspezifisch geladen werden muß.
Ja, der einfachste Weg ist das Bild nur als Hintergrundbild jenes Elementes einzusetzen, in dem man den Text plaziert...
Liefe das darauf hinaus, Text in ein <div> zu plazieren und ... ähmm was heißt Hintergundbild? Wird ein Hintergrundbild anders eingebunden als ein Bild?
Ich vermute du redest von html5. Die seite muß jedoch in FF3.x und IE mindestens ab7. besser 6 funktionieren.
-
Om nah hoo pez nyeetz, michaa!
Liefe das darauf hinaus, Text in ein <div> zu plazieren und ... ähmm was heißt Hintergundbild? Wird ein Hintergrundbild anders eingebunden als ein Bild?
[ref:self812;css/eigenschaften/hintergrund.htm@title=Hintergründe]
ich halte <div> und <span> für geeignet.
Wenn das Bild Inhalt darstellen soll, dann
<img>, sonstbackground-image;Matthias
--
-
Hi there,
Liefe das darauf hinaus, Text in ein <div> zu plazieren und ... ähmm was heißt Hintergundbild? Wird ein Hintergrundbild anders eingebunden als ein Bild?
Genau das. Das Hintergrundbild wird durch http://de.selfhtml.org/css/eigenschaften/hintergrund.htm@title=CSS festgelegt. In den div-Bereich kannst Du ganz normalen Text setzen, der dann über dem Bild liegt.
Ich vermute du redest von html5.
Nein. Das funktioniert seit Urzeiten so...
-
-
Ja, der einfachste Weg ist das Bild nur als Hintergrundbild jenes Elementes einzusetzen, in dem man den Text platziert...
Dann kann ich aber die Größe des Bildes nicht direkt kontrollieren, denn die hängt immer von der Größe des Textelements ab, richtig?
Mir scheint der Wunsch, die Größe des Bildes festlegen zu wollen als hinreichendes Kriterium dafür, dass das Bild im gewünschten Fall Inhalt und nicht Deko ist (auch wenn dass so nicht wirklich stimmt).
Das tut also nicht was ich will :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>background-image</title>
</head>
<body>
<p style="background-image:url(http://ac52.de/img/1.png)"><span>test</span></p>
</body>
</html>Es geht mir nicht darum Text mit einem HG-Bild zu dekorieren, sondern ein Bild mit einem Text (innerhalb dieses Bildes) zu versehen. Ich muss dabei die Größe des Bildes unabhängig vom Text kontrollieren können.
-
Om nah hoo pez nyeetz, michaa!
Mir scheint der Wunsch, die Größe des Bildes festlegen zu wollen als hinreichendes Kriterium dafür, dass das Bild im gewünschten Fall Inhalt und nicht Deko ist (auch wenn dass so nicht wirklich stimmt).
a) Du könntest die Größe desjenigen Elementes, das das Bild als Hintergrund enthält, beeinflussen.
b) Ich kann dich nur noch einmal auf celsius-fahrenheit verweisen. Beschäftige dich mit position, um die Beschriftung ins Bild und nicht unter das Bild zu legen.
Matthias
--
-
Danke für dein Beispiel, Stück für Stück bin ich damit weiter gekommen, aber ich befürchte mich nun in einer Sackgasse zu befinden:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>background-image</title><style type="text/css">
body html
{
margin: 0;
padding: 0;
}.oli {
position: relative;
float: left;
width: 200px;
height: 200px;
background-image: url('http://ac52.de/img/1.png');
background-repeat: no-repeat;
border: 2px solid blue;
margin: 5px;
}.ore {
position: relative;
float: left;
width: 200px;
height: 200px;
background-image: url('http://ac52.de/img/1.png');
background-repeat: no-repeat;
border: 2px solid green;
margin: 5px;}
.uli {
position: relative;
clear: both;
float: left;
width: 200px;
height: 200px;
background-image: url('http://ac52.de/img/1.png');
background-repeat: no-repeat;
border: 2px solid blue;
margin: 5px;
}.ure {
position: relative;
float: left;
width: 200px;
height: 200px;
background-image: url('http://ac52.de/img/1.png');
background-repeat: no-repeat;
border: 2px solid green;
margin: 5px;
}#ol {
position: absolute;
bottom: 20%;
right: 20%;
color: red;
font-size: 2em;
font-family: sans-serif;
}#or {
position: absolute;
bottom: 30%;
right: 50%;
color: red;
font-size: 2em;
font-family: sans-serif;
}</style>
</head>
<body>
<div class="oli"><span id="ol">test</span></div>
<div class="ore"><span id="or">test</span></div>
<div class="uli"><span id="ol">test</span></div>
<div class="ure"><span id="or">test</span></div></body>
</html>Soweit es die Anordnung und die Textpositionierung betrifft weiß ich nun was ich zu machen habe.
Nur ist das noch nicht ganz, was ich will und brauche. Width und heigth ist hier ja auf 200px festgenagelt. Das soll im endgültigen Layout, sofern das dann überhaupt geht, als Prozentangabe des Elternelements definiert werden.
_Und_ ich möchte das HG-Bild in diesen Bereich hineinskalieren (so wie das ja mit <img> geht, das verlinkte Bild zeigt ja eigentlich beide Diagonalen, sollte es zumindest) und nicht irgendetwas abschneiden. Soweit ich sehe ist diese letzte Anforderung mit einem HG-Bild nicht zu erfüllen ... oder doch?-
Om nah hoo pez nyeetz, michaa aka michat!
es ist nicht sinnvoll, nur ein div zu erstellen, um diesem ein Hintergrundbild zu geben, die zudem mit CSS2.1 nicht skalierbar sind.
Bild ist Verzierung du könntest beispielsweise folgendes tun [ungetestet] Es handelt sich um eine Liste solcher Verzierungen
<ul> <li>Bildtext</li> ... </ul>
im CSS gibst du der Liste deine gewünschte Breite und Ort am Bildschirm, die li bekommen display: inline-block [bittersmann], den Text schiebst du mit text-align und line-height in die Mitte.
Matthias
--
-
es ist nicht sinnvoll, nur ein div zu erstellen, um diesem ein Hintergrundbild zu geben, die zudem mit CSS2.1 nicht skalierbar sind.
Wenn ich dadurch erreichkönnte (skalierbarer HG) was ich wollte hätte ich damit kein Problem, zudem hat man mir ja gerade dazu geraten.
du könntest beispielsweise folgendes tun [ungetestet] Es handelt sich um eine Liste solcher Verzierungen
<ul>
<li>Bildtext</li>
...
</ul>im CSS gibst du der Liste deine gewünschte Breite und Ort am Bildschirm, die li bekommen display: inline-block [bittersmann], den Text schiebst du mit text-align und line-height in die Mitte.
Der text soll _nicht_ in die Mitte, sondern soll frei plaziert werden. Voraussetzung ist aber die Skalierbarkeit des Bildes. Deiner obigen Antwort entnehme ich, dass es mit background-image also nicht geht. Werde mir mal das Bittermannsche Beispiel anschauen, bin da schonmal drübergestolpert.
Aber um das Rätselraten zu beenden, es geht (immer noch) um dieses Seite
***pt***ac.ch*** (ohne ***) und dort um die vier, bzw. drei Graphiken links. Derzeit ist der Text der Einfachheit wegen Teil des Bildes, bei mehrsprachigen Versionen führt das zu verschieden betexteten Bildern ... was ich natürlich vermeiden möchte.-
Om nah hoo pez nyeetz, michaa!
Warum muss denn in diesem Beispiel die Hintergrundgrafik skalierbar sein?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <style type="text/css"> ul {width: 410px; height: 410px; border: 1px solid blue; padding:0;} li {float: left; list-style: none; margin: 5px 0 0 5px; white-space: pre; width: 200px; height: 200px; background-color: red;} </style> </head> <body> <ul> <li id="b1"> Beratung</li> <li id="b2">Bewegung</li> <li id="b3">Training</li> <li id="b4">Ausdauer</li> </ul> </body> </html>und im CSS für jede Grafik das Hintergrundbild.
white-space: pre;sorgt dafür, dass du Zeilenumbrüche und Leerzeichen von Hand einbauen kannst.--
-
Warum muss denn in diesem Beispiel die Hintergrundgrafik skalierbar sein?
Weil ich keinen Grund sehe zu der Annahme, dass die 40%-des-übergeordneten-Elements-breiten-images im Layout 410px ausmachen.
Zudem hängt ja das gesamte Layout in seinen Ausmaßen von der auf width: 945px; height: 675px; festgenagelten Größe der alles umgebenden #bbox ab. Das würde ich, falls ich dafür eine befriedigende Lösung (Breite zu Höhe Verhältnis auf unterschiedlichen Bildschirmen) finde gerne ändern. Wenn dann diese Bilder in fixen Dimensionen vorgegeben sind wäre das Design noch starrer und ich könnte jeden diesbezüglichen Verbesserungsversuch komplett vergessen ... wenn ich das richtig sehe.
-
Om nah hoo pez nyeetz, michaa!
Es handelt sich doch dabei offensichtlich um Navigationselemente. Was spricht dagegen, sie konstant zu lassen und statt dessen den Raum für den tatsächlichen Inhalt anzupassen?
Wenn du tatsächlich ein fluides Layout suchst, solltest du die Höhe des bodys garnicht beeinflussen und für die Breite ein
min-widthundmax-widthbestimmen. Innerhalb dieser Grenzen könntest du dann das Hintergrundbild mitbackground-position: center;in die Mitte legen, sodass ggf. ein überflüssiger Rand abgeschnitten wird.--
-
Om nah hoo pez nyeetz, michaa!
Es handelt sich doch dabei offensichtlich um Navigationselemente.
Potenziell: ja; defacto oder derzeit geplant: nein.
Was spricht dagegen, sie konstant zu lassen und statt dessen den Raum für den tatsächlichen Inhalt anzupassen?
Nun, es ist nicht darauf angelegt, ich will das nicht, schon gar nicht aus Featuremangel.
Was du im Beispiel siehst ist das gewünschte Design. Und der (magere) Inhalt ist der gewünschte. Leider ist das sogenannte flexible Design auch nur unflexibel an anderer Stelle. Es läuft letztlich nur darauf hinaus, sich mit breiteren Bildschirmen ergebende Leere, die ich gern links und rechts am Bildschirmrand belassen würde stärker in die Bildmitte zu verlagern, wo ich sie nicht haben will. Ich sehe das nicht als Gewinn und ärgere mich nach wie vor über diese gewollte Restriktion im Namen der sog. Flexibilität.Wenn du tatsächlich ein fluides Layout suchst,
(siehe oben, ich suche nicht wirklich ein fluides Layout, weil ich dessen "Vorteil" bis heute nicht zu schätzen weiß. Ich suche ein besser skalierbares Layout, ausdrücklich *********ohne******** das Seitenverhältnis zu stark oder überhaupt zu ändern. Dass ein fluides Layout möglich ist ist klasse, dass, wo gewünscht, eine Kontrolle des Seitenverhältnisses nicht möglich ist ist einfach Sch*****.
Sorry, dasss du das nun lesen mußt, ich weiß du kannst nichts dafür, aber ich ärgere mich jedes mal, wenn die Diskussion auch nur in die nähe dieses Punktes kommt.)solltest du die Höhe des bodys garnicht beeinflussen und für die Breite ein
min-widthundmax-widthbestimmen. Innerhalb dieser Grenzen könntest du dann das Hintergrundbild mitbackground-position: center;in die Mitte legen, sodass ggf. ein überflüssiger Rand abgeschnitten wird.Siehe oben: So wie ich den Grundansatz verstehe (und das betrifft nur, dass dein Beispiel wohl das Seitenverhältnis in Grenzen kontrolliert und das Bild eben aus der Mitte heraus darstellt und man zudem mit geschickt gewählter HG-Farbe und Grundgröße des Bildes einen recht großen Bereich abdecken könnte. Das ist zumindest ein Würgäraund, und dafür Danke. Der überwiegt leider den Ärger, für den du nichts kannst, nicht, dass das Problem gar nicht bestünde, ließe die Spezifikation außer einem absoluten, *****pixelgenauem***** festnageln des Seitenverhältnisses auch ein Seitenverhältnis über relative Angaben zu. In diese Hinsicht ist die Spezifikation (un)flexibel im umgekehrten Verhältnis zu ihrem Anspruch hinsichtlich Flexibilität.
Mal schaun wann ich den Nerv finde ausszuprobieren ob min-width/max-width zu akzeptablen Ergebnissen führt.
BTW: was tut [code lang=css]? Länderspezifischer CSS-Code? Den hätte ich für den text erwartet, allerdings im html. Oder schreibt man das um Kund zu tun, dass es sich dabei nicht um den html Teil, sondern um den css Teil handelt?
-
Om nah hoo pez nyeetz, michaa!
BTW: was tut [code lang=css]?
[code] sorgt für Syntax-Hervorhebung. die angebene Sprache kann HTML oder CSS oder Javascript ... (siehe deine Icons unter Formatierungen einfügen, falls du JS aktiviert hast) siehe auch Quellcode farbig hervorheben.
Matthias
--
-
-
-
-
-
-
-
-
-
-
-
Hi,
was ist daran alptraumhaft?
<style type="text/css"> [code lang=css] figure {position:relative;} figcaption {position:absolute;bottom:0;width:100%;}</style>
<figure>
<img src="" alt=""/>
<figcaption>
Lorem Ipsum!
</figcaption>
</figure>
[/code]Natürlich nur wenn das Bild Inhalt ist, wenn das Bild nur Deko ist siehe Klawischniggs Post
-
Hi,
was ist daran alptraumhaft?
<style type="text/css">
[code lang=css] figure {position:relative;}
figcaption {position:absolute;bottom:0;width:100%;}> </style> > > <figure> > <img src="" alt=""/> > <figcaption> > Lorem Ipsum! > </figcaption> > </figure> > [/code] Danke, Schaut einerseits nach genau dem aus was ich suche, andererseits ist das gefühlt CSS/html 2015? Wo kann ich mehr dazu lesen (auf selfhtml.org jedenfalls nicht)? Und die Gretchenfrage: Welche browser unterstützen das. FF 3.x und Opera 11 hoffentlich, IE mindestens ab7, besser 6? > > Natürlich nur wenn das Bild Inhalt ist, wenn das Bild nur Deko ist siehe [Klawischniggs Post](https://forum.selfhtml.org/?t=202661&m=1369084) Woran machst du Inhalt und Deko fest und was wäre jeweils die technische Konsequenz? -
Hallo,
figure {position:relative;}
figcaption {position:absolute;bottom:0;width:100%;}
> > ~~~html <figure> > <img src="" alt=""/> > <figcaption> > Lorem Ipsum! > </figcaption> > </figure>und wer der HTML5-Unterstützung der derzeitigen Browser noch nicht traut, der ersetzt figure und figcaption durch geeignete Elemente, schlimmstenfalls neutrale div- oder span-Elemente (ggf. im CSS zu Blockelementen umgestylt).
So long,
Martin--
Denken ist wohl die schwerste Arbeit, die es gibt. Deshalb beschäftigen sich auch nur wenige damit.
(Henry Ford, amerikanischer Industriepionier)
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
und wer der HTML5-Unterstützung der derzeitigen Browser noch nicht traut, der ersetzt figure und figcaption durch geeignete Elemente, schlimmstenfalls neutrale div- oder span-Elemente (ggf. im CSS zu Blockelementen umgestylt).
Ja,ja, mehr input, was wären denn statt schlimmstenfalls die "am besten" zu verwendenden Elemente? Kleines Codebeispiel zuuuuuufällig parat?
-
Hallo,
und wer der HTML5-Unterstützung der derzeitigen Browser noch nicht traut, der ersetzt figure und figcaption durch geeignete Elemente, schlimmstenfalls neutrale div- oder span-Elemente (ggf. im CSS zu Blockelementen umgestylt).
Ja,ja, mehr input, was wären denn statt schlimmstenfalls die "am besten" zu verwendenden Elemente?das kommt ganz auf den Kontext an. Handelt es sich vielleicht um eine ganze Reihe von Bildern? Dann wäre ein li als umschließendes Element geeignet. Das umgebende Element könnte aber auch ein p-Element sein.
Für die Bildunterschrift wird's sehr wahrscheinlich auf ein span hinauslaufen. Oder ein a-Element, das dann das Bild "in groß" verlinkt? Das muss man eben im Zusammenhang betrachten.So long,
Martin--
Verliebt: Er spricht, sie lauscht.
Verlobt: Sie spricht, er lauscht.
Verheiratet: Beide sprechen, und die Nachbarn lauschen.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
das kommt ganz auf den Kontext an. Handelt es sich vielleicht um eine ganze Reihe von Bildern?
Es geht, wie bereits beschrieben um mehrere zu einem Bildblock zusammengefasste Bilder, die eben teilweise auch floten, wie ebenso bereits beschrieben. Und ich will, wie ebenso bereits erwähnt, nicht mit negativem margin arbeiten.
Ich will keine Unterschriften, sondern Text im Bild platzieren.Von diesen html5 Tricks mit figcaption abgesehen habe noch von keinem der hier genannten Beispiele verstanden wie sie auf die genannten Rahmenbedingungen eingingen?
Stellt euch einfach derart angeordnete Bilder vor, so wie die "4" auf einem Würfel, und der Text, kein Anker, soll im Bild platziert werden:
1|2
3|4-
Hi,
Von diesen html5 Tricks mit figcaption abgesehen habe noch von keinem der hier genannten Beispiele verstanden wie sie auf die genannten Rahmenbedingungen eingingen?
fehlt es dir möglicherweise an der Fähigkeit, allgemeine Hinweise auf deinen konkreten Fall zu beziehen? Kommt mir so vor.
Stellt euch einfach derart angeordnete Bilder vor, so wie die "4" auf einem Würfel, und der Text, kein Anker, soll im Bild platziert werden:
1|2
3|4Vier Texte in einem Bild? Was hast du für ein Problem, das Bild und vier span-Elemente mit den Texten in einem div-Container zu gruppieren? Das Containerelement bekommt position:relative, die vier spans position:absolute und geeignete top/bottom- und left/right-Koordinaten.
Oder sind es vier Bilder, die in einem festen 2x2-Raster angeordnet sein sollen? Da würde ich die vier Bilder zu *einem* zusammenfassen und dann wie oben beschrieben verfahren.So long,
Martin--
Frage an Radio Eriwan: Kann man eigentlich ein guter Kommunist und gleichzeitig ein guter Christ sein?
Radio Eriwan antwortet: Im Prinzip ja - aber warum sollte man sich das Leben doppelt schwer machen?
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( -
Om nah hoo pez nyeetz, michaa!
Als erstes machst du dir mal Gedanken, ob deine Bilder Verzierung oder Inhalt darstellen.
-
Verzierung: Such dir ein geeignetes Element für deinen Text, z.B. <p> oder <li> und formatiere es so, dass das Bild die Hintergrundgrafik wird
-
Inhalt: Kombiniere das CSS aus Klawischniggs Post und das HTML aus meinem Code-Beispiel.
In einem anderen Post hast du gefragt:
... ähmm was heißt Hintergundbild? Wird ein Hintergrundbild anders eingebunden als ein Bild?
Dies zeigt mir, dass du noch ganz am Anfang stehst. Bei
floatund auchpositionkann man so einiges verkehrt machen. Zumindest für position kann ich dir diesen Artikel empfehlen.Matthias
--
-
-
-
-
-
-
was ist daran alptraumhaft?
Dein Code ist natürlich nicht alptraumhaft, aber er tut auch nicht was ich angesprochen hatte: Text über Bild, wobei du wohl das "über" nicht in meinem Sinn interpretiert hast. Mit "über" meine ich "auf" oder "im" Bild, was ich hoffte durch meinen Hinweis auf den Workaround mit Gimp klar gemacht zu haben.
Und, ich wollte nicht mit negativen margins arbeiten, was mit deinen Code (oder Martins Alternative) beim gewünschten Ergebnis aber nur damit möglich wäre. Bei einem einzelnen Bild ist das noch überblickbar, bei vier Bildern im 2x2er Block angeorgnet mit jeweils eigener Inschrift in unterschiedlicher Position wird das dann zum Alptraum (zumindest für einen Anfänger wie mich).Leider hat sich die Idee mit den background-images auch als Sackgasse erwiesen, weil background-images nicht skalieren.
Daher tendiere ich noch am ehesten dazu es nun doch mit negativen Margins zu versuchen, wobei ich erahne, dass ich dann immer auch die (nachfolgenden) Bilder mit zusätzlichen nagativen margins versehen muß, um die vom Text ja dennoch ausserhalb des vorangestellten Bildes beanstpruchten Platz wieder auszugleichen. Da ich dies alles nicht mit px sondern mit % (wovon?) definiere wird das zum Alptraum.
Jemand 'ne vernünftige Strategie parat, wie das am besten zu lösen wäre?
-
Hallo,
Und, ich wollte nicht mit negativen margins arbeiten, was mit deinen Code (oder Martins Alternative) beim gewünschten Ergebnis aber nur damit möglich wäre.
mir scheint, du hast meinen Vorschlag immer noch nicht verstanden.
Jemand 'ne vernünftige Strategie parat, wie das am besten zu lösen wäre?
<div id="Bildbox1"> <img src="image.png" alt="Erstes Bild" /> <span>Text im Bild</span> </div>#Bildbox1 { position: relative; } #Bildbox1 span { position: absolute; top: 140px; left: 180px; }So habe ich das schon mehrmals gemacht, wenn ich Bilder beschriften wollte. Das Bild bleibt skalierbar (wenn man das wirklich will), und der Text ist darauf frei positionierbar. Ich habe bisher auch noch keine unerwünschten Nebenwirkungen beobachtet.
So long,
Martin--
Ein Theoretiker ist ein Mensch, der praktisch nur denkt.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
mir scheint, du hast meinen Vorschlag immer noch nicht verstanden.
Mir deucht da is viel wahres dran ;-)
<div id="Bildbox1">
<img src="image.png" alt="Erstes Bild" />
<span>Text im Bild</span>
</div>> > ~~~css #Bildbox1 > { position: relative; > } > #Bildbox1 span > { position: absolute; > top: 140px; > left: 180px; > }Danke, *das* tut exakt, was ich möchte. Ich hatte es zwar mit <div> und <span> bereits versucht, aber wohl einiges falsch gemacht.
Merkwürdige Beobachtung:
Abstandregelung per "top: "prozentangabe"" bewirkt bei mir *in diesem fall* nichts, "left: "prozentangabe"" funktioniert, mit "em" und sonstigen klappt das auch mit "top".
Erklärbar (?) ist die nur dadurch, dass das <div> selbst dimensions- und nach oben abstandslos ist. Nur verwundert mich, dass die Prozentangabe sich rein auf padding und/oder margin beziehen sollte, nur dann wäre es % von Null.
Aber das stellt natürlich kein Hindernis dar, wollte das nur bemerkt habe.Danke nochmal!
-
-
-