[CSS] 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.

 

[Mini-Leopard]

Das ist mir bestens bekannt.
Sind ja nun wirklich basics.

Ich habe allerdings nach einer Lösung gesucht, die nur für Listen gedacht ist.
Denn (wie ich bereits schrieb) ist ein Einzug vorhanden. Und gerade diesen möchte ich entfernen!!

Und ich hab nicht wirklich Lust, über 2.000 Zeilen einzeln zu durchforsten!!

 

[timmy38233]

Stimmt, in Deinem Quellcode hast Du ja bereits margin und padding eingebaut^^
Ich glaube eine eigene Eigenschaft für den Listeneinzug gibt es nicht (höchstens für den Text-Einzug, aber das ist ja was anderes)

Aber Du kannst Dir auch anschauen, welche Eigenschaften für ein bestimmtes Element definiert werden.
Wenn Du als Browser Chrome o. Opera nutzt, kannst Du einfach einen Rechtsklick auf das Listenelement machen und "Element überprüfen/untersuchen" wählen, dann siehst Du welche CSS-Eigenschaften wo definiert werden. In Safari ging das glaub ich auch, da weiß ich aber gerade nicht wie… Für Firefox gibt's die Erweiterung "Firebug", die genau das gleiche macht wie der Elementinspektor

 

[Mini-Leopard]

Selbstverständlich verwende ich Safari.
Meiner Meinung nach der beste und stabilste Browser.

Mit ⌥ - ⌘ - i geht das. Dieser Inspektor ist sogar noch viel besser.
Leider hat dieses Element keine solche Anweisung für den Einzug.

Das ist ja genau das, was mich so wundert.

 

[timmy38233]

Hm… Komisch, dass da keine Einzugsanweisung ist.
Wüsste jetzt auch nicht mehr woran's liegen könnte… Ist das Element eigentlich relativ positioniert (tut nicht viel zur Sache, interessiert mich aber iwie trotzdem )?

Zum Safari-Inspektor… Besser ist der nicht, eher so ziemlich der gleiche Aber das soll mal nicht Teil der Diskussion werden.

 

[seaker]

Sollte eigentlich nicht das Problem sein, aber hast du schon mal versucht der 3. Ebene, also die, die falsch eingerückt ist, eine separate .class zuzuweisen und diese explizit mit CSS umzubauen. (um damit die Hierarchie-Verschachtelung > ul li ul li < zu vermeiden)?

Sollte , wie beschrieben, eigentlich keinen Unterschied machen, aber ein Versuch wäre es wert um dann genau sehen zu können welche Eigenschaften wo wirken.

Bzw. was mir gerade eben noch aufgefallen ist:
Du stylst die LI-Elemente. Das ist schön und gut, jedoch steuerst du damit nicht ob diese nun neben dem übergeordneten LI sitzen oder darunter. Das wird über das UL-gesteuert. Und dort hast du keine Definition angegeben. Da es nun in dem LI sitze sollte das eigentlich, so wie es bei dir tut, in die selbe Zeile eingeordnet werden. Hier müsstest du dem untersten UL noch sagen, dass es nicht inline sein soll sondern eine eigene Reihe ist. Müsste entweder über display: block; oder über margins machbar sein. Evtl. reichen auch float-eigenschaften bei der Positionierung.

Die dann darin enthaltenen LI orientieren sich ja nur an deren Parent-Element und das liegt ja schon nicht richtig. Wenn also das UL runtergesetzt ist, wird auch das LI nicht mehr in der gleichen Zeile wie das da drüber liegende LI angezeigt.

 

[Mini-Leopard]

@timmy38233:
Die Display habe ich alle durchprobiert. Und als nichts geholfen, geschweige denn etwas geändert hat, hab ich sie einfach raus genommen.

@speaker:
Leider kann ich den HTML Code nicht verändern. Sonst würde ich für das Menü eh keine "Liste" nutzen. Hatte immer nur Probleme mit.
Wie dem auch sei… Wie Du sicherlich schon gelesen hast, handelt es sich ja um dein Template für Joomla!.

