Listenformatierung

[Zeromancer]

Hallo,

in einer <ul> habe ich mehrere <li>, die für eine horizontale Navi mit display:inline ausgerichtet werden.

Nun möchte ich die Verweise, die zwischen <li> und </li> stehen eigentlich gleich breit machen und komplett klickbar. Dies habe ich mittels 'a {display:block; width:50px; height:23px;} gelöst. Mit display:block für die Links wird aber display:inline aufgehoben. Wer kann mir mit einem Hinweis weiterhelfen?

Danke schon mal.

Mit freundlichen Grüßen

André

[schwarze Piste]

Tachchen!

Wie ordnest du denn andere Blocklevelelemente nebeneinander an? ;-)

Gruß

Die schwarze Piste

[Jeena Paradies]

Hallo,

Mit display:block für die Links wird aber display:inline aufgehoben. Wer kann mir mit einem Hinweis weiterhelfen?

Arbeite mit float und guck dir diese Seite an: http://css.maxdesign.com.au/listamatic/

Grüße
Jeena Paradies

[Axel Richter]

Hallo,

in einer <ul> habe ich mehrere <li>, die für eine horizontale Navi mit display:inline ausgerichtet werden.

Nun möchte ich die Verweise, die zwischen <li> und </li> stehen eigentlich gleich breit machen und komplett klickbar. Dies habe ich mittels 'a {display:block; width:50px; height:23px;} gelöst. Mit display:block für die Links wird aber display:inline aufgehoben. Wer kann mir mit einem Hinweis weiterhelfen?

Lass die LI-Elemente floaten.
li {width:200px; float:left;}

viele Grüße

Axel

PS: Wobei ich gegen solche extreme Spielereien bin. Wenn eine horizontale Navigation angebracht ist, warum soll dann ein Textbrowser keine solche sehen, sondern eine Liste?

[Jeena Paradies]

Hallo,

PS: Wobei ich gegen solche extreme Spielereien bin. Wenn eine horizontale Navigation angebracht ist, warum soll dann ein Textbrowser keine solche sehen, sondern eine Liste?

Weil ich sonst auch noch immer irgendetwas dazwischen machen müsste dass der Textbrowser auch sieht wie

Über mich | Blabla | Über dich | Impressum

und wie soll ich dieses | vor dem user verstecken? ich müsste spans einsetzen und es dann damit verstecken. Und immerhin ist es doch eine Link_Liste_ , warum sollte ich sie denn dann nicht auch als Liste auszeichnen?

Grüße
Jeena Paradies

[Axel Richter]

Hallo,

Weil ich sonst auch noch immer irgendetwas dazwischen machen müsste dass der Textbrowser auch sieht wie
Über mich | Blabla | Über dich | Impressum

Warum? Ein Textbrowser würde eine einfache Aneinanderreihung von Links doch auch darstellen:

Über mich Blabla Über dich Impressum
‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾
Die horizontale Anordnung wählst Du doch, um mehr Platz in der Vertikalen für den eigentlichen Seiteninhalt zu haben. Warum willst Du das dem Textbrowser-Nutzer nicht gönnen?

Und immerhin ist es doch eine Link_Liste_ , warum sollte ich sie denn dann nicht auch als Liste auszeichnen?

Nein. Das da oben ist eine Aneinanderreihung von Links.

viele Grüße

Axel

[at]

Hallo.

Und immerhin ist es doch eine Link_Liste_ , warum sollte ich sie denn dann nicht auch als Liste auszeichnen?
Nein. Das da oben ist eine Aneinanderreihung von Links.

Aneinanderreihungen von Verweisen entstehen innerhalb Fließtext durch eine hohe Verweisdichte und ergeben im Allgemeinen einen sinnvollen Zusammenhang. Navigationsleisten sind Listen von Verweisen, und zwar unabhängig von der Form ihrer Darstellung. Oder hast du dir schon einmal überlegt, wie du auf Wunsch aus deiner "Aneinanderreihung von Links" auf Wunsch vertikal anordnest? Die Problemstellung ist dann eben die umgekehrte und eine bloße Überdehnung der Semantik hilft da nicht weiter.
MfG, at

