Horizontales Menü mit Listen?

[Steve]

Hallo zusammen,

hat es Vorteile, wenn man ein horizontales Menü mit Listen definiert?

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<ul>

Wenn man  <a href="#">Home</a><a href="#">News</a> schreibt, kann man doch auch die Linkabstände mittels margin definieren.

Oder hat die zweite Formulierung einen Nachteil?

Vielen Dank!

Steve

[Steel]

Hallo!

Du kannst auch ein Vertikales Menue nur mit Links erstellen in dem Du denen einfach nen kleinen Block verpasst.

Das einzige Argument fuer eine Liste (ob Horizontal , vertikal oder diagonal...) ist, dass es sich um eine Aufzaehlung von Links handelt und Aufzaehlungen nunmal semantisch als Listen ausgezeichnet werden.

Davon darfst Du gerne halten was Du willst.

[Cheatah]

Hi,

hat es Vorteile, wenn man ein horizontales Menü mit Listen definiert?

das lässt sich nicht beurteilen, da Du zwei Dinge vermischst, die nichts miteinander zu tun haben. Das eine ist der Einsatz einer Liste, was sich bei einer Liste von Links (die ein Menü i.a.R. nun mal ist) anbietet und nichts mit der gewünschten Darstellung zu tun hat; das andere ist eine Form der Darstellung, die nichts mit dem eingesetzten Strukturcode zu tun hat.

Wenn man  <a href="#">Home</a><a href="#">News</a> schreibt, kann man doch auch die Linkabstände mittels margin definieren.

Das kann man mit einer Liste auch.

Oder hat die zweite Formulierung einen Nachteil?

Ja: Sie ist widersinnig. Wenn Du eine Liste gleichförmiger Inhalte hast, so gehört sie als Liste strukturiert. HTML-Code wird

*** NIEMALS ***

wegen irgend einer zufällig gerade mal gewünschten Darstellung gewählt.

Cheatah

[Steve]

Hi Cheatah,

danke für die Antwort.

Wie würdest dann du ein horizontales Menü definieren, dass so aus sehen soll:

Home | Link 1 | Link2

Würdest du eine Linkliste definieren wie:

<ul>
<li><a href="#">Home</a></li>
<li>|</li>
<li><a href="#">Link 1</a></li>
<li>|</li>
<li><a href="#">Link 2</a></li>
<li>|</li>
</ul>

[Steel]

Du kannst gerene auch <li><a href="#">Home</a> | </li> schreiben.

[Steve]

Du kannst gerene auch <li><a href="#">Home</a> | </li> schreiben.

Hi Steel,

ja!

So habe ich es eigentlich auch immer gemacht...

Bye

Steve

[Gernot Back]

Hallo Steve,

So habe ich es eigentlich auch immer gemacht...

Und welche inhaltliche Bedeutung hast du diesem "|" Zeichen dabei jeweils beigemessen?

Gruß Gernot

[Steel]

Steve,

bevor Die hier noch mehr Fragen stellen: Du darfst deine <li>s auch mit einem Rahmen auf einer Seit versehen. Dann haste absolut kein Layout/Design mittel mehr in deiner Navi, aber das Problem, dass du einen Strich weniger brauchst als du Listenelemente hast und die Striche natuerlich immer Rahmengroesse haben und nicht Schriftgroesse, was sich natuerlich durch eine kleine Grafik im Hintergrund loesen lassen koennte, wo Du dann den Spass hast das wieder so zu realisieren dass due einen Trenner weniger hast als Listenelemente ... *keuch* Naja. Du kannst sie auch ganz weglassen, oder einfach drin behalten.

Grundsaetzlich haben sie ja Recht. Design und Inhalt haben nichts miteinander zu tun. Man soll aber auch nicht bei rot ueber die Strasse gehen, auch nicht nachts aufm Dorf, wenn sonst kein Aas da ist. Und?

[Gernot Back]

Hallo Steel,

bevor Die hier noch mehr Fragen stellen: Du darfst deine <li>s auch mit einem Rahmen auf einer Seit versehen. Dann haste absolut kein Layout/Design mittel mehr in deiner Navi, aber das Problem, dass du einen Strich weniger brauchst als du Listenelemente hast und die Striche natuerlich immer Rahmengroesse haben und nicht Schriftgroesse, was sich natuerlich durch eine kleine Grafik im Hintergrund loesen lassen koennte, wo Du dann den Spass hast das wieder so zu realisieren dass due einen Trenner weniger hast als Listenelemente ... *keuch* Naja. Du kannst sie auch ganz weglassen, oder einfach drin behalten.

Grundsaetzlich haben sie ja Recht. Design und Inhalt haben nichts miteinander zu tun. Man soll aber auch nicht bei rot ueber die Strasse gehen, auch nicht nachts aufm Dorf, wenn sonst kein Aas da ist. Und?

Es geht aber doch auch ganz brav!

Wie wär es zur Abwechslung mal so:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>Inlinelinkliste</title>  
<meta name="author" content="Gernot" />  
<meta name="generator" content="Ulli Meybohms HTML EDITOR" />  
<style type="text/css">  
[code lang=css]  
ul.myInlineList {  
   margin:0;  
   padding:0;  
}  
  
ul.myInlineList li {  
   display:inline;  
   margin:0;  
   padding:0 .3em 0 .5em;  
   border-left: solid 1px black;  
}  
  
ul.myInlineList li a {  
   vertical-align:.1em;  
}  
  
ul.myInlineList li:first-child {  
   border:none;  
}  

</style>
</head>
<body>
<ul class="myInlineList">
   <li><a href="#">Home</a></li>
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
</ul>
</body>
</html>
[/code]

Gruß Gernot

[Steel]

Jau!

Das stimmt. Aber vielleicht mag er den Trenner ja nicht so hoch wie das Element in dem der Text steht? Dann muesster schon wieder Hintergrundgrafiken oder aehnliches einsetzen.

Also ich werd nicht tot umfallen wenn jemand nen Zeichen als Trenner benutzt. Auf ner Seite die sich als barrierefrei bezeichnet waehre das ein kleiner fauxpas.

Steve, bist Du barrierfrei?!? *schiefguck*

[Gernot Back]

Hallo Steel,

Das stimmt. Aber vielleicht mag er den Trenner ja nicht so hoch wie das Element in dem der Text steht? Dann muesster schon wieder Hintergrundgrafiken oder aehnliches einsetzen.

Keineswegs:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
<head>  
<title></title>  
<meta name="author" content="Gernot" />  
<meta name="generator" content="Ulli Meybohms HTML EDITOR" />  
<style type="text/css">  
[code lang=css]  
ul.myInlineList {  
   margin:0;  
   padding:0;  
   display:table;  
}  
  
ul.myInlineList li {  
   display:inline;  
   display:table-cell;  
   padding:0 .3em 0 .5em;  
   border-left: solid 1px black;  
   line-height:.7em;  
}  
  
ul.myInlineList li:first-child {  
   border:none;  
}  

</style>
<!--[if gte IE 6]>
<style type="text/css">

  
ul.myInlineList li {  
   display:inline;  
}  
  
ul.myInlineList li a {  
   position:relative  
}  
  

</style>
<![endif]-->
</head>
<body >
<ul class="myInlineList">
   <li><a href="#">Home</a></li>
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
</ul>
</body>
</html>
[/code]

Also ich werd nicht tot umfallen wenn jemand nen Zeichen als Trenner benutzt. Auf ner Seite die sich als barrierefrei bezeichnet waehre das ein kleiner fauxpas.

Ich auch nicht, ich setze auch manchmal Tabellen nur zur Gestaltung ein, wenn es gar nicht anders geht, und diese Fälle gibt es. Auf einer barrierefreien Seite müsste man in diesen wenigen Fällen dann halt auf den ein oder anderen Gestaltungsschnickschnack verzichten.

Gruß Gernot

[Steel]

:O

Das muss ich mir nachher mal in Ruhe reintun, wenn ich Feierabend habe.

Bleibt nur meine andere Frage was man mit Trennern macht die ein Zeichen darstellen (siehe das / in meinem anderen Post hier wg. breadcrumbnavi)

[Steel]

Na Frage haett ich aber noch!

Wie wuerdest Du (wuerdet Ihr) ne Breadcrumb Navigation stylen? Zwischen jedem Menuepunkt soll ein / stehen. Es soll sogar moeglich sein, den Text der Navi zu kopieren und ein ein Eingabefeld zu kopieren. Gibt's da ne andere Moeglichkeit als die / in die Tabelle/Links mit aufzunehmen? Anklickbar sollten die aber nicht sein...

Ideen?

[Gernot Back]

Hallo Steel,

Wie wuerdest Du (wuerdet Ihr) ne Breadcrumb Navigation stylen? Zwischen jedem Menuepunkt soll ein / stehen. Es soll sogar moeglich sein, den Text der Navi zu kopieren und ein ein Eingabefeld zu kopieren. Gibt's da ne andere Moeglichkeit als die / in die Tabelle/Links mit aufzunehmen? Anklickbar sollten die aber nicht sein...

Bei richtigen Browsern könnte man da mit dem Pseudo-Element before arbeiten, das dann bei li:first-child wieder aufgehoben würde.

Für den IE müsste man sich hier mit einem Schrägstrich als Hintergrundgrafik behelfen.

Gruß Gernot

[Steel]

genau das mein ich leider auch.
Und wenn das kopierbar sein soll (mit nem / als Trennsymbol) hat es sich ausgespielt. :( Das wuerde dann doch nur mit Zeichen funktionieren die man im HTML zwischen die Links stopft.

Schade. Auf before und after kann man ja leider nicht bauen. (danke MS!!)

Normalerweise pfeif' ich auf den MSIE aber bei manchen Dingen muss man dann leider Kompromisse eingehen.

[Gernot Back]

Hallo Steel,

genau das mein ich leider auch.
Und wenn das kopierbar sein soll (mit nem / als Trennsymbol) hat es sich ausgespielt. :( Das wuerde dann doch nur mit Zeichen funktionieren die man im HTML zwischen die Links stopft.

Aber wieso sollte man ein Trennsymbol mitkopieren wollen? Wenn du eine normale Liste mit Bullets als Trennsymbol hast, erwartest du als Nutzer doch auch nicht, dass du sie dir mitkopierst.

Gruß Gernot

[Steel]

Grundsaetzlich auch nicht. Aber Du kannst ja Deine URL auch kopieren. Das ist ja auch ganz sinnig. Wenn man nun also mit einer Kopie des 'Pfades' was anfangen kann soll man den auch kopieren duerfen. Und es waere doof einmal eine Navi mit Links anzubieten und extra nochmal den String ohne Links.

Konkret ist die Idee den 'Pfad' speichern und weitergeben zu koennen wie einen Link auch. Anhand der Trenner wuerde dann auch der String zerlegt und verarbeitet werden. Man koennte dann diesen 'Pfad' z.B. einfach in einem anderen Programm benutzen das nur mit diesem String als Parameter Informationen aus einer DB holt.

[Gernot Back]

Hallo Steel,

Konkret ist die Idee den 'Pfad' speichern und weitergeben zu koennen wie einen Link auch. Anhand der Trenner wuerde dann auch der String zerlegt und verarbeitet werden.

Naja, wenn du beabsichtigst, die Breadcrumbnavigation als Pfad kopierbar zu machen, dann sind sie ja keine bloßen Trenner, sondern stellen Inhalt dar. Dann ergeben sie als solcher ja auch in HTML wieder einen Sinn.

Gruß Gernot

[Cheatah]

Hi,

Wie würdest dann du ein horizontales Menü definieren, dass so aus sehen soll:
Home | Link 1 | Link2

der Inhalt sind drei Links, der Rest ist Verzierung und gehört somit nicht in den HTML-Code.

Cheatah