✔ Problem bei css "vererbung" bzw. kaskadierung

Status
Nicht offen für weitere Antworten.
Promaetheus

Promaetheus

Mitglied
Ich habe eine Navigation in der ich Haupt- und Untermenüpunkte habe. Bisher konnte ich das ganz einfach lösen indem ich einfach die Links ansich formatiert habe.

Leider ist es jetzt vonnöten bei einigen Links noch einen Text hinzuzufügen. Somit muss ich die Formatierung komplett umstrukturieren, was schade ist, denn bisher war die Formatierung kurz und übersichtlich.

Zu sehen ist das bisherige hier: KLICK, leider nun mit dem Problem "Zusatztext" wie zu sehen. (Womöglich war ich jedoch dort auch schon zu kompliziert mit der Formatierung. Siehe Quelltext. ;))

Wie gehe ich denn nun am besten vor? Ich dachte mir ich löse das über SPANS anstatt die Formatierung direkt über links. Angefangen habe ich mal so:
Code: 
span.nav {
  display: block;       /* untereinander */
  background: #D7BB70;  /* hintergrundfarbe */
  margin-top: 2px;      /* oberen für spanabstand */
  padding-left: 22px;   /* textabstand von links */
  text-align: left;     /* textausrichtung links */
  line-height: 20px;    /* zeilenhöhe für text */

  /* listenpunkt formatieren: */
  background-image: url(images/site/icon_nav_main.gif);
  background-repeat: no-repeat;
  background-position: 0.7em 0.6em;
}

span.nav:hover {
  background: #FF0000;
}

span.active {
  background: #DD0000;
}

Komischerweise übernimmt der Browser jedoch die Einstellungen nicht für Hover und active. Wenn ich darüberhovere, so ist das Listenbild weg. Das sollte aber eigentlich nicht überschrieben werden oder? Ebenso beim Status aktiv.

Code: 
Normal: <span class="nav">Ich bin der normale Text</span><br>
Aktiv: <span class="nav active"> Ich bin der aktive Text</span>

Muss ich für das Submenü jetzt auch noch diese 3 Punkte einfügen, damit ich dort auch wieder andere Farben habe? UND dann noch für alle Links und normalen Texte oder? Also wird das ein elendslanges CSS nur für die Navigation?

Das Problem ist auch dass ich die ganzen Dinge individuell anpassen muss, sprich Link normal, hover und aktiv (wird von php generiert, nicht das normale :active!), Span normal, hover und aktiv. Und das ganze nochmal für die Submenüpunkte. *verzweifel*
 
Zuletzt bearbeitet:
Hi,

wenn du den Text "Zusatztext" in ein span-Element mit der Klasse .nav einbettest, greifen auch die von dir gezeigten CSS-Regeln.

Lediglich die Vorgängerversionen des IE7 können mit der allgemeinen Pseudoklasse span.nav:hover nichts anfangen, da sie die :hover-Pseudoklasse nur auf das a-Element anwenden.

Dass das Hintergrundbild beim Hovern verschwindet, liegt einfach an der Kombination der background-image- und background-Eigenschaft, denn letztere überschreibt die erste Regel. Mit background-color:#ff0000 bleibt das Hintergrundbild aber weiterhin erhalten.

Mit

Code: 
span.nav:active {
  background-color: #DD0000;
}
funktioniert auch der gewünschte "aktiv"-Zustand in den modernen Browsern, zu denen aber die älteren IEs (5.x + 6) nicht zählen.
 
Danke Maik. Das mit dem span.nav:active ist wie gesagt nicht das was ich möchte. Ich lasse mir von PHP automatisch die Klasse generieren. Im Fall von Aktiv ist somit das gerade aktive Menü gemeint und hervorgehoben, auch wenn in der Seite auf andere Links geklickt wird und der Link nicht mehr hervorgehoben wäre wenn man nur mit nav:active formatiert hätte.

Das mit dem Hintergrund und der von dir beschriebenen Farbe wird auch ein problem für mich. Ich habe mich für den Weg entschieden um genau 1 Bild als Listenelement hier anzuzeigen. Die Hintergrundfarbe habe ich allgemein ausgewählt, diese ändert sich beim Hovern und dem Aktiven Zustand. Dann muss ich die Anweisung für das Bild eben noch bei den anderen Punken einfügen. Ich dachte mir einfach: Je weniger Code desto besser und schöner. ;)

Ich bin jedoch leider noch sehr verunsichert wie ich das ganze lösen könnte. Wenn ich nämlich spans erstelle, anstatt die Links zu formatieren wie bisher, so erhalte ich doch eine regelrechte Lawine an CSS-Code. Ich muss dann alles separat formatieren:

Spans:
- span.nav, span.nav:hover, span.active
- span.subnav, span.subnav:hover, span.subnav_active (für die Untermenüs)

Links:
- a.nav, a.nav:hover, a.active
- a.subnav, a.subnav:hover, a.subnav_active (für die Untermenüs)

Oder sehe ich das falsch? Bisher, als ich nur die Links formatierte, hatte ich die Aktiv Sache recht gut handhaben können:
- normal: <a class="nav"...
- aktiv: <a class="nav active"...
 
Zuletzt bearbeitet:
Ich kann nicht so recht nachvollziehen, weshalb du den "Zusatztext" nicht direkt als Link auszeichnest, wenn er sich doch so verhalten soll, Stichwort: "hover" und "active", und scheinbar auch ein Submenü enthalten soll.
 
Die Sacher verhält sich folgendermassen: Normalerweise ist das Navigationselement ein einziger Link, sprich "Impressum" oder was auch immer. Wenn der Admin eingeloggt ist, so werden hinter dem Link noch die Admin-Buttons angezeigt. DAS ist mein Problem. Mit meiner jetztigen, mir sehr sympathischen Lösung werden diese besagten Admin-Buttons leider, aber verständlicherweise UNTER dem Menüpunkt angezeigt anstatt wie es viel schöner wäre IM menüpunkt.
 
Dann muss der entsprechende Link zusätzlich mit float:left ausgezeichnet, und die Admin-Buttons nicht mit display:block formatiert werden, um sie neben dem Link anzuordnen.
 
An das hatte ich auch schon gedacht. allerdings werden die links eben auf 100% formatiert, damit sie korrekt umbrechen. Perfekt wäre die Lösung gewesen dass der Link so wie er jetzt ist formatiert wird und die Admin-Buttons (sind nur kleine Icons mit 15x15px) darunter aber noch in der Formatierung. Das werde ich aber wohl nicht schaffen:

Code: 
 -----------------
| # LINK_1_TEXT   |
 -----------------
| # LINK_2_TEXT   |
|   AB1 AB2       |
 -----------------
| # LINK_3_TEXT   |
 -----------------

AB wäre in dem Fall der Admin-Button.
 
Mit einer verschachtelten Listennavigation wäre das machbar.

Code: 
<ul id="nav">
    <li><a href="http://dev.promadesign.com/tcms/start/deutsch" title="" class="nav">Startseite</a></li>
    <li><a href="http://dev.promadesign.com/tcms/cms/deutsch/cat_1/cId_1" title="" class="nav">Menüpunkt 1</a></li>
    <li><a href="http://dev.promadesign.com/tcms/cms/deutsch/cat_2/cId_2" title="" class="nav">Menüpunkt 2</a></li>
    <li><a href="http://dev.promadesign.com/tcms/cms/deutsch/cat_3/cId_3" title="" class="nav">Menüpunkt 3</a></li>
    <li><a href="http://dev.promadesign.com/tcms/cms/deutsch/cat_6/cId_6" title="" class="nav">Ein sehr sehr sehr langer Menüpu</a></li>
    <li><a href="http://dev.promadesign.com/tcms/contact/deutsch" title="" class="nav active">Kontakt</a></li>
    <li><a href="http://dev.promadesign.com/tcms/imprint/deutsch" title="" class="nav sub">Impressum</a>
           <!-- Admin-Bereich -->
           <ul>
               <li><a href="#" class="admin"><img src="..." width="15" height="15" alt=""></a></li>
               <li><a href="#" class="admin"><img src="..." width="15" height="15" alt=""></a></li>
           </ul>
           <!-- Ende Admin-Bereich -->
    </li>
    <li><a href="http://dev.promadesign.com/tcms/sitemap/deutsch" title="" class="nav">Sitemap</a></li>
</ul>
Code: 
ul#nav, ul {
list-style:none;
}

ul#nav {
width:220px;
}

ul#nav li {
margin-top:2px;
background:#d7bb70;
}

ul#nav a {
text-decoration:none;
}

ul#nav a.nav {
display:block;
width:198px;
padding-left:22px;
color:#990000;
font-weight:bold;
}

ul#nav ul {
margin-left:22px;
}

ul#nav ul li {
display:inline;
margin-left:10px;
}

ul#nav ul a.admin {
display:inline;
}

ul#nav ul a.admin img {
border:none;
}
 
Danke Maik!

Sorry dass ich erst jetzt antworte, jedoch war ich leider längere Zeit ausser Gefecht gesetzt.

Ich habe das jetzt probiert, allerdings wird meine Navigationsliste immer wieder von der "normalen" Listenformatierung überschrieben:

CSS:
Code: 
/* nav style start */
#navList {
  list-style: none;
}

#navList ul {
  color: #ff0000;
}

#navList li {
  color: #fff000;
}
/* nav style end */

/* format normal list start */
ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  padding-top: 2px;
}

li {
  padding-left: 20px;
  background-image: url(images/site/icon_list.gif);
  background-repeat: no-repeat;
  background-position: 0em 0em;
}
/* format normal list end */

HTML:
Code: 
<ul id="navList">
  <li>Navigation
    <ul id="navList">
      <li>Kategorie 1</li>
      <li>Kategorie 2</li>
      <li>Kategorie 3<br>nach Zeilenumbruch</li>
    </ul>
  </li>
</ul>

Somit habe ich auch in der Adminauflistung immer wieder das background-image von der normalen ul Formatierung.

Ich habe es mit id="navList" und #navList, als auch mit class="navList" und .navList versucht, jedoch beides ohne Erfolg. Auch wenn ich bei navList ul, li usw. list-style: none; hinzufüge, so wird doch das icon auch in der Navigation angezeigt. Oder müsste ich hier die <li>´s auch noch mit id=navList formatieren?!

Ich wollte die Navigation hinbekommen so wie hier: https://ssl.stock.at/de/wohnen-buchen/preisinformation/preise-sommer/ (die Navigation links), habe aber keine Chance. :(
 
Zuletzt bearbeitet:
Hi,

eine ID muss im HTML-Code eindeutig sein, sprich: sie darf darin nicht mehrmals vergeben werden.

Wenn die Menüpunkte der "Admin-Navigation" kein Icon-Hintergrundbild besitzen sollen, dann musst du dies eben im Selektor #navList li mit background:none festlegen, damit sie nicht die "allgemeine" Formatierung übernehmen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück