HTML / CSS: Text eingebettet von Bildern

[sylenz]

Moin,

klingt ziemlich trivial, doch tatsächlich sitze ich schon geraume Zeit an der Problematik:

Ich habe einen Schriftzug mit einer festen Breite von 700px, welche von zwei Bilder (links und rechts) eingebettet wird.

Damit auch bei kleineren Auflösungen der mittlere Content-Bereich optimal angezeigt wird, sollen sich die beiden Bilder dynamisch verkleinern.

Folgende Ansätze habe ich bisher:

Tabellen (anno 2001):

<table width="100%" height="47px">

	<tr>

		<td style="width: auto;background-image: url(img/bild.jpg);"></td>

		<td style="width: 700px;"><div id="Testklasse" class="Testklasse">Lorem ipsum,...</div></td>

		<td style="width: auto;background-image: url(img/bild.jpg);"></td>

	</tr>

	</table>

[/PHP]

-> im IE wird es 'fast' richtig angezeigt, lediglich die Höhe von 47px wird überschritten?!

=> im Opera werden die Bilder gar nicht angezeigt...

SPAN (da bei DIVs durch den Zeilenumbruch alles untereinander dargestellt wird...):

[PHP]
<span style="background-image: url(img/bild.jpg);width:auto;height:47px;float:left;"></span>
<span id="Klasse" class="Klasse">Lorem Ipsum</span>
<span style="background-image: url(img/bild.jpg);width:auto;height:47px;float:right;"></span>
<div style="clear: both;"></div>

Hier wird bei einer hohen Auflösung alles richtig angezeigt, jedoch beim kleinerziehen des Browsers wandert das linke Bild unter den Text?!

Edit: bei width: auto werden die Bilder überhaupt nicht angezeigt, bei width:30% (beispielhaft), tritt die oben geschriebene Problematik auf.

Ein wirklich triviales Problem, aber irgendwie häng ich fest

Bearbeitet 7. Januar 2012 von sylenz

[sylenz]

Ok, ich habs nun hinbekommen, wenn auch etwas tricky.

Da beide Bilder identisch sind, habe ich einfach einen container über die gesamte Breite (mit dem Hintergrundbild) definiert und einen zweiten Container mit dem Schriftzug per

< position:absolute;width:700px;left:50%;margin-left: -350px; top:15px; > darübergelegt.

Scheint zu funktionieren, dennoch wäre ich über eine allgemeingültige Erklärung wie das mit drei divs / spans funktionieren könnte dankbar .

[Servior]

Das Problem liegt oftmals am fehlenden Inhalt.

Manche Browser setzen bei leeren Elementen "height=0", auch dann wenn man die Höhe angibt.

In der Regel reicht es wenn man ein Leerzeichen o.ä. als Inhalt angibt damit die Höhe richtig übernommen wird und die Bilder angezeigt werden.