CSS span absolut in td positionieren

[Cave Johnson]

Hi,

ich habe eine Tabellenzelle in der ich ganz rechts oben ein span positionieren möchte. Natürlich kapieren das alle vernünftigen Browser außer Firefox, wenn ich die Zelle relativ und das span darin absolut positioniere. FF positioniert das span dann absolut zur ganze Seite.

Alternative wäre wohl, in der Zelle ein div zu verwenden und darin dann das span zu positionieren. Da die Zelle aber eine variable Höhe hat, kann ich dieser kein height zuweisen - und damit kann ich auch das div nicht mit height: 100% auf die Höhe der Zelle strecken.

Gibts noch eine Möglichkeit, dass ordentlich hinzubekommen? Hab die beiden Varianten mal hier aufgebaut: http://jsfiddle.net/GAsnc/1/. Ein Hintergrundbild statt span wäre möglich, aber ist natürlich nicht so flexibel.

 

[Daaron]

#mitdiv td {border:1px solid black; width: 100px;vertical-align:top;}

 

[Cave Johnson]

Okay das geht; aber dann klebt natürlich der restliche Text auch oben

 

[Daaron]

Dann gib der ersten Spalte, in der ein Span liegen soll, eine entsprechende Klasse und wende das vertical-align nur auf die Klasse an.
Wozu überhaupt <table>? Sind es wirklich tabellarische Daten? Wenn nicht, dann sind Tabellen eh das komplett falsche HTML-Element. Nimm in dem Falle lieber entsprechend geschachtelte Divs mit display:table-row und table-cell.

 

[Cave Johnson]

Mit restlicher Text meinte ich den Text in dieser Zelle. Sieht einfach doof aus wenn der oben ist

Ich will das ganze hier für die erste Spalte: http://www.usbstick-charts.de/

 

[Crizzo]

Gib dem <td> "position: relative" und dem <span> dadrin "position:absolute; right:0; top: 0;" und dann läuft das auch. Das Elternelement (hier <td>) muss "position: relative" bekommen, damit das <span> relative zu diesem positioniert wird und nicht zum Bildschirm des Betrachters.

Grüße

 

[Daaron]

Genau das hatter gemacht und genau das funktioniert im Firefox nicht. Guck dir das JSFiddle doch erst einmal an.

 

[Crizzo]

Ah, dann verhält sich der Firefox korrekt. "position:relative" ist für Tabellen Reihen, Zellen, Kopf und Co nicht in CSS2.1 definiert. Aber für die Tabelle alleine geht es. Also wenn du jetzt dieser zwei Zellen mit nur einer Tabelle erstellst, dann könnte es funktionieren.

Wenn ich allerdings den Inhalt sehe, wäre vielleicht eine "Definitionsliste" besser, wenn du die mit "float" nebeneinander stellst und per "clear" auch für da "runter rutschen" sorgst, sollte das mit "position: absolute" deutlich besser gehen.

Edit: Wenn du es so machst, wie bei deinem Link mit dem <td><div>..</div></td>, wieso willst du das <div> dann auf 100% der Höhe von <td> aufblähen?

 

[Cave Johnson]

Ich müsste das div auf 100% strecken, damit das Span darin ganz oben in der Zelle sitzt. Andernfalls sieht es ja so aus:

 

[Crizzo]

Das Div muss doch nur im <td> ganz oben beginnen und dann über die volle Breite gehen, aber nicht bis ganz nach unten.

Hast du mal geschaut, wieso das <div> da in der Mitte rumhängt?

 

[Daaron]

deshalb: <td> hat standardmäßig vertical-align:middle;

 

[bruteforce9860]

@Cave Johnson:
Sind die Tables zwingend notwenig oder wäre ein DIV-Gerüst auch akzeptabel?
Mittlerweile gibt es ja display:table(/-row/-cell), damit sollte ein Table-Layout gut klappen - auch ohne tables.

Ansonsten setzt du die fake-Tabelle direkt in die TD, um den Inhalt herum. Hier meine Änderungen als Inline-Style, mehr brauch man nicht (dann natürlich noch deine borders entfernen).

edit: Ggf. td height:100% setzen

 

[Cave Johnson]

Also bei mir funktioniert das nicht solange ich td keine fixe Höhe (also bspw. 40px) gebe; 100% funktioniert nicht - ansonsten würde ja auch ein einzelnes simples div ausreichen wie hier:

 

[bruteforce9860]

Ich habe es bei 17 (Beta) und 18 (Aurora) versucht, bei beiden hat es funktioniert (mit td height 100%).
Welche Firefox Version hast du denn, die finale 16.0.1? Kannst dann ja mal die 17 parallel installieren, vielleicht hat sich was geändert?

 

[Cave Johnson]

Ganz anders

Ich mach jetzt einfach zwei Spalten draus: die erste mit dem Text, die zweite mit dem span. Dann kann ich die gemütlich unabhängig voneinander formatieren.

Erspart mir auch das div-Gestrüp.