Möglich wäre eine Umstrukturierung des Templates sicherlich.
Allerdings reicht mein Know-How dafür leider nicht ganz bzw. wäre das eine extrem zeitaufwändige Geschichte

Wenn ich, wie Du sagst, die ul Elemente, anstelle der li style, ist das komplette Design fehlerhaft.
Schau Dir mal meinen Code an. Wenn Du Dir den mal kopierst und es so ausprobierst, wirst Du sicherlich sehen, was ich meine.


So.
Den Einzug hab ich jetzt gelöst, indem ich einfach das margin-left entsprechend -30px gesetzt habe.
Das funktioniert auch soweit. Dummerweise liegt das Untermenü allerdings über dem nächsten Menüpunkt.
Also wird der Folgende Menüpunkt nicht am Unterpunkt, sondern am Überpunkt orientiert.

Wenn das jetzt noch irgendwie hinzubekommen ist, bin ich glücklich

 

[Mini-Leopard]

Jetzt passt alles soweit.
Einziges Problem besteht immer noch:

Die Untermenüs erzeugen einfach keinen Umbruch.
Sie liegen also entweder über, oder unter dem nächsten Menüpunkt.

Und inzwischen bin ich mit meinem Latein echt am ende.
Ich habe alle möglichen Varianten von Display durchprobiert. Keine hat geholfen…

 

[seaker]

Ich schau mir das heute Abend noch mal und gucke mal ob sich da nicht was machen lässt. Den HTML Code kannst du nicht verändern, hast du gesagt? Dann kopier ich mir den und teste das dann, wie geschrieben, heute Abend mal.

 

[Mini-Leopard]

Kann ich leider nicht.
Der wird halt von Joomla! generiert.

Hier noch mal mein aktueller CSS-Code. Der ist jetzt soweit richtig.
Halt bis auf die Tatsache, dass die folgenden li's unter den li's des unter ul's liegen (man, klingt das beschissen ).
Dann noch mal ein update des HTML's. Sind jetzt einfach ein paar Menü-Einträge mehr. Dann sieht man besser, was ich meine.


HTML:

<div class="art-blockcontent-body">
    <ul class="menu">
        <li class="item58">
            <a href="link">
                <span>
                    Eins
                </span>
            </a>
        </li>
        <li id="current" class="parent active item59">
            <a href="link">
                <span>
                    Zwei
                </span>
            </a>
            <ul>
                <li class="item60">
                    <a href="link">
                        <span>
                            Zwei sub eins
                        </span>
                    </a>
                </li>
                <li class="item66">
                    <a href="link">
                        <span>
                            Zwei sub zwei
                        </span>
                    </a>
                </li>
                <li class="item67">
                    <a href="link">
                        <span>
                            Zwei sub drei
                        </span>
                    </a>
                </li>
            </ul>
        </li>
        <li class="item61">
            <a href="link">
                <span>
                    Drei
                </span>
            </a>
        </li>
        <li class="item62">
            <a href="link">
                <span>
                    Vier
                </span>
            </a>
        </li>
    </ul>
</div>

CSS:

.art-blockcontent-body ul
{
  list-style-type: none;
  margin:0;
  padding:0;
}

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

.art-blockcontent-body ul li ul
{
  margin:0 0 1px -30px;
}

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

.art-blockcontent-body ul li:hover, .art-blockcontent-body ul li ul li:hover
{
  background-image: url('../images/subitem.png');
}

Herzlichen Dank schon mal!
Grüße
…

 

[Mini-Leopard]

Habe das Problem gelöst.
Ich hab natürlich (wie zu erwarten) den Wald vor lauter Bäumen nicht gesehen…

Das <li>, welches die Unternavi enthält, war auf 30px Höhe beschränkt.
Ein einfaches vorangehendes "min-(height)" hat das ganze Problem gelöst.

Vielen Dank für alle Antworten!
Und ein Tipp: min-height

Liebe Grüße
…