Seiten aufzählen

Loon3y · 25 Februar 2009

Moinsen,

heute hab ich mal wieder ein problem *g*

Wie zeichne ich folgendes am besten aus:

Code:

Seite: 1 | 2 | 3 | 4 | 5 | ...        1-10 von 50        nach oben

jemand eine idee wie ich das optimal machen könnte?

dachte das Seite ... in einer liste..aber wie dann weiter machen..
Eine Tabelle ist hier eher ungeeignet oder?!

Gruß..

Edit: so würde das aussehen: (finde ich grausam)

html:

Code:

                <ul class="seiten"> 
                    <li> Seite: </li>
                    <li> <a href="#"> 1 </a> </li> 
                    <li> <a href="#"> 2 </a> </li> 
                    <li> <a href="#"> 3 </a> </li> 
                    <li> <a href="#"> 4 </a> </li>
                    <li> <a href="#"> 5 </a> </li> 
                    <li> <a href="#"> 6 </a> </li> 
                    <li> <a href="#"> &raquo; </a> </li>  
                    <li class="nr"> <strong> 1-10 </strong> von <strong> 56 </strong> </li>
                    <li class="oben"> <a href="#"> nach oben </a> </li>
                </ul>

css:

Code:

ul.seiten              { padding-top: 15px; padding-bottom: 15px;  }
ul.seiten li           { font-weight: 600; padding: 5px; 10px; display: inline; }
ul.seiten li.nr       { font-weight: 500; padding-left: 150px; }
ul.seiten li.oben    { padding-left: 175px; }

ingoS · 25 Februar 2009

Loon3y schrieb:
so würde das aussehen: (finde ich grausam)

Da muss ich dir zustimmen. Das ist vor allem auch nicht nur grausam sondern obendrein ziemlicher Unfug. ;ugl
Besonders "1-10 von 56" und der Link "nach oben" sind natürlich nicht der Aufzählung der Seiten gleichgestellt. Die würde ich ganz aus jeglicher Art von Liste rauslassen.

Wie wäre es mit einer Definitionsliste?
So:

Code:

<dl class="seiten">
 <dt>Seite:</dt>
 <dd> <a href="#"> 1 </a> </dd> 
 <dd> <a href="#"> 2 </a> </dd> 
 <dd> <a href="#"> 3 </a> </dd> 
 <dd> <a href="#"> 4 </a> </dd> 
 <dd> <a href="#"> 5 </a> </dd> 
 <dd> <a href="#"> 6 </a> </dd> 
</dl>

Oder eventuell so:

Code:

<dl class="seiten">
 <dt>Seite:</dt>
 <dd>
  <ol>
   <li> <a href="#"> 1 </a> </li> 
   <li> <a href="#"> 2 </a> </li> 
   <li> <a href="#"> 3 </a> </li> 
   <li> <a href="#"> 4 </a> </li>
   <li> <a href="#"> 5 </a> </li> 
   <li> <a href="#"> 6 </a> </li> 
  </ol>
 </dd>
</dl>

Ich habe hier mal eine geordnete Liste gewählt. In der Praxis müsstest du dann die nummerierten Listenpunkte wieder ausblenden, aber semantisch ist es wohl sinnvoller als eine ungeordnete.

Ob du jetzt mehrere Definitionen von "Seite" (erste Variante) oder eine Liste verschiedener Ausprägungen der gleichen Definition (zweite Variante) hast, das können dir Leute wie Efchen bestimmt besser beantworten. :mrgreen:

Loon3y · 25 Februar 2009

Schaut auch nicht besser aus..

vor allem da ich ja dann dieses "1-10 von 50" vermutlich in ein setzen müsste...ist ja eigentl ein textabschnitt / -satz und das dann floaten..urgs..grausam.... da muss ich wieder mit classes / id's um mich werfen :-(

Edit: vor allem wie formatiere ich das via css dann? mit dl.seiten dd ol li { display:block; } ?

Loon3y · 26 Februar 2009

Muss nochmal um Hilfe bitten....komm einfach auf keine Lösung dabei! Vllt hat jemand noch eine Idee?

francesco · 26 Februar 2009

Also Flickr macht's z. B. so:

Code:

<div class="pages">
     <span class="this-page">1</span>
     <a href="...">2</a>
     <a href="...">3</a>
     <a href="...">4</a>
     <a href="...">5</a>
     <a href="...">6</a>
     <a href="...">7</a>
     <a class="next" href="...">Weiter</a>
</div>

Muss also nicht unbedingt eine Liste sein.

Loon3y · 26 Februar 2009

Jein, weil es ist ja so gesehen eine Auflistung von Seiten...deswegen eine Liste...aber lässt sich so schlecht darstellen..hm.. :-(

francesco · 26 Februar 2009

Man kann es mit oder ohne Liste machen, das (EDIT: optische) Ergebnis ist dasselbe.

Der Unterschied zwischen

Code:

<ul id="liste">
    <li><a href="#">1</a></li> 
    <li><a href="#">2</a></li> 
    <li><a href="#">3</a></li> 
</ul>

und

Code:

<div id="liste">
    <p><a href="#">1</a> <a href="#">2</a> <a href="#">3</a></p>
</div>

ist, dass du mit der zweiten Variante immerhin 28 Zeichen einsparen kannst.

Efchen · 26 Februar 2009

ccisco schrieb:
Man kann es mit oder ohne Liste machen, das Ergebnis ist dasselbe.

Aber ganz sicher nicht! Das optische vielleicht, aber semantisch gesehen sind Deine zwei Entwürfe etwas völlig verschiedenes.

Und der zweite Vorschlag ist der denkbar ungünstigste, weil er rein gar nichts über den Inhalt aussagt, besser als das ist, alles wenigstens in ein zu setzen, denn immerhin ist es mindestens Text.

Wenn ich nicht so recht weiß, welches Tag ich nehmen soll, dann stell ich mir vor, wie ein Vorlesebrowser das vorlesen würde.

Prinzipiell würde ICH die Listenvariante am besten finden, ob dl oder ul ... aufgrund der Beschreibung "Seite:" finde ich die dl sogar besser. Aber es ist ja zweifelsfrei eine Liste und beim Vorlesen sind kleine Pausen durchaus sinnvoll.

Loon3y · 26 Februar 2009

Gut das ich noch 5 mins mitn antworten gewartet habe, denn dadurch hat mir Efchen meine Antwort vorweggenommen. :-) Danke.

habe jetzt folgendes...was mir immer noch nicht so gefällt..aber hm...

Code:

<p class="oben"> <a href="#"> nach oben <img src="gfx/hoch.png" width="13" height="11" alt="nach oben" /></a> </p>
<ul class="seiten"> 
<li> Seite: </li>
<li> <a href="#"> 1 </a> </li> 
<li> <a href="#"> 2 </a> </li> 
<li> <a href="#"> 3 </a> </li> 
<li> <a href="#"> 4 </a> </li>
<li> <a href="#"> 5 </a> </li> 
<li> <a href="#"> 6 </a> </li> 
<li> <a href="#"> &raquo; </a> </li>  
<li class="nr"> <strong> 1-10 </strong> von <strong> 56 </strong> </li>
</ul>
<br class="clear" />

das hab ich rechts gefloatet und die liste links.
Der Grund wieso ich "1-10 von 56" mit in die Liste genommen hat, weil ich finde das es dazu gehört...einmal die auflistung der Seiten + die auflistung wo man gerade ist...wegen diesen einen punkt eine extra liste machen, wäre das sinnvoll?

Gruß..

Efchen · 26 Februar 2009

Nein, das hätte ich auch mit rein genommen. Liste heißt ja nicht, dass die Listenpunkte alle gleich aussehen müssen.

Aber ich wüsste nicht, ob ich die Seiten mit ausgezeichnet hätte, was ist daran so wichtig, dass man es besonders stark betonen muss?

Loon3y · 26 Februar 2009

Efchen schrieb:
Nein, das hätte ich auch mit rein genommen. Liste heißt ja nicht, dass die Listenpunkte alle gleich aussehen müssen.

Aber ich wüsste nicht, ob ich die Seiten mit ausgezeichnet hätte, was ist daran so wichtig, dass man es besonders stark betonen muss?

auch wieder wahr...dann lieber mit einem span und font-weight: bolt; ?

francesco · 26 Februar 2009

Efchen, ja, das Ergebnis ist optisch das Gleiche. Semantisch natürlich nicht. Stimmt, die Links müssten noch in ein p-Element eingebettet werden, hab das mal geändert.

Allerdings weiß ich nicht, ob es in diesem Fall wirklich so einen großen Unterschied macht, ob man eine Liste verwendet, oder nicht. Ohne Liste würde ein Vorlesebrowser den Code wahrscheinlich so

Code:

Link 1, Link 2, Link 3, ...

widergeben und zwar ohne größere Pausen zwischen den Links. (Hab das jetzt nicht nachgeprüft, deswegen schonmal ein "Sorry", falls das nicht stimmen sollte)

Bei einer Liste würde er es wahrscheinlich so

Code:

Dies ist eine Liste -> Aufzählungspunkt 1: 1 -> Aufzählungspunkt 2: 2 -> ...

widergeben.

Aber für den Nutzer spielt das doch keine Rolle, er weiß ja in beiden Fällen, dass es sich um Links zu den nächsten Seiten handelt. Vorausgesetzt man setzt vor der Aufzählung noch irgendein Element, sodass diese auch als solche erkennbar ist. Aber das müsste man dann soundso bei beiden Varianten machen.

EDIT: Andererseits, es ist faktisch eine Auflistung von Links, von dem her ist die Verwendung einer Liste in dem Sinne natürlich logischer.

Efchen · 26 Februar 2009

ccisco schrieb:
Allerdings weiß ich nicht, ob es in diesem Fall wirklich so einen großen Unterschied macht

Für Leute mit optischem Browser wahrscheinlich nicht. Aber in der Welt dreht sich ja nicht alles nur um sie.

Aber für den Nutzer spielt das doch keine Rolle, er weiß ja in beiden Fällen, dass es sich um Links zu den nächsten Seiten handelt.

Es geht hier um die Semantik. Steht der Inhalt nur in einem div hat das keine Bedeutung. Es geht nicht nur um sehende Menschen oder Menschen mit Browsern, die Webinhalte visuell darstellen, es geht auch um nicht-sehende und auch um Nicht-Menschen.

Vorausgesetzt man setzt vor der Aufzählung noch irgendein Element, sodass diese auch als solche erkennbar ist.

Für Automaten ist das nur erkennbar, wenn die Semantik stimmt.

Das wollte ich nur nochmal deutlich machen.

francesco · 26 Februar 2009

Efchen schrieb:
Für Leute mit optischem Browser wahrscheinlich nicht. Aber in der Welt dreht sich ja nicht alles nur um sie.

Ich bezog mich mit dem "Nutzer" auch auf Menschen mit Sehbehinderungen.

Für Automaten ist das nur erkennbar, wenn die Semantik stimmt.

Nur aus Interesse: in was für einem konkreten Fall ist das wichtig? Was meinst du mit "Automaten"?

Beispiel Navigation: Sind diese beiden Varianten für Menschen, die einen Screenreader benutzen, oder für Automaten nicht das Gleiche?

Code:

<h2 class="hidden">Navigation</h2>
<ul id="navigation">
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Impressum</a></li>
</ul>

Code:

<h2 class="hidden">Navigation</h2>
<div id="navigation">
    <p><a href="#">Startseite</a> <a href="#">Impressum</a></p>
</div>

(Wobei die hidden-Klasse das h2-Element absolut positioniert und per top/right/bottom/left verschiebt)

Bin schon gespannt auf die Antwort!

P. S.: Falls das Ganze zu Offtopic werden sollte, kann man ja auch gern per PM weitermachen.

Efchen · 2 März 2009

ccisco schrieb:
Ich bezog mich mit dem "Nutzer" auch auf Menschen mit Sehbehinderungen.

Gerade für die ist die Semantik wichtig. Weil der Browser nur anhand dieser erkennen kann, wie er den Inhalt vorlesen soll.

Nur aus Interesse: in was für einem konkreten Fall ist das wichtig? Was meinst du mit "Automaten"?

Mit "Automaten" meine ich Software, die eine Webseite anhand der HTML-Struktur analysiert, auswertet und weiter verarbeitet, wie z.B. Vorlesebrowser oder Suchmaschinen oder alle anderen Scripts oder Programme, die - aus welchem Grund auch immer - das machen oder machen werden, weil sie noch nicht programmiert sind.

Beispiel Navigation: Sind diese beiden Varianten für Menschen, die einen Screenreader benutzen, oder für Automaten nicht das Gleiche?

Nein, natürlich nicht! Das solltest Du aber mit bloßem Auge erkennen!
Und wenn Du das jemandem vorliest, solltest Du das auch unterschiedliche vorlesen.

Das erste ist die richtige Variante, eine Liste, denn es handelt sich ja um eine Auflistung von Links. Das zweite ist falsch, denn hier vermittelst Du, dass es sich um Fließtext handelt. Beispiel 1 würde so vorgelesen: "Startseite -Pause- Impressum. Beispiel 2 würde ohne Pause vorgelesen und würde, allein vom Zuhören, keinen Sinn ergeben, auch für Dich als sehenden Zuhörer nicht. (Ich hab jetzt außer Acht gelassen, dass Vorlesebrowser Links vermutlich auch noch irgendwie kennzeichnen/vorlesen).

Gruß,
-Efchen

francesco · 2 März 2009

Efchen schrieb:
Beispiel 2 würde ohne Pause vorgelesen und würde, allein vom Zuhören, keinen Sinn ergeben, auch für Dich als sehenden Zuhörer nicht.

Also "keinen Sinn" finde ich ein bisschen übertrieben, denn der Screenreader sagt ja durch das h2-Element: "Navigation" und dann liest er ein paar Links vor. Das dürfte doch jedem verständlich machen, dass es sich bei den Links um die Links in der Navigation handelt. Und wie du schon sagst, Screenreader behandeln Links logischerweise anders als normalen Text, d. h. sie machen bei einem Link bestimmt eine Pause, um dem Nutzer die Möglichkeit zu geben sich zu entscheiden, ob er dem Link folgt oder nicht.

Efchen · 2 März 2009

Naja, man kann ja auch mit Tabellen layouten und mit Traktoren auf der Autobahn fahren.

Für mich sind die Bedeutungen der Tags eindeutig festgelegt, in den meisten Fällen ist es offensichtlich, welche Tags die Semantik richtig verdeutlichen, in diesem Fall gibt es IMHO keinen Zweifel. Das Wort "Navigation" darüberhinaus stellt keine Semantik dar, denn Automaten werden mit dem Wort nichts anfangen können. Google sieht auch nur eine Überschrift und dann einen Fließtext mit Links. Google z.B. hätte keine Ahnung, dass das ein Menü sein soll (ob das für Google wichtig ist oder nicht, sei mal dahin gestellt).

Deutlicher gehts IMHO nicht mehr.

francesco · 2 März 2009

Nochmal: Ich will nur eine Diskussion über das Thema führen und niemanden von irgendetwas "bösem" oder so überzeugen. Ich selbst verwende diesbezüglich auch Listen. Mich interessiert einfach nur das Thema HTML-Elemente und deren Verwendung. :-)

Efchen, Suchmaschinen hätten aber auch keine Ahnung, dass das ein Menü sein soll, wenn man eine Liste benutzt.

In HTML 5 werden Navigationen übrigens durch das nav-Element dargestellt, was ich für einen interessanten Ansatz halte, um die Semantik einer Website zu verbessern.

neuroleptika · 2 März 2009

ccisco schrieb:
Also "keinen Sinn" finde ich ein bisschen übertrieben, denn der Screenreader sagt ja durch das h2-Element: "Navigation" und dann liest er ein paar Links vor.

Jaws sagt die Anzahl der Listeinträge an.
Mit Absätzen geht das nicht.

francesco · 3 März 2009

neuroleptika, das ist doch mal ein gutes Argument, um eine Liste zu verwenden. Danke, wusste ich gar nicht.

Seiten aufzählen

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Neues Mitglied

francesco

Guest

Neues Mitglied

francesco

Guest

Efchen

Guest

Neues Mitglied

Efchen

Guest

Neues Mitglied

francesco

Guest

Efchen

Guest

francesco

Guest

Efchen

Guest

francesco

Guest

Efchen

Guest

francesco

Guest

Aktives Mitglied

francesco

Guest