Bild und Text auf einer Linie / Fehler im IE

[Jens Schärer]

Hallo,

ich möchte gerne ein Bild und einen Text direkt nebeneinander positionieren, hierfür möglichst keine Tabellen verwenden. Ich möchte, dass Bild und Text auf einer Linie stehen, falls das Bild größer/höher wie der Text ist, soll der Text vertikal mittig zum Bild angezeigt werden.
Bei folgendem Code funktioniert das wunderbar im Opera und Firefox, der IE zeigt das Bild nicht an.

<div style="margin: 10px; padding: 5px; background: #EFEFEF; border: 1px solid #999999;">
  <div class="text" style="color: #FF0000;">
    <div style="float: left;"><img src="projects/portaladmin/output/images/buttons/delete.gif" width="16" height="16" alt="" /></div>
    <div><span style="padding-left: 5px;"><b>Das Feld darf nicht leer sein!</b></span></div>
  </div>
</div>

Wenn ich die Hintergrundfarbe des äußersten Divs entferne wird das Bild angezeigt. Es scheint also, als ob sich das äußere Div über die inneren Divs legt. Wie kann ich dies umgehen bzw. im IE beheben?
Mit z-index hab ich schon rumgespielt, hat leider nicht geholfen.

Gruß,
Jens

[Ingo Turski]

Hi,

wieso dieser Tag-Verhau?

<p class="text" style="margin: 10px; padding: 5px; background: #EFEFEF; border: 1px solid #999999; color: #FF0000; font-weight:bold;">
<img style="vertical-align:middle; margin-right:5px; width:16px; height:16px;" src="projects/portaladmin/output/images/buttons/delete.gif" alt="" />
Das Feld darf nicht leer sein!</p>

sollte dasselbe tun.

freundliche Grüße
Ingo

[Jens Schärer]

Hi,
[...]
sollte dasselbe tun.

Hi,

tuts aber nicht ;) Auf diese "primitive" Lösung bin ich auch schon gekommen. Funktioniert weder im Mozilla noch im IE oder Opera...
Weitere Ideen?

Gruß,
Jens

[Ingo Turski]

Hi,

tuts aber nicht ;)

ist keine hilfreiche Aussage. Worin unterscheidet sich die Darstellung von der gewünschten?
Das Bild steht mittig mit dem gewünschten Abstand links neben dem Text und um den Absatz ist ein Rahmen. Ich weiß natürlich nicht, ob die Definitionen in Deiner Klasse "text" hieran etwas ändern.

freundliche Grüße
Ingo

[Jens Schärer]

Hi,

Worin unterscheidet sich die Darstellung von der gewünschten?

Das Bild wird mittig im Div angezeigt, der Text klebt an der Decke. Vertical-align hab ich schon so ziemlich überall probiert einzusetzen, das funktioniert leider nicht.

Das Bild steht mittig mit dem gewünschten Abstand links neben dem Text und um den Absatz ist ein Rahmen. Ich weiß natürlich nicht, ob die Definitionen in Deiner Klasse "text" hieran etwas ändern.

in meiner Klasse text steht nur die Formatierung für den Text drin, keinerlei Positionsangaben.

So siehts aus:

[B] [mein Text]
[i]
[l]
[d]

so solls aussehen (natürlich nicht mit der Spalte in der Mitte ,der Text soll dort mittig sein ;)

[B]
[i]
    [mein Text]
[l]
[d]

Gruß,
Jens

[Ingo Turski]

Hi,

so solls aussehen (natürlich nicht mit der Spalte in der Mitte ,der Text soll dort mittig sein ;)

[B]
[i]
    [mein Text]
[l]
[d]

und genauso sieht's bei mir aus, wenn ich den vorgeschlagenen Quelltext in eine Datei kopiere und natürlich ein existentes (und damit man es sieht größeres) Bild referenziere.
Etwas anderes ist auch nicht zu erwarten, da es sich um relativ einfache CSS-Definitionen handelt, die allenfalls ältere Browser wie Netscape 4 teilweise überfordern.

freundliche Grüße
Ingo

[wahsaga]

hi,

ich möchte gerne ein Bild und einen Text direkt nebeneinander positionieren, hierfür möglichst keine Tabellen verwenden.

die tag-suppe, die du jetzt stattdessen gekocht hast, ist aber auch nicht viel appetitlicher ...

Bei folgendem Code funktioniert das wunderbar im Opera und Firefox,

ich sehe gar nicht, dass du dort irgend etwas bezüglich der verticalen ausrichtung des bildes und/oder des textes vorgegeben hättest.

das es "wunderbar funktioniert", würde ich hier für einen zufall halten, auf grund günstiger bildmaße.

Wenn ich die Hintergrundfarbe des äußersten Divs entferne wird das Bild angezeigt. Es scheint also, als ob sich das äußere Div über die inneren Divs legt.

kann man das irgendwo vollständig und/oder online sehen?

Mit z-index hab ich schon rumgespielt, hat leider nicht geholfen.

der hat auf nicht-positionierte elemente ja auch keinen einfluss.

gruß,
wahsaga

[Jens Schärer]

Hallo,

ich sehe gar nicht, dass du dort irgend etwas bezüglich der verticalen ausrichtung des bildes und/oder des textes vorgegeben hättest.

Der Browser richtet alle Elemente innerhalb des Divs automatisch vertikal aus bzw. der Text fließt in der Mitte des Blocks am Bild rechts vorbei. Deshalb ist es mittig, in einem XHTML-fähigen Browser soll man das auch so erwarten. Bei IE wohl nicht so ganz...

das es "wunderbar funktioniert", würde ich hier für einen zufall halten, auf grund günstiger bildmaße.

s.o.

kann man das irgendwo vollständig und/oder online sehen?

Nein, kann auch nicht veröffentlicht werden, sorry

der hat auf nicht-positionierte elemente ja auch keinen einfluss.

Gut zu wissen...

Sonstige Ideen/Vorschläge?
Gruß,
Jens

[wahsaga]

hi,

Der Browser richtet alle Elemente innerhalb des Divs automatisch vertikal aus

ach ja? seid wann?

bzw. der Text fließt in der Mitte des Blocks am Bild rechts vorbei.

es gibt in deinem code nichts, was darauf hindeutet bzw. dies bewirken würde (oder habe ich was wichtiges übersehen).

kann man das irgendwo vollständig und/oder online sehen?
Nein, kann auch nicht veröffentlicht werden, sorry

OK, muss die CIA ihre probleme halt selber lösen.

gruß,
wahsaga

[Chriss]

<div><span style="padding-left: 5px;"><b>Das Feld darf nicht

Hi

also ich muss sagen bei mir ist das Feld im IE nicht leer. Was soll eigentlich mit den Divs passieren wenn das Bild größer wird? Sollen die mitgehen? Haben sie eine Positionierung?

Vorher kann ich dir nicht helfen?!

Mfg Chriss

[Christian Kruse]

你好 Jens,

<div style="margin: 10px; padding: 5px; background: #EFEFEF; border: 1px solid #999999;">
  <div class="text" style="color: #FF0000;">
    <div style="float: left;"><img src="projects/portaladmin/output/images/buttons/delete.gif" width="16" height="16" alt="" /></div>
    <div><span style="padding-left: 5px;"><b>Das Feld darf nicht leer sein!</b></span></div>
  </div>
</div>

Schreibs doch so:

  
<div style="margin: 10px; padding: 5px; background: #EFEFEF; border: 1px solid #999999;">  
  <div class="text" style="color: #FF0000;">  
    <div style="float: left;"><img src="projects/portaladmin/output/images/buttons/delete.gif" width="16" height="16" alt="" /></div>  
    <div><span style="padding-left: 5px;"><b>Das Feld darf nicht leer sein!</b></span></div>  
  </div>  
</div>  

再见,
克里斯蒂安

[Ingo Turski]

Hi,

Schreibs doch so:

ist nicht Dein Ernst, daß Du dieser DIV-Wüste mit

<div><span style="padding-left: 5px;"><b>Das Feld darf nicht leer sein!</b></span></div>

  
auch noch ein völlig überflüssiges weiteres DIV hinzufügst, oder?  
  
freundliche Grüße  
Ingo

-- 
[[barrierefreie Webseitenerstellung](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html)] ([Tanzschritte gesucht?](http://www.1ngo.de/tanz/);-)

[Christian Kruse]

你好 Ingo,

Schreibs doch so:
ist nicht Dein Ernst, daß Du dieser DIV-Wüste mit

<div><span style="padding-left: 5px;"><b>Das Feld darf nicht leer sein!</b></span></div>

>   
> auch noch ein völlig überflüssiges weiteres DIV hinzufügst, oder?  
  
Wieso ich? Hat er doch gemacht. \_Mir\_ ging es nur um das [code lang=html] :)  
  
再见,  
 克里斯蒂安  

-- 
"Ich muss auflegen, mein Essen ist gleich fertig."  
"Oh, was gibt 's denn?"  
"Hmm. Die Packung liegt schon im Muell, keine Ahnung.  

[Ingo Turski]

Hi,

Wieso ich? Hat er doch gemacht. _Mir_ ging es nur um das [code lang=html] :)

ach so... sorry, ich hatte dieses DIV nicht mehr im Gedächtnis und wohl angenommen, daß die SPAN-Verschachtelungen für's Syntax-Highlighting Spuren bei Dir hinterlassen haben könnten. ;-)

freundliche Grüße
Ingo

[Christian Kruse]

你好 Ingo,

Wieso ich? Hat er doch gemacht. _Mir_ ging es nur um das [code lang=html] :)
ach so... sorry, ich hatte dieses DIV nicht mehr im Gedächtnis und wohl
angenommen, daß die SPAN-Verschachtelungen für's Syntax-Highlighting
Spuren bei Dir hinterlassen haben könnten. ;-)

Hehe, den Code muss ich ja zum Glueck nicht von Hand schreiben ;-)

再见,
克里斯蒂安

[MudGuard]

Hi,

ist nicht Dein Ernst, daß Du dieser DIV-Wüste [...]
auch noch ein völlig überflüssiges weiteres DIV hinzufügst, oder?

Also ich seh in CKs Posting nur einen Unterschied zwischen den beiden Codes:

Der von CK ist syntaxgefärbt.

cu,
Andreas