CSS Bild soll direkt neben Text erscheinen

[darton]

Hallo!
Ich habe ein kleines Problem. Ich habe eine Tabelle und möchte neben den Überschriften diese kleinen Pfeile anzeigen lassen, damit ich die Tabelle anschließend anhand der Daten in dieser Spalte sortieren kann. Das habe ich nun auch versucht, aber das Pfeil-Symbol wird unter der Überschrift angezeigt. Wenn ich mit float: right; arbeite, steht das Symbol zwar rechts daneben, aber am Zellenrand und es soll eben direkt neben dem Text stehen ohne einen Zwischenraum. Ihr könnt euch die Seite hier anschauen. Wie löse ich das Problem?

 

[Turas]

Warum fügst du nicht den Pfeil direkt als Bild ein? Da es ein Objekt ist, mit dem man direkt interagiert wäre es sinnvoller, es im HTML Code einzufügen. CSS ist nur für die Darstellung, nicht die Inhaltselemente.

Wenn es normal im Code steht, ist es auch direkt neben dem Text, außer die Zelle ist zu klein. Dann musst du ein   zwischen Text und Bild machen, das sollte sogar beim jetzigen Code funktionieren.

 

[darton]

Ja, da hast du Recht. Aber, wenn ich das in einem img-Tag mache, kann ich nicht so einfach das Bild austauschen. Wenn es in einem span drinne ist, reicht es, wenn ich nur die Klasse dazu verändere.

 

[Turas]

Ok, dann probiere es mal mit einem &npsp; zwischen Text und <span> und ohne float.

Ergänzung (16. Oktober 2011)

Zwischen Nachnahme und &nbsp; darf auch kein Leerzeichen stehen, sonst macht ein &nbsp; wenig Sinn

 

[darton]

Hmm...das bewirkt leider nur, dass die Linie unter dem Link länger wird.

 

[Turas]

Ah, ich habe den Fehler gefunden. Du hast bei der Klasse .pfeil display:block gesetzt. Lass das weg, denn das willst du ja gerade nicht.

Ergänzung (16. Oktober 2011)

Hmm, dann ist der Pfeil weg ^^

 

[darton]

Richtig, dann ist der Pfeil weg Das war auch der Grund, warum ich display: block; eingefügt habe.

 

[Turas]

Naja, das Problem ist, dass der span keinen Inhalt hat, und deswegen nur auf 0x0 Pixel Größe gerendert wird.

Ergänzung (16. Oktober 2011)

Ok, Problem erkannt: Man kann einem Inline-Element keine Größe zuordnen, die wird immer aus dem Inhalt errechnet. Mögliche Lösungen:
* als display:block in neue Zeile
* als float in derselben Zeile, aber am Rand
* als display:inline, jedoch ohne Größenangabe und mit drei &nbsp;

 

[darton]

Ja, das mit den drei &nbsp; habe ich jetzt auch rausgefunden. Ist zwar nicht die feine Art, aber es funktioniert wenigstens.

 

[chriz0101]

Was ist dem mit dem Pseudoselektor :before?