✔ Warum <div/> statt <span/> - Warum muss ich <a/> formatieren ?

[angelikamorgan]

Das Folgende Ergebnis möchte ich erzielen:

Bild bzw. richtige Lösung:



Die Lösung sieht folgendermaßen aus (Quelltext 1):

<div style="width: 160px;">

	<div style="width: 160px; background-color: orange; height: 23px;">
		<div style="background-color: red; width: 44px; float: left;"><span style="margin-left: 10px;">left</span></div>
		<div style="background-color: yellow; width: 116px; height: 14px; float: right; text-align: right; margin-top: 3px;">
			<div style="margin-right: 10px; background-color: green; height: 14px;">
				<a href="#"><img style="background-color: purple;" border="0" src="./img/move.gif"></img></a
				><a href="#"><img style="background-color: purple;" border="0" src="./img/collapse.gif"></img></a
				><a href="#"><img style="background-color: purple;" border="0" src="./img/setting.gif"></img></a>
			</div>
		</div>
	</div>
	
</div>

Bovor ich zum Ergebnis gekommen bin, habe ich eine Stunde meines Lebens mit dem folgenden Ansatz (Quelltext 2) verschwendet.

<div style="width: 160px;">

	<div style="width: 160px; background-color: orange; height: 23px;">
		<div style="background-color: red; width: 44px; float: left;"><span style="margin-left: 10px;">left</span></div>
		<div style="background-color: yellow; width: 116px; height: 14px; float: right; text-align: right; margin-top: 3px;">
			<span style="margin-right: 10px; background-color: green; height: 14px;">
				<a href="#"><img style="background-color: purple;" border="0" src="./img/move.gif"></img></a>
				<a href="#"><img style="background-color: purple;" border="0" src="./img/collapse.gif"></img></a>
				<a href="#"><img style="background-color: purple;" border="0" src="./img/setting.gif"></img></a>
			</span>
		</div>
	</div>
	
</div>

Ich würde gerne verstehen, warum die untere Lösung (Quelltext 2) nicht funktioniert!

Ergebnis von Quelltext 2 bzw. falsche Lösung:


Um den grünen Hintergrund zu fixen, muss ich mit <div /> statt mit <span /> arbeiten.
Um die Lücke zwischen den Icons zu entfernen muss ich meine Links <a /> komisch formatieren.

<a href="#"><img>...</img></a
><a href="#"><img>...</img></a
><a href="#">

Die folgende Schreibweise funktioniert nicht:

<a href="#"><img>...</img></a>
<a href="#"><img>...</img></a>
<a href="#">

Was soll das ?


Gruß
Angelika

 

[Maik]

Hi,

das ist ganz kurz erklärt: Inline-Elemente neigen dazu, Lücken im Layout zu erzeugen, die von den Whitespaces (= Leerzeichen, Zeilenumbrüche, Tab-Einrückungen) im Quellcode herrühren. Wo das auftritt, wird immer empfohlen, das Element mit display:block oder der float-Eigenschaft auszuzeichnen.

Im übrigen gehört das img-Element zur Familie der "Standalone-Tags" und besitzt überhaupt kein </img>-Tag. In XHTML werden diese Elemente stattdessen mit einem Slash geschlossen - also <img src="..." alt="..." />.

mfg Maik

 

[angelikamorgan]

Hallo Maik,

die Sache mit dem image Tag war mir neu... thx

Wo muss ich display:block einsetzen? Ich habe display:block an vielen Stellen eingesetzt. Konnte die Lücken bis jetzt nur durch die Formatierung schließen.

Die Lösung muss unter FF3 und IE6 (ja, Internet Explorer 6) funktionieren

Hast du auch eine Antwort auf die Sache mit dem <span />

Vielen Dank
Angelika

 

[Maik]

Hi,

das span-Element zählt ebenfalls zu den Inline-Elementen, und kann daher keine Höhenangabe annehmen, es sei denn, es wird zusätzlich mit display:block formatiert.

mfg Maik

 

[angelikamorgan]

Danke...