CSS Liste

[Lowterm]

Hallo Zusammen,

ich habe folgendes Problem mit einer Liste und hover-Background. Meine Liste sieht wie folgt aus:

a.menu-text { color:black; }

.list {
	list-style-type: none;
	cursor: pointer;
    color: white;
    padding: 5px 0;
} 

.listContainer:hover {
    background-color: lightgray;
}

.mymenu {
	display: none;
	position: absolute;
	top: 18px;
	left: 10px;
    border-radius: 5px;
    z-index:10;
}

.bg-white {
  background-color: white;
  max-width: 200px;
  min-width: 200px;
  max-height: 125px;
  min-height: 50px;
  overflow-y:auto;
  padding: 0px 10px;
}


<div class="mymenu bg-white">
   <ul class="list">
     <li class="listContainer">
       <a class="menu-text">aaaaaaa</a>
       <a class="menu-text">bbbbbb</a>
       <a class="menu-text">ccccccc</a>
       <a class="menu-text">dddddd</a>
     </li>
   </ul> 
</div>

Hier öffnet sich ein Popupmenu beim hover. Wenn man mit der Maus über einen Link geht, bekommt der Link einen grauen Hintergrund, der so bereit ist wie die li-Elemente. Links und rechts habe ich wegen "padding: 0px 10px;" bei "bg-white"-Klasse einen weißen Rand von 10px. Ich möchte aber erreichen, dass der Hintergrund bei hover genau so bereist ist, wie das div-Element drum herum. Das heißt, dass bei hover die 10px, sozusagen, überschrieben werden muss.

Gruß

[Cyberbiber]

Hallo Zusammen,

ich habe folgendes Problem mit einer Liste und hover-Background. Meine Liste sieht wie folgt aus:

<div class="mymenu bg-white">
   <ul class="list">
     <li class="listContainer">
       <a class="menu-text">aaaaaaa</a>
       <a class="menu-text">bbbbbb</a>
       <a class="menu-text">ccccccc</a>
       <a class="menu-text">dddddd</a>
     </li>
   </ul> 
</div>

Hier öffnet sich ein Popupmenu beim hover. Wenn man mit der Maus über einen Link geht, bekommt der Link einen grauen Hintergrund, der so bereit ist wie die li-Elemente.

li-Elemente? - Ich sehe nur eins.

Gruß

Cyberbiber

[Lowterm]

Hallo,

sorry, mein Fehler:

<div class="mymenu bg-white">
   <ul class="list">
     <li class="listContainer"><a class="menu-text">aaaaaaa</a></li>
     <li class="listContainer"><a class="menu-text">bbbbbb</a></li>
     <li class="listContainer"><a class="menu-text">ccccccc</a></li>
     <li class="listContainer"><a class="menu-text">dddddd</a></li>
   </ul> 
</div>

Gruß

[Gunnar Bittersmann]

@@Lowterm

<div class="mymenu bg-white">

Das sieht mir nach einer Navigation aus. Dann ist <div> falsch; <nav> richtig.

       <a class="menu-text">aaaaaaa</a>
       <a class="menu-text">bbbbbb</a>
       <a class="menu-text">ccccccc</a>
       <a class="menu-text">dddddd</a>

Wenn alle Geschwisterelemente derselben Klasse angehören, gibt es nichts zu unterscheiden, d.h. nichts zu klassifizieren. Die Klasse ist überflüssig.

Hier öffnet sich ein Popupmenu beim hover.

Ähm, nein. Es gibt Nutzer, die mit anderen Geräten als Mäusen im Web navigieren. Das dürfte inzwischen die Mehrheit sein, die Touchgeräte verwenden. Andere sind darauf angewiesen, dass sie mit der Tastatur navigieren können.

Etwas, das sich beim Hovern mit einer Maus öffnet, mag für ein paar Nutzer funktionieren; allgemein funktioniert es nicht.

Wenn du etwas auf- und zuklappen möchtest, brauchst du einen clickbaren Button (<button>) und JavaScript.

---

Und wo kann man sich dein CSS-Problem ansehen? Online-Beispiel? Die erste Handlung, um dir helfen zu können, sollte nicht darin bestehen müssen, dass man sich dein Problem erstmal nachstellen muss.

🖖 Живіть довго і процвітайте

[Lowterm]

Hallo,

danke. Der Pseudocode ist stark vereinfacht und das Nav-Element steht oberhalb des div-Element. Es geht hier nicht darum, ob die Nutzer anderweitig unterwegs sind oder nicht. Hier geht es erst einmal um ein einfaches Problem, dass ich mangels CSS-Erfahrung selber nicht oder mit viel Aufwand lösen kann.

Gruß

[Gunnar Bittersmann]

@@Lowterm

