Diese Website ist ein Archiv und wird nicht mehr gepflegt. Aktuelle Informationen über mich und meine Aktivitäten finden Sie auf pmueller.de

 

 

Artikel - Detailansicht

<< Joomla - Inhalte flexibel verwalten  |  Alle Artikel   |   Word 2007 - Lost in Translation >>

Zwischenraum bei horizontalen Listen per display:inline

Auf der Suche nach der Ursache für den Zwischenraum bei einer einfachen horizontalen Navigation per display:inline habe ich einen kleinen Testcase gebaut und in der Mailingliste css-design gepostet.

Dank der kompetenten Listenteilnehmer gibt es jetzt nicht nur eine defintive Ursache, sondern auch gleich mehrere Lösungen. Auf der folgenden Seite finden Sie sowohl den Testcase als auch die möglichen Lösungen:

Kurzfassung: Ideal wäre display:table-cell für die Listenelemente. Ansonsten gefällt mir von den möglichen Lösungen “Set a space to fix a space” am besten: Eins und eins sind keins. Augenzwinkernd, aber standardgemäß.

06/24/07 | drucken | Gelesen: 4561

Kommentare zu Eintrag Nr. 504

Timo B. schrieb:

Hallo Peter,

der Artikel hat zwar schon ein paar Tage auf dem Rücken, aber ich will dich trotzdem mal was fragen.

Warum gibst du den Listenelementen nicht einfach float?

10/02/08 19:04:54

Peter schrieb:

Float wandelt die Inline-Boxen in Block-Boxen um, und dann ist der Whitespace weg. Steht tatsächlich nicht aufgelistet, aber in dem Testcase ging es haupsächlich darum , zu verstehen, wieso der Whitespace überhaupt vorhanden ist.

In "Little Boxes Teil 2" wird das im Kapitel "Whitespace - Der Leerstellenpakt" ausführlich erklärt. Dort wird auch genau erklärt, wieso bei einem Float die Leerstelle verschwunden ist.

10/02/08 19:14:00

Jens schrieb:

Gute Idee!
Wenn man nun noch die abschließenden Whitespaces in einen SPAN einschließt, der display:none erhält - dann sind sie ganz weg.
Habe es kurz getestet auf FF und IE - kannst Du das verifizieren?

02/04/09 14:31:13

Jens schrieb:

Korrektur: FF macht es leider nicht. Offensichtlich führt bei ihm dazu, dass die Entfernung des "inneren/ersten" Whitespace das "äußere/zweite" wieder zum "ersten" -und damit sichtbar- werden lässt.
Man muss ihm also das "innere" lasssen (kein "display:none;"), kann ihm aber mit "font-size: 0em" beikommen.

02/04/09 14:50:08

Auf dieser Website können keine Kommentare mehr geschrieben werden.

Falls Sie mir etwas mitteilen möchten, benutzen Sie bitte das
Kontaktformular auf pmueller.de