nicht angemeldet
Hallo,
ich habe folgendes Problem: ich habe viele Elemente, die wie in einer Tabelle schön geordnet erscheinen sollen. Dazu weise ich jeden Element ein span class zu mit einer festen Breite. Im IE funktioniert das super, Mozilla/Firefox ignorieren dies aber geflissentlich.
span (in der Default HTML-Darstellung) ist im CSS-speak ein sogenanntes „non-replaced inline element“. Diese Inline-Elemente sind Textstücke, die ihrer Natur nach keine feste Breite haben. Und auch wenn man ihnen eine feste Breite zuweist, nehmen sie diese nicht an, da das nicht zu ihrer Natur gehört. Außerdem ist das so im CSS-Standard festgeschrieben.
Wie löse ich das Problem?
Du solltest den spans sagen, dass sie keine Inline-Elemente mehr sein sollen, sondern Blockelement. Dazu nutzt Du display:block. Blockelementen kann man eine feste Breite zuweisen.
Dummerweise hast Du dann ein neues Problem - Blockelemente erzeugen einen Absatz, den Du sicherlich nicht willst und erstrecken sich über die gesamte Breite. Es gibt zwei mögliche Lösungen.
a) Du nutzt nicht display:block, sondern display:table-cell, da Du ja einen tabellenähnlichen Effekt erreichen möchtest. Allerdings macht das in einigen unmodernen Browsern einige Probleme, ist also derzeit nicht wirklich praktikabel. Traurig ist die Realität.
b) Du nutzt doch display:block, lässt die Elemente aber floaten. Alle Elemente auf float:left; mit gleichen Breiten sollte ein ansprechendes Ergebnis liefern.
Zur zweiten Lösung zwei Hinweise auf ähnliche Lösungsstrategien. Ich vermute, Du willst irgendeine horizontale Navigationsleiste basteln. Diese sind in den letzten beiden Jahren recht hip geworden, insbesondere, wenn man sie semantisch überkorrekt als Liste auszeichnet und mittels CSS in eine horizontale Leiste umwandelt. Sozusagen einer der vorvorletzten Akt der CSS-Coolness. Inzwischen wird das Thema auch in SELFHTML behandelt:
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#horizontal
(Zum generellen Verständnis sollte man die ganze Seite lesen)
Das ganze hat ursprünglich sich von einem Artikel bei A List Apart aus verbreitet, wenn Du dagegen Lust auf englischen Text hast:
http://www.alistapart.com/articles/taminglists/
Tim