[Axel Richter]

Hallo,

Aneinanderreihungen von Verweisen entstehen innerhalb Fließtext durch eine hohe Verweisdichte und ergeben im Allgemeinen einen sinnvollen Zusammenhang.

Diese Diskussion hatten wir beide schon einmal. Wir sind, wie es scheint, immer noch nicht einer Meinung. Das ist aber nicht schlimm, damit kann ich leben ;-)).

Navigationsleisten sind Listen von Verweisen, und zwar unabhängig von der Form ihrer Darstellung. Oder hast du dir schon einmal überlegt, wie du auf Wunsch aus deiner "Aneinanderreihung von Links" auf Wunsch vertikal anordnest?

Durch diese Anforderung würde sich die Dokumentstruktur ändern. CSS ist nicht dafür gedacht, dies umzusetzen. HTML bestimmt die Dokumentstruktur, also z.B. ob eine Liste mit Links oder eine Aneinanderreihung von Links in einer Zeile vorhanden sein soll. CSS bestimmt das Aussehen der Elemente. Es kann und soll aber aus einer Liste keine Zeile machen und auch nicht umgekehrt.

viele Grüße

Axel

PS: CSS-Switcher sind kindische Spielerei unter dem Motto: "Hey, ich kann was, ich bin cool!"

[Ingo Turski]

Hi,

CSS bestimmt das Aussehen der Elemente. Es kann und soll aber aus einer Liste keine Zeile machen

und warum nicht? Mal ein etwas erweitertes Beispiel:
* Menüpunkt 1
* Menüpunkt 2
  # Unterpunkt 1
  # Unterpunkt 2
* Menüpunkt 3

Dies macht als Liste Sinn, könnte aber in CSS auch so formatiert werden:
Menüpunkt 1   |   Menüpunkt 2   |   Menüpunkt 3
                - Unterpunkt 1
                - Unterpunkt 2
und würde auch ebenfalls eine sinnvolle Anzeige ergeben.

freundliche Grüße
Ingo

[Axel Richter]

Hallo,

CSS bestimmt das Aussehen der Elemente. Es kann und soll aber aus einer Liste keine Zeile machen
und warum nicht?

Weil das meine Meinung ist ;-)) und meinem Verständnis vom Zusammenspiel von HTML und CSS widersprechen würde.

Mal ein etwas erweitertes Beispiel:
* Menüpunkt 1
* Menüpunkt 2
   # Unterpunkt 1
     . Unter-Unterpunkt 1
     . Unter-Unterpunkt 2
     . Unter-Unterpunkt 3
   # Unterpunkt 2
     . Unter-Unterpunkt 1
* Menüpunkt 3
* Menüpunkt 4
   # Unterpunkt 1
     . Unter-Unterpunkt 1
     . Unter-Unterpunkt 2
   # Unterpunkt 2
* Menüpunkt 5
____________________________________________________________________
Menüpunkt 1          |   Menüpunkt 2          |   Menüpunkt 3
                     |   - Unterpunkt 1       |
                     |    * Unter-Unterpunkt1 |
                     |    * Unter-Unterpunkt2 |
                     |    * Unter-Unterpunkt3 |
                     |   - Unterpunkt 2       |
                     |    * Unter-Unterpunkt1 |
_____________________|________________________|______________________
Menüpunkt 4          |   Menüpunkt 5          |

• Unterpunkt 1       |                        |
   * Unter-Unterpunkt1 |                        |
   * Unter-Unterpunkt2 |                        |
• Unterpunkt 2       |                        |

*AUA*

viele Grüße

Axel

[at]

Hallo.

*AUA*

Hast du dir den Kopf gestoßen? Soll ich pusten?
Im Ernst: Alles eine Frage der CSS-Formatierung.
MfG, at

[Ingo Turski]

Hi,

*AUA*

wieso? ein Menü mit Unter-Unter(-Unter...)Punkten würde ich auch nicht horizontal abbilden wollen und wenn, dann bestimmt nicht, ohne ein Umbrechen zu verhindern (natürlich mit CSS;-)