danke. Der Pseudocode ist stark vereinfacht und das Nav-Element steht oberhalb des div-Element.

Wozu brauchst du dann das div?

Es geht hier nicht darum, ob die Nutzer anderweitig unterwegs sind oder nicht.

Es geht immer darum, ob etwas bedienbar ist. Schönheit ist zweitranging (was nicht „unwichtig“ heißen soll).

Hier geht es erst einmal um ein einfaches Problem, dass ich mangels CSS-Erfahrung selber nicht oder mit viel Aufwand lösen kann.

Und wo kann man sich das ansehen?

🖖 Живіть довго і процвітайте

[Lowterm]

Hallo,

leider nirgends. Ich bin noch in der Entwicklungsphase. Daher alles lokal auf meinem Rechner.

Gruß

[Gunnar Bittersmann]

@@Lowterm

leider nirgends. Ich bin noch in der Entwicklungsphase. Daher alles lokal auf meinem Rechner.

Du kennst Plattformen wie CodePen, Dabblet oder JSFiddle, wo du anderen deinen Code zeigen kannst?

🖖 Живіть довго і процвітайте

[Lowterm]

Hallo,

ich es läuft: https://codepen.io/Lowterm/pen/RwejEEB

Gruß

[Gunnar Bittersmann]

@@Lowterm

ich es läuft: https://codepen.io/Lowterm/pen/RwejEEB

Ich hab das mal verlinkt. So geht’s; beim nächsten Mal bitte selber machen.

🖖 Живіть довго і процвітайте

[Matthias Scharwies]

Servus!

Wenn du etwas auf- und zuklappen möchtest, brauchst du einen clickbaren Button (<button>) und JavaScript.

Hier wäre ein funktionierendes Beispiel, dass du kopeiren kannst:

• Navigation/Flyout-Menü

Ich empfehle, die Kapitel vorher durchzuarbeiten. Dort werden die Grundlagen erklärt.

Herzliche Grüße

Matthias Scharwies

[Lowterm]

Hallo,

danke. Es geht um kein Auf- und Zuklappen sondern um die Hintergrundfarbe bei Hover, die sich über die ganze Bereite des div-Elements ziehen muss.

Gruß

[Gunnar Bittersmann]

@@Lowterm

ich habe folgendes Problem mit einer Liste und hover-Background. Meine Liste sieht wie folgt aus:

[https://codepen.io/Lowterm/pen/RwejEEB]

Hier öffnet sich ein Popupmenu beim hover. Wenn man mit der Maus über einen Link geht, bekommt der Link einen grauen Hintergrund, der so bereit ist wie die li-Elemente.

Nein, bekommt er nicht. Die li-Elemente bekommen beim Hovern den grauen Hintergrund. Und das ist falsch. Wenn man rechts neben dem Link übers li hovert, ändert sich die Hintergrundfarbe, suggeriert also, dass man dort clicken könnte. Tut man das, passiert nichts (weil der Link schmaler ist). Wenn nichts passiert, verlässt man genervt deine Seite.

Was zu tun ist: den Hover-Effekt nicht auf li anwenden (kein interaktives Element), sondern auf a (interaktives Element). Und dann kannst du das für a:focus auch gleich machen.

Wenn die ganze Breite clickbar sein soll, musst du auch das a-Element über die ganze Breite ziehen. display: block oder inline-block sollte dabei helfen.

Links und rechts habe ich wegen "padding: 0px 10px;" bei "bg-white"-Klasse einen weißen Rand von 10px. Ich möchte aber erreichen, dass der Hintergrund bei hover genau so bereist ist, wie das div-Element drum herum. Das heißt, dass bei hover die 10px, sozusagen, überschrieben werden muss.

Dann gib halt nicht dem div links und rechts 10px Padding, sondern dem Element, worauf du den Hovereffekt anwendest (noch li, besser aber a).

🖖 Живіть довго і процвітайте

[Lowterm]

Hallo,

danke. Jetzt läuft alles besser. Ausschlaggebend war aber display: block.

Gruß

[Rolf B]

Hallo Lowterm,

dürfte ich noch bescheiden darauf hinweisen, dass die ganzen Pixelmaße tunlichst in em notiert werden sollten?

Damit passen sie sich dynamisch an die Schriftartgröße an und das Menü skaliert besser.

Die Klasse .bg-white suggeriert, dass sie irgendwas auf weißen Hintergrund setzt. Naja, ziemlich dreckig, dieses Weiß. Aber es gibt zwei wirkliche Probleme damit:

• Das CSS tut mehr, als den Hintergrund zu setzen. Es setzt Ränder und Breiten und das Scrollverhalten. Das klingt mir jetzt sehr spezifisch für das Menü. Du solltest diese Eigenschaften in der Regel für .mymenu setzen.
• Man soll Klassen zur fachlichen Markierung von Oberflächen Elementen verwenden. Nicht zum Zuweisen einer bestimmten CSS Eigenschaftenmenge. Frameworks wie Bootstrap verhalten sich da prinzipiell konträr zu Sinn der Klassen (haben aber keine Wahl, weil Du in einer CSS Regel nicht sagen kannst: Importiere mir mal die Einstellungen aus Regel bs-col-2 oder so).
  Das heißt: wenn Du deine eigenen Stylesheets schreibst, markiere deine Oberflächenelemente nach ihrer Funktion, und style sie dann entsprechend.

Und noch eins: Wenn man ein HTML wie dieses hat

<nav>
   <div class="mymenu">
   <ul>
      <li><a>...</a></li>
      <li><a>...</a></li>
      <li><a>...</a></li>
   </ul>
  </div>
</nav>

dann braucht man nicht auf jedem Element eine Klasse, um es anzusprechen. Schau Dir im Zweifelsfall mal den Wiki-Artikel Kombinatoren an.

Die a Elemente erreichst Du im einfachsten Fall mit dem Selektor
.mymenu a
Das trifft dann alles Links in mymenu divs. Wenn Du das auf .mymenu divs in <nav> Elementen begrenzen willst, nimm halt den Elementselektor für nav dazu:
nav .mymenu a

Achte auf die Spaces, die sind relevant (der "Nachfahrenkombinator")

Willst Du nur die a Elemente ansprechen, die in Untermenüs sind, könntest Du
.mymenu ul ul a
schreiben.

Für a Elemente, die nur im obersten ul sind, könntest Du so vorgehen:
.mymenu > ul > li a Das wäre der Kind-Kombinator, der verlangt, dass die identifizierten Elemente in einer direkten Kind-Beziehung stehen müssen und nicht beliebig weit voneinander entfernte Nachfahren sein dürfen.

Ich würde sehr vermuten, dass Du mit der Klasse mymenu auskommst und den Rest mit Kombinatoren im CSS erledigen kannst.

Für "erstes" oder "letztes" Element einer Liste bieten sich die strukturellen Pseudoklassen :first-of-type und :last-of-type an.

Rolf

[Lowterm]

Hallo Rolf,

entschuldige bitte die späte Antwort und vielen Danke für die wie immer hilfreichen Ratschläge.

1. Du hast absolut Recht. Die bg.white-Klasse ist an dieser Stelle total überflüssig und falsch bestückt. Die .popmenu reicht dafür vollkommen aus.

2. Wie du zu Recht vermutet hast, bin ich mit der Klasse mymenu ausgekommen.

Eine Eigenart ist aber bei mir zu beobachten. Ich muss manchmal zweimal auf einen Link Klicken, damit er feuert und die Seite weitergeht. Könnte es eventuell an CSS liegen?

LG

[Rolf B]

Hallo Lowterm,

Ich muss manchmal zweimal auf einen Link Klicken, damit er feuert und die Seite weitergeht. Könnte es eventuell an CSS liegen?

Neulich vor der Apotheke stand ja ein Pferd in einer Pfütze aus Grasbrei, aber nur, weil ihm jemand was ekliges in's Futter geschmuggelt hat…

Also, ja, ich hätte eine Idee wie ich das mit CSS herbeiführen könnte, aber nicht versehentlich. Ist der Effekt nur auf deiner Seite oder auch anderswo? Maustasten sind Verschleißartikel.

Rolf

[Lowterm]

Nein, es kommt nur bei dem besagten Menü vor, die ich zur Laufzeit in einer Schleife zusammenbaue.

[Rolf B]

Hallo Lowterm,

Kannst du das in einem codepen reproduzieren?

Rolf

[Lowterm]

Leider nicht. Da läuft alles gut.

[Lowterm]

Das hat anscheinend irgendwie mit dem Focus zu tun. Bei dem ersten Klick wird einen anderen Link außerhalb des Menüs heiß, als ob man, wie hover, mit der Maus darüber gefahren wäre.

[Der Martin]

Hallo,

Eine Eigenart ist aber bei mir zu beobachten. Ich muss manchmal zweimal auf einen Link Klicken, damit er feuert und die Seite weitergeht. Könnte es eventuell an CSS liegen?

das kann ich mir nur schwer vorstellen.

Den Effekt habe ich in letzter Zeit aber auch öfters. Aber bei mir liegt es an der altersschwachen Maus, deren Microschalter beim Klicken nicht mehr zuverlässig auslösen.

Einen schönen Tag noch
 Martin

[Lowterm]

Hallo Martin,

ich habe es gerade mit einer anderen, neuen Maus getestet. An der Maus liegt es leider nicht.

Gruß