<li> mit type "square" ?

[Andreas]

Hallo,
ich habe jetzt eine Tabelle mit mehreren Zeilen. Jede Zeile soll mit einen <li> anfangen. Diese will ich mit <ul type="square"> ändern.
Nur muß ich jetzt <ul type="square"> zwischen jedes <li> einfügen damit diese umgewandelt werden, das will ich aber nicht.

Kann man das auch mit stylsheets auf alle <li> anpassen?

Andreas

[Tim Tepaße]

Hallo Andreas,

ich habe jetzt eine Tabelle mit mehreren Zeilen. Jede Zeile soll mit einen
<li> anfangen.

Bitte? Zeilen in Tabellen werden doch immer noch mit <tr> beschrieben, oder
habe ich das etwas verpaßt? Meinst Du vielleicht Listen?

http://selfhtml.teamone.de/html/text/listen.htm

Diese will ich mit <ul type="square"> ändern.
Nur muß ich jetzt <ul type="square"> zwischen jedes <li> einfügen damit
diese umgewandelt werden, das will ich aber nicht.

Meiner Erfahrung nach genügt es, die in das die Liste umschließende
ul-Element einzutragen. Listen haben ja immer noch so eine Struktur:

<ul type="square">
  <li>eins</li>
  <li>zwei</li>
  <li>drei>/li>
</ul>

Dann sollte das problemlos klappen. Dein Problem ist mir deswegen
unerklärlich. Kannst Du vielleicht den Quellcode posten, sollte es
mit den Stylesheets von unten immer noch nicht klappen?

Kann man das auch mit stylsheets auf alle <li> anpassen?

Ja, dann entfällt das Attribut 'type'. Wie, das steht in SELFHTML:

http://selfhtml.teamone.de/css/eigenschaften/listen.htm#list_style_type

• Tim

[Andreas]

hier ein ausschnitt aus meinem Quelltext:
Jedes <li> sollte mit square bearbeitet werden.

<td class="menue"><li><a href="sms.html"> SMS </a></li></td>
 </tr>
 <tr>
 <td class="menue"><li><a href="sms.html"> SMS </a></li></td>
 </tr>
 <tr>
 <td class="menue"><li><a href="sms.html"> SMS </a></li></td>
 </tr>
 <tr>
 <td class="menue"><li><a href="sms.html"> SMS </a></li></td>
 </tr>
 <tr>
 <td class="menue"><li><a href="sms.html"> SMS </a></li></td>
 </tr>
 <tr>
 <td class="menue"><li><a href="sms.html"> SMS </a></li></td>
 </tr>
 <tr>
 <td class="menue"><li><a href="sms.html"> SMS </a></li></td>
 </tr>
 <tr>
 <td class="menue"><li><a href="sms.html"> SMS </a></li></td>
 </tr>
 <tr>
 <td class="menue"><li><a href="sms.html"> SMS </a></li></td>
 </tr>
 <tr>
 <td class="menue"><li><a href="sms.html"> SMS </a></li></td>
 </tr>

[Michael Jendryschik]

<tr>
 <td class="menue"><li><a href="sms.html"> SMS </a></li></td>
 </tr>
 <tr>
 <td class="menue"><li><a href="sms.html"> SMS </a></li></td>
 </tr>

Du solltest dich näher mit Listen beschäftigen, bzw. deinen Quelltext hin und wieder auf seine Richtigkeit hin überprüfen, z.B. bei http://validator.w3.org. Das Element 'li' darf immer nur innerhalb von 'ul' oder 'ol' vorkommen. Zum Aufbau von Listen siehe auch http://jendryschik.de/wsdev/einfuehrung/xhtml/listen.html.

Zu deinem Problem: Es reicht die Regel

ul { list-style-type: square }

in deinem Stylesheet, siehe http://jendryschik.de/wsdev/einfuehrung/css/listen.html.

BTW: Welchen Sinn macht eine Tabelle, deren Zeilen jeweils nur eine Zelle enthalten, die jeweils einen einzigen Listepunkt beinhaltet?

MI

[MudGuard]

Hi,

<td class="menue"><li><a href="sms.html"> SMS </a></li></td>
</tr>

li ohne ul/ol ist Unsinn. Das ist so wie td ohne table und tr...

Anstelle der ganzen Tabelle reicht doch eine ganz normale ul mit li drin...

Und Kontext-Selektoren solltest Du Dir auch mal anschauen, ist doch etwas umständlich, in jedes td die selbe Klasse reinzuschreiben...

cu,
Andreas

[Tim Tepaße]

Ähm Andreas,

<tr>
<td class="menue"><li><a href="sms.html"> SMS </a></li></td>
</tr>
(Rest gekürzt)

Das Element <li> darf nicht innerhalb von Elementen wie <td> auftauchen,
eigentlich nur innerhalb von <ul>, <ol> und den unbekannteren <dir> und
<menu>.

http://selfhtml.teamone.de/html/referenz/elemente.htm#li

Du müßtest also wirklich diese Struktur basteln:

<td>
 <ul>
  <li>
   <a href="...">...</a>
  </li>
 </ul>
</td>

Also jedesmal in einer Tabellenzelle eine eigene Liste. Aufwendig.
Umständlich. Und eigentlich unsinnig. Also machen wir mal eine geistige
Kehrtwende.

Weswegen möchtest Du denn die Links als Listenelement haben? Vielleicht nur
wegen des Quadrates vorne? Da kann man auch genausogut ein Bild vor den Link
setzen, ähnlich wie die Icons, die in SELFHTML vor jedem Link stehen.

http://selfhtml.teamone.de/editorial/arbeitshinweise.htm#symbole

Oder wir machen noch einige geistige Kehrtwende. Durch Deinen jetzigen
Quellcode erreichst Du folgende optische Struktur:

Link

Link        (Das '#' soll das Kästchen von

Link         type="square" smybolisieren.  )

Link

...

Also untereinander stehende Links. Das erreicht man auch so, wenn man eine
Liste verwendet.

<ul type="square">
  <li><a href="...">...</a></li>
  <li><a href="...">...</a></li>
  <li><a href="...">...</a></li>
  ...
</ul>

Genau dasselbe. Und eigentlich genau so, wie es sein sollte. Im Zuge der
Richtlinien zur Barrierefreiheit einer Webseite wird sogar empfohlen,
Listen zur Strukturierung von Links zu nehmen, wenn ich mich erinnere.

Dann kannst Du die Liste entweder in eine Tabellenzelle packen (je nachdem
wie der Rest der Struktur Deiner Seite aussieht)...

<td>
  <ul type="square">
  ...
  </ul>
</td>

... oder gleich gucken, wo man sonst noch überall komische Tabellenstrukturen
rausschmeißen kann. ;-)

Sollten sich eventuell unschöne Absätze ergeben, dann empfehle ich, den
äußeren Abstand der Liste und den inneren Abstand der sie eventuell
umgebenden Tabellenzelle entsprechend zu formatieren:

http://selfhtml.teamone.de/css/eigenschaften/randabstand.htm
  http://selfhtml.teamone.de/css/eigenschaften/innenabstand.htm

Es gibt mit CSS noch mehr Möglichkeiten Listen zu formatieren. Einmal mit
den CSS-Eigenschaften speziell für Listen, aber auch mit all den üblichen
Eigenschaften die CSS bietet.

http://selfhtml.teamone.de/css/eigenschaften/listen.htm

Und dazu ist noch dieser Artikel interessant.

http://www.alistapart.com/stories/taminglists/

• Tim

[Andreas]

Hallo,
dank euch für die vernunftigen und umfangreichen Antworten.
Jetzt habe ich es verstanden und werde ganz anders an die Sache rangehen!

Andreas