Schattierung & Linie bei Navigation / Header anders bei einigen Unterseite

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

marcelgerard

Mitglied
27 April 2017
125
1
18
33
Hi Leute,

kurze Frage - ich habe eine Navigation in einem einfachen Header gebaut und der Header hat z.B auf der Startseite eine leichte Schattierung. Das ist auch so gewollt. aber auf einigen Unterseiten sieht eine normale Linie einfach besser aus, daher würde ich gerne das bei jeder Unterseite unterschiedlich machen. Meine Frage zu ist, ob es da einen Trick gibt ohne das man die Navigation / Header ein zweites mal in eine include Datei setzen muss oder führt daran kein Weg vorbei?

LG Marcel
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.057
205
63
18
Ein Lösungsansatz wäre, sich die CSS Specificity zu nutze zu machen. Sprich:
In jeder deiner Unterseiten, die anders sein sollen, passt du dein CSS (z.B. per style-tag im header) so an, dass es das eigentliche CSS überschreibt.

https://www.w3schools.com/css/css_specificity.asp

Du sagst also im Haupt-CSS-File:
CSS:
ul > li {
  //Was auch immer
}
und im File dann halt:
CSS:
.header-shadow {
   //Kein Shadow
}
Kurz gesagt: Überschreibe einfach dein CSS auf der Unterseite.

Edit:
Nur kurz zu CSS Specificity: Im Prinzip sagt es aus, dass die spezifischeren CSS-Attribute den unspezifischeren übergeordnet sind.
HTML:
<style>
   .headline {
       background: red;
   }

   h1 {
       background: black;
   }
</style>

<h1 class="headline">
    Der Hintergrund wird rot sein.
</h1>

HTML:
<style>
div li {
  background: red;
}

div > ul > li {
  background: yellow;
}

li {
  background: black;
}
</style>

<div>
  <ul>
    <li>Hintergrund wird gelb sein.</li>
  </ul>
</div>
 
Zuletzt bearbeitet:
Werbung:

Latest posts