CSS Listen Problem

[Mini-Leopard]

Liebe Community!

Ich habe gerade ein Problem bei der Erstellung eines Joomla! Templates.
Und zwar am Menü.

Es wird in Der Navigation eine Liste etwa so erstellt:

<ul class="art-blockcontent-body">
    <li class="menü punkt">eins</li>
    <li id="current" class="menü punkt">zwei
        <ul>
            <li class="menü punkt">zwei sub</li>
        </ul>
    </li>
    <li class="menü punkt">drei</li>
</ul>

Allerdings wird der Unterpunkt nicht, wie alle anderen untereinander dargestellt, sondern liegt einfach über dem dritten Punkt.
Ich habe dem Unterpunkt den gleichen CSS Code zugewiesen, wie den anderen Punkten.

Woran kann das jetzt liegen, dass der nicht richtig dargestellt wird?


Vielen Dank für Ideen & Anregungen
Liebe Grüße
…

[timmy38233]

Sieht so weit alles richtig aus (also rein von der Struktur her). Poste doch mal den CSS-Code für das Menü…

[Mini-Leopard]

Ja, die Struktur stimmt, wird ja auch von Joomla! selber erstellt.
Den CSS Code hab ich jetzt einfach mal direkt vergessen

.art-blockcontent-body ul li
{
  text-decoration: none;
  font-size:14px;
  line-height: 30px;
  height:30px;
  padding-left:0 0 0 30px;
  margin-bottom: 1px;
  background-image: url('../images/item.png');
  background-repeat: repeat-x;
}
.art-blockcontent-body ul li ul
{
  text-decoration: none;
  font-size:14px;
  line-height: 30px;
  height:30px;
  padding-left:0 0 0 30px;
  margin-bottom: 1px;
  background-image: url('../images/item.png');
  background-repeat: repeat-x;
}

Ich bitte mal alle Leser nicht auf die class Namen bei der Zuweisung zu achten!
Die class names hab ich jetzt einfach aus dem Kopf zur Verdeutlichung geschrieben.
Im wirklichen Quellcode sind die im HTML anders, in dem Fall also .art-blockcontent-body.

[seaker]

Ich würde es zunächst einmal damit versuchen auch bei dem verschachtelten Element das Listen-Element anzusprechen und nicht nur die Liste selber , also den CSS auf das <li> anwenden und nicht auf <ul>.

Schöner wäre es aber auch, wenn du die zusammenpassenden HTML und CSS Codes zeigen würdest. Denn so ist es mehr ein gerate auf was sich die CSS Eigenschaften beziehen. Also welches HTML-Element ist beispielsweise mit der class "art-blockcontent-body" bezeichnet?

[Mini-Leopard]

Wie ich in meiner ersten Antwort schon geschrieben habe, ist hier nur der CSS Code, der sich auf die HTML Fetzen bezieht.
Ich hatte einfach vergessen, den richtigen class Namen zu nehmen, da ich den Quelltext da gerade nicht offen hatte.
Meinen Beitrag (erste Frage) werde ich jetzt noch mal bearbeiten, damit es passt.

Das erste ul heißt demnach also art-blockcontent-body

Meinst Du so?

.art-blockcontent-body ul li ul li { … }

[Mini-Leopard]

Habe das jetzt so ausprobiert, wie ich vorher angemerkt habe.
Klappt leider immer noch nicht

Anbei mal ein Bildschirmfoto vom Menü.
Blau hervorgehoben ist das subitem, das eigentlich unter dem zweiten Punkt stehen sollte, wie die anderen auch.




Komme also leider immer noch nicht damit zurecht


Danke für Hilfe,
Grüße
…

[drp]

Vielleicht so:

.art-blockcontent-body ul li
{
  text-decoration: none;
  font-size:14px;
  line-height: 30px;
  height:30px;
  padding-left:0 0 0 30px;
  margin-bottom: 1px;
  background-image: url('../images/item.png');
  background-repeat: repeat-x;
}
.art-blockcontent-body ul li ul li
{
  text-decoration: none;
  font-size:14px;
  line-height: 30px;
  height:30px;
  padding-left:0 0 0 30px;
  margin-bottom: 1px;
  background-image: url('../images/item.png');
  background-repeat: repeat-x;
}

Hab nur noch ein Li drangehängt

[Mini-Leopard]

Das ist ja genau das, was ich vorhin meinte:

Meinst Du so?

.art-blockcontent-body ul li ul li { … }

[Mini-Leopard]

Ganz komisch…
Kann es sein, dass der Browser den Text-Einzug für Untermenüs von sich aus macht?
Ich hab sowohl in meinem Code dazu nichts geschrieben, noch habe ich in anderen Templates was dazu gefunden.

Scheinbar wird der Umbruch nach unten nur ein paar Pixel gemacht.
Denn wenn ich das Teil nicht 30px hoch mache, sondern viel kleiner (also etwa 13px), dann geht es.

Jetzt wüsste ich zum einen, mit welcher CSS Anweisung man den Listen-Einzug bestimmt und zum anderen, wie man den Abstand nach unten festlegt.
Ich denke einfach, dass das an einer anderen Stelle des CSS gemacht wird. Nur so finde ich da nichts.

Ich habe meine CSS Datei nämlich einem anderen Template entnommen und dann komplett angepasst.

[timmy38233]

Klick
Es gibt einmal einen Aussen- und einen Innenabstand, den Du jeweils mit margin (aussen) und padding (innen) festlegen kannst
Für den Listeneinzug kannst Du also margin-left nehmen. Das ist der Aussenabstand nach links. Für den Abstand nach unten kann man margin-bottom nehmen.