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

Status
Nicht offen für weitere Antworten.
A

angelikamorgan

Mitglied
Das Folgende Ergebnis möchte ich erzielen:

Bild bzw. richtige Lösung:
1.jpg


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

HTML: 
<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.

HTML: 
<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:
2.jpg

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.

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

Die folgende Schreibweise funktioniert nicht:

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

Was soll das ? :)


Gruß
Angelika
 
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
 
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
 
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
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück