Listenpunkte und Blocksatz

Schönen guten Nachmittag Community

ich habe folgende Frage zu CSS und HTML. Ich habe eine Topnavigation (ul) mit diversen Links das HTML hierzu sieht logischerweise folgendermaßen aus

HTML-Code:

---

<ul>
  <li>Stadtplan</li>
  <li>Shop</li>
  <li>Impressum</li>
  <li>Kontakt</li>
  <li>Medienarchiv<li>
</ul>

---

Nun ist es laut Layout so vorgesehen das sich diese Liste als Blocksatz verhält. Das bedeutet das übergeordnete div hat eine Breite von 300px, nun sollen die Links in (übrigens 2 Zeilen) links anfange und am rechten Rand aufhören, eben ein Blocksatz.

Natürlich funktioniert es nicht den Listenpunkten ein

HTML-Code:

---

text-algin: justify

---

mitzugeben. Denn jeder Punkt ist genau so Breit wie der Text eben hat. Gibt es irgendeine Möglichkeit den Listenpunkten beizubringen sie sollen den gesamten Platz von 300px aufbrauchen, ohne jedem einzelnen eine fixe Breite mitzugeben?

Danke für die Hilfe

Hi ,

wenn du mehrzeilige Links hast würde sich das CSS-Tabellenmodell anbieten.
Hier ein Tut wie du sowas lösen könntest. ;)

Zitat:

---

Zitat von schman

Gibt es irgendeine Möglichkeit den Listenpunkten beizubringen sie sollen den gesamten Platz von 300px aufbrauchen, ohne jedem einzelnen eine fixe Breite mitzugeben?

---

Ja, display: block; müsste reichen. Ich gebe auch den SPANs und As in den Listenpukten immer display: block; mit.

Grüße

@helmschrott danke für den Link der sieht sehr vielversprechend aus.
@andreas auch danke an dich, das Problem dabei ist dann abre das jeder Listenpunkt die volle Breite von 300px hat, was ich ja nicht unbedingt will ich hätte gerne 3 Links in einer Zeile, klar kann ich jedem einzelnen ein fixe Breite mitgeben, will ich aber nicht unbedingt, da sich die Linknamen ändern könnten

Das war nur die Antwort auf deine Frage, denn damit erstrecken sich die Listenpunkte auf die Breite von dem Eltern-DIV von 300px. Um weitere Probleme genau zu lösen bräucht man nähere Angaben od. besser eine Beispielseite und ein Bild wie's aussehen soll.

Grüße

vielleicht noch ergänzend:
li ist von Hause aus ein Blockelement, was automatisch so breit wird wie es geht.
display:block für a macht aber (fast) immer Sinn, da so die ganze Schaltfläche verweissensitiv wird.

Wenn li allerdings floatet um die navi auf die Reihe zu bekommen, kommt es zum shrink to fit-Verhalten der Floats, d.h. sie werden nur so breit wie ihr Inhalt.

Man kann zwar li auch per display:inline auf die Reihe bekommen, aber dann hat man nicht mehr so viel Kontrolle über die Darstellung. ;)

@Andreas hier wäre mal eine Demoseite Wichtig wäre jetzt eben das die beiden letzten Punke komplett rechtsbündig sind.

Anhang 2697

Ich werde jetzt auf jeden Fall noch den Tipp von Helmschrott probieren.

Ich habe mal im nav_default.tpl einen Zähler via PHP integriert, so erhielt dann jeder Listenpunkt zusätzlich die Klasse "1, 2,3.. usw.". Somit konnte ich jeden Listenpunkt genau ansprechen. Wenn sich die Reihenfolge bei deinen Listenpunkten nicht ständig ändert und die Breite fix ist, so könntest du dann gezielt den beiden rechten Listenpunkten text-align:right; zuweisen.

Zitat:

---

Zitat von codestorm

Ich habe mal im nav_default.tpl einen Zähler via PHP integriert, so erhielt dann jeder Listenpunkt zusätzlich die Klasse "1, 2,3.. usw.".

---

Kleiner Tipp: Es ist immer hilfreich, wenn bei solchen Extralösungen dann hier das Template gepostet wird. So könnenandere Nutzer auch gleich die entsprechende Lösung bei Bedarf einsetzen :)

Zitat:

---

Zitat von Nina

Kleiner Tipp: Es ist immer hilfreich, wenn bei solchen Extralösungen dann hier das Template gepostet wird. So könnenandere Nutzer auch gleich die entsprechende Lösung bei Bedarf einsetzen :)

---

Oder noch schöner: direkt ins Wiki damit (vllt unter Snippets) *g*

Viele Grüße

Ich suchs ja schon, kanns aber noch nicht finden, gebt mir noch ein paar Minuten :)

Hier jetzt für alle interessierten ein eine einfache Erweiterung der nav_default.tpl

PHP-Code:

---

<ul class="<?php echo $this->level; ?>">
<?php $count = 1; ?>
<?php foreach ($this->items as $item): ?>

<?php if ($item['isActive']): ?>
<li class="active<?php echo " item_".$count ?><?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>" class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"<?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li class="<?php echo "item_".$count ?><?php if ($item['class']): ?> <?php echo " ".$item['class']; ?><?php endif; ?>"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php $count ++ ?>
<?php endforeach; ?>
</ul>

---

Jeder Listenpunkt erhält zusätzlich die Klasse "item_1" und fortlaufend, ebenso ist der aktive Menüpunkt verlinkt.

Siehe Quelltext www.codestorm.de

Zitat:

---

Zitat von Helmschrot

li ist von Hause aus ein Blockelement

---

Ja klar, sorry, da hab ich mich aufs Glatteis führen lassen, da er davon sprach, ein Listenpunkt würde nicht die ihm zu Verfügung stehende Breite einnehmen.

UL ist default display: block;
LI ist default display: list-item;

Beide erzeugen einen Zeilenumbruch und erstrecken sich auf die Breite.

SPAN und A in Menüs bekommen bei mir immer display: block; damit sie diese Ausdehnung mitmachen und sie auf die gleiche Art formatiert werden können.

Grüße

Zitat:

---

Zitat von schman

Anhang 2697

---

Da wär ich nie drauf gekommen, dass das so aussehen soll.

Da seh ich auch nur die Möglichkeit mit individuellen Klassen in jedem Listenpunkt. Und zusätzlich noch eine Liste pro Zeile, also 2 Menüs. Bleiben das denn 3 Items je Zeile?

HTML-Code:

---

<ul style="width:300px;list-style-type:none;margin:0;padding:0;display:table;">
  <li style="text-align:left;display:table-cell;">
    <a style="display:block;background:#ccc;">Punkt. 1</a>
  </li>
  <li style="text-align:center;display:table-cell;">
    <a style="display:block;background:#eee;">Punkt.. 2</a>
  </li>
  <li style="text-align:right;display:table-cell;">
    <a style="display:block;background:#ccc;">Punkt... 3</a>
  </li>
</ul>
<ul style="width:300px;list-style-type:none;margin:0;padding:0;display:table;">
  <li style="text-align:left;display:table-cell;">
    <a style="display:block;background:#ccc;">Punkt.... 4</a>
  </li>
  <li style="text-align:center;display:table-cell;">
    <a style="display:block;background:#eee;">Punkt..... 5</a>
  </li>
  <li style="text-align:right;display:table-cell;">
    <a style="display:block;background:#ccc;">Punkt...... 6</a>
  </li>
</ul>

---

Grüße

danke für eure Hilfe ich habs jetzt so gelöst wie ich es nicht wollte :)
mittels jeweiliger Klasse und mittels fixer Breite, ich hoffe jetzt mal das sich die Links nicht ändern.