freundliche Grüße
Ingo

[Axel Richter]

Hallo,

*AUA*
wieso? ein Menü mit Unter-Unter(-Unter...)Punkten würde ich auch nicht horizontal abbilden wollen

Sage ich doch. Die Frage, ob Liste oder nicht Liste, hängt vom Inhalt und der Struktur des Menüs ab, ist also bei der Planung des HTMLs zu klären. CSS spielt bei dieser Entscheidung noch keine Rolle.

und wenn, dann bestimmt nicht, ohne ein Umbrechen zu verhindern (natürlich mit CSS;-)

Aha. Du bist also der Meinung, die Darstellung in meinem vorherigen Posting würde akzeptabler sein, wenn alle Menüpunkte nebeneinander stehen? Das sehe ich nicht so. Du verschenkst massenhaft vertikalen Platz, wenn Hauptmenüpunkte _keine_ Unterpunkte haben.

Es gäbe eine Layout-Idee, bei der ich eine "horizontale Liste" einsetzen müsste:
Die Hauptmenüpunkte werden horizontal aufgeführt. Beim Überfahren mit der Maus werden die Untermenüpunkte als Dropdown-Menü eingeblendet.
Hier _muss_ eine Liste verwendet werden, damit CSS-lose Browser auch eine Menüstruktur darstellen können. Allerdings ist ein solches Menü nicht realisierbar, weil die dafür erforderlichen CSS-Möglichkeiten zwar vorhanden sind, aber nicht von allen Browsern umgesetzt werden. JavaScript wäre nur dann eine Lösung, wenn man seinen Einsatz _erzwingen_ könnte, sobald CSS zum Einsatz kommt, also nie ;-)).

viele Grüße

Axel

[at]

Hallo.

Sage ich doch. Die Frage, ob Liste oder nicht Liste, hängt vom Inhalt und der Struktur des Menüs ab, ist also bei der Planung des HTMLs zu klären. CSS spielt bei dieser Entscheidung noch keine Rolle.

Eben. Denn es ist ja immer eine Liste, unabhängig vom CSS.
MfG, at

[Ingo Turski]

Hi,

Sage ich doch. Die Frage, ob Liste oder nicht Liste, hängt vom Inhalt und der Struktur des Menüs ab, ist also bei der Planung des HTMLs zu klären. CSS spielt bei dieser Entscheidung noch keine Rolle.

Eben - wie at auch schon sagte. Nur: wenn ich eine Liste verwende, stehen mir über CSS alle Möglichkeiten der Formatierung offen.

Aha. Du bist also der Meinung, die Darstellung in meinem vorherigen Posting würde akzeptabler sein, wenn alle Menüpunkte nebeneinander stehen?

akzeptabler ja, akzeptabel nein.

Hier _muss_ eine Liste verwendet werden, damit CSS-lose Browser auch eine Menüstruktur darstellen können.

Eigentlich doch ein Votum, um generell eine Liste zu verwenden, oder?

freundliche Grüße
Ingo

[Axel Richter]

Hallo,

Eben - wie at auch schon sagte. Nur: wenn ich eine Liste verwende, stehen mir über CSS alle Möglichkeiten der Formatierung offen.

Nein. CSS kann auch A-Elemente formatieren. Und ja, ohne HTML-Liste mit CSS aus A-Elementen eine Liste zu bauen, finde ich genau so falsch, wie aus einer HTML-Liste eine horizontale Aneinanderreihung zu machen.

Hier _muss_ eine Liste verwendet werden, damit CSS-lose Browser auch eine Menüstruktur darstellen können.
Eigentlich doch ein Votum, um generell eine Liste zu verwenden, oder?

Schrieb ich nicht: "_Hier_ muss eine Liste verwendet werden."?[1]

Für eine Menüstruktur wie:

Startseite Über mich Mein Hobby Meine Familie Mein Haustier
‾‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾‾‾‾‾
würde ich keine Liste verwenden, _wenn_ ich sie später ohnehin horizontal anordnen möchte. Somit können auch Textbrowser die Links horizontal nebeneinander anordnen.

Für eine listenförmige Menüstruktur mit Hauptpunkten und Unterpunkten und, wenn sich das Menü ohnehin vertikal aufbauen soll, würde ich eine Liste verwenden. Allerdings dann auch als Listenstruktur zu erkennen, also in der Bildschirmdarstellung _vertikal_ fortlaufend aufgebaut.

[1] Die ständige Suche nach allgemeingültigen Lösungen führt irgendwann dazu, dass keine neuen Lösungen mehr gefunden werden.
... Das hat so zu sein. Das haben wir schon immer so gemacht. ...

viele Grüße

Axel

[Ingo Turski]

Hi,

Eben - wie at auch schon sagte. Nur: wenn ich eine Liste verwende, stehen mir über CSS alle Möglichkeiten der Formatierung offen.
Nein. CSS kann auch A-Elemente formatieren.

schon klar, aber die Möglichkeiten der Formatierung sind hier doch sehr eingeschränkt. Bei einer Liste habe ich außer dem A noch zwei weitere Elemente zur Verfügung.

Für eine Menüstruktur wie:

Startseite Über mich Mein Hobby Meine Familie Mein Haustier
‾‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾‾‾‾‾
würde ich keine Liste verwenden, _wenn_ ich sie später ohnehin horizontal anordnen möchte. Somit können auch Textbrowser die Links horizontal nebeneinander anordnen.

Wenn - ja. Aber bist Du Dir sicher, daß dieses Menü nicht irgendwann weitere Punkte bekommt (Mein Urlaub, mein neuer Beruf, Impressum;-) ? Und dann womöglich nicht mehr in eine Zeile paßt.
Abgesehen davon müßtest Du hier für eine Barrierefreiheit Trennzeichen verwenden.

freundliche Grüße
Ingo

[Axel Richter]

Hallo,

Für eine Menüstruktur wie:
Startseite Über mich Mein Hobby Meine Familie Mein Haustier
‾‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾‾‾‾‾
Abgesehen davon müßtest Du hier für eine Barrierefreiheit Trennzeichen verwenden.

Warum?
Wem reicht ein white space nicht als Trennzeichen bei einer Aneinanderreihung mehrerer _unterstrichener_ Verweisziele?

viele Grüße

Axel

[MudGuard]

Hi,

Warum?
Wem reicht ein white space nicht als Trennzeichen bei einer Aneinanderreihung mehrerer _unterstrichener_ Verweisziele?

Wie hört sich eine Unterstreichung an?

cu,
Andreas

[Axel Richter]

Hallo,

Warum?
Wem reicht ein white space nicht als Trennzeichen bei einer Aneinanderreihung mehrerer _unterstrichener_ Verweisziele?
Wie hört sich eine Unterstreichung an?

Ein Screenreader sagt nicht an, dass es sich bein dem Element um einen Verweis handelt? Wie erkennt der Hörer dann Verweise im Fließtext?

Ich stelle mir das, in meiner Unwissenheit, so vor:

TextBrowser:
Startseite Über mich Mein Hobby Meine Familie Mein Haustier
‾‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾‾‾‾‾
Reader:
Es folgen 5 Verweise. vorlesen?[Ja/Nein]
<Ja>
Verweis:"Startseite" folgen?[Ja/Nein] Verweis:"Über mich" folgen?[Ja/Nein] Verweis:"Mein Hobby" folgen?[Ja/Nein] Verweis:"Meine Familie " folgen?[Ja/Nein] Verweis:"Mein Haustier" folgen?[Ja/Nein]

viele Grüße

Axel

[Ingo Turski]

Hi,

Ich stelle mir das, in meiner Unwissenheit, so vor:

TextBrowser:
Startseite Über mich Mein Hobby Meine Familie Mein Haustier
‾‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾‾‾‾‾

was so ziemlich unübersichtlich aussieht, das mußt Du schon zugeben.

Reader:
Es folgen 5 Verweise. vorlesen?[Ja/Nein]

Ich glaube kaum, daß der Reader soweit im Text vorschaut und gar die Verweise zählt. Anders bei einer Liste, die ja einen eigenen Block mit Listenelementen darstellt.

Verweis:"Startseite" folgen?[Ja/Nein] Verweis:"Über mich" folgen?[Ja/Nein] Verweis:"Mein Hobby" folgen?[Ja/Nein] Verweis:"Meine Familie " folgen?[Ja/Nein] Verweis:"Mein Haustier" folgen?[Ja/Nein]

Wäre zwar möglich, dennoch fordert Barrierefreiheit hier einen klaren Trenner, der kein Leerzeichen und auch kein Zeilenumbruch sein darf.

freundliche Grüße
Ingo

[Jeena Paradies]

Hallo,

Startseite Über mich Mein Hobby Meine Familie Mein Haustier
‾‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾‾‾‾‾ ‾‾‾‾‾‾‾‾‾‾‾‾‾

Wie ist es eigentlich mit Screenreadern? Lesen die

Startseite Über mich Mein Hobby Meine Familie Mein Haustier

oder

Link:Startseite Link:Über mich Link:Mein Hobby Link:Meine Familie Link:Mein Haustier

Grüße
Jeena Paradies

[at]

Hallo.

Diese Diskussion hatten wir beide schon einmal. Wir sind, wie es scheint, immer noch nicht einer Meinung. Das ist aber nicht schlimm, damit kann ich leben ;-)).

Schlimm wäre es, wenn du das nicht könntest. Ich will ja niemanden umbringen.

Navigationsleisten sind Listen von Verweisen, und zwar unabhängig von der Form ihrer Darstellung. Oder hast du dir schon einmal überlegt, wie du auf Wunsch aus deiner "Aneinanderreihung von Links" auf Wunsch vertikal anordnest?
Durch diese Anforderung würde sich die Dokumentstruktur ändern.

Gut, dass ich das nicht nachvollziehen können muss.

PS: CSS-Switcher sind kindische Spielerei unter dem Motto: "Hey, ich kann was, ich bin cool!"

Finde ich auch. Ab und zu hört der CSS-Switcher aber auf das Pseudonym "Auftraggeber". Und manchmal freut man sich sogar darüber, ein Layout durch die grafische Umstellung der Navigation zu verbessern.
MfG, at

[Tim Tepaße]

Hallo at,

Navigationsleisten sind Listen von Verweisen, und zwar unabhängig von der
Form ihrer Darstellung.

Ja. Im Prinzip ja. Trotzdem werden Seiten immer noch für Menschen geschrieben,
ich würde es als ein Ziel der Barrierereduzierung betrachten, Seiten auch
für ewaige Textbrowserbenutzer benutzbarer zu machen. Ich habe dazu neulich
schon etwas geschrieben: </archiv/2004/7/85098/#m500805>

Wenn die Barrierefreiheit einer Seite unter der (möglicherweise korrekten)
Auszeichnung leidet, dann ist mir die Auszeichnung das nicht wirklich wert.

Oder hast du dir schon einmal überlegt, wie du auf Wunsch aus deiner
"Aneinanderreihung von Links" auf Wunsch vertikal anordnest?

Öh, ich denke, Du bist hier doch der große Listenumformatierer?

p#navigation > a {display:block;}
  p#navigation > span {display:none;} (Für die beliebten "|")

Oder auch:

p#navigation > a {display:list-item}

Tim

[at]

Hallo.

Ich habe dazu neulich
schon etwas geschrieben: </archiv/2004/7/85098/#m500805>

Darauf hast du ja auch schon eine Antwort erhalten. -- Nein, ich meine nicht meine.

Oder hast du dir schon einmal überlegt, wie du auf Wunsch aus deiner
"Aneinanderreihung von Links" auf Wunsch vertikal anordnest?

Öh, ich denke, Du bist hier doch der große Listenumformatierer?

Ja, aber in die andere Richtung. Semantik, du weißt schon.
MfG, at

[Zeromancer]

Hallo,

vielen Dank. in meinem Innersten habe ich es ja gewußt. Mir war es nur grad entfallen. ;-)

Mit freundlichen Grüßen

André