Elternelement selektieren!

[djheke]

Ah so meinst du das, aber wir warten mal ab, was bodo92 noch zu sagen hat. Anpassen und verbessern geht ja immer.

 

[Tronjer]

Auch wenn das jetzt etwas den Rahmen des Topics sprengt, ein kurzer Exkurs zum Thema modernes Styling.

Zu Zeiten statischer Webportale besaß jede einzelne Seite einen eigenen Head. Darauf basierte das Prinzip der Cascading Stylesheets: Ein Main Stylesheet, das für alle Seiten galt und weitere für die Unterseiten, welche die Angaben der main.css überschrieben.

Das 'C' aus dem CSS entfällt bei modernen Portalen die nur eine Layoutdatei und einen Head besitzen, in dem die Styles für alle Unterseiten abgelegt werden. Aus Performance-Gründen fasst man diese in einem gemeinsamen Stylesheet zusammen. Was auf Entwicklerseite das Problem aufwirft, ein riesiges Stylesheet zu haben, durch das man irgendwann nicht durchblickt und wo spätere Änderungen unerwünschte Effekte auf anderen Seiten hervorrufen können.

Aus dem Grunde schreibt man CSS heutzutage objektorientiert und modular. D.h. neben dem erwähnten Namespacing gehören dazu entsprechende Naming Conventions. Das könnte frei nach BEM (Block-Element-Modifier) innerhalb des HTML für eine Kontaktseite etwa so aussehen:

<main class="contact">
  <article class="contact__Container">
   <div class="contact__Container__header">
      <figure  class="contact__Container__header--image">
        ........
      </figure>
   </div>
  </article>
</main>

Das sieht recht lang aus, lässt sich aber innerhalb SCSS (SASS) Dateien kurz und mit der selben Struktur abbilden:

.contact {
  &__Container {
    position: relative;
    box-sizing: border-box;
    &__header {
      &--image {
         height: 200px
         width: 400px;
      }
    }
  }
}

Auf die Weise erhält man trotz knapper Schreibweise unverwechselbare Selektoren, und der Pre-Compiler ermöglicht es, für jede Unterseite ein kleines SCSS File anzulegen, das zu einer einzigen großen CSS Datei kompiliert wird.

Statt das .contact jedes Mal voranzustellen, lässt sich die Klasse natürlich auch, wie vorher erwähnt, einmalig auf das Body-Tag legen.

 

[bodo92]

Danke vielmals für eure Antworten, ich habe jetzt dank eurer Hilfe eine Lösung gefunden.

Hatte mich anfangs irgendwie darauf fixiert dem Header-Element ein "padding-bottom" zu geben, natürlich macht es sinn dann einfach dem List-Element die Eigenschaft zu geben. Dem List-Element in dem die Sub-Navi liegt habe ich die Klasse "sub" zugewiesen, dadurch kann ich das Element mit der "active" Klasse kombiniert wie gewünscht steuern.

So wird das Markup erzeugt:

// In den Konstanten DIR & SITE werden die URL-Segmente abgelegt!

<header class="jumbotron">
    <div class="container">
        <div id="logo">
            <img src="/includes/icons/feuerwehr.svg" alt="Feuerwehrlogo">
            <span>Freiwillige Feuerwehr Markt Emskirchen</span>
        </div>
        <a id="hamburger"><span></span></a>
        <nav>
            <ul>
                <li<? if (DIR == 'index') { echo ' class="active"'; } ?>><a href="/"><i class="fa fa-home"></i> Home</a></li>
                <li class="sub <? if (DIR == 'feuerwehr') { echo 'active'; } ?>"><a href="/feuerwehr"><i class="fa fa-bullseye"></i> Feuerwehr</a>
                    <ul>
                        <li<? if (DIR == 'feuerwehr' && SITE == 'geraetehaus') { echo ' class="active"'; } ?>><a href="/feuerwehr/geraetehaus">Gerätehaus</a></li>
                        <li<? if (DIR == 'feuerwehr' && SITE == 'fahrzeuge') { echo ' class="active"'; } ?>><a href="/feuerwehr/fahrzeuge">Fahrzeuge</a></li>
                        <li<? if (DIR == 'feuerwehr' && SITE == 'hauptwehr') { echo ' class="active"'; } ?>><a href="/feuerwehr/hauptwehr">Hauptwehr</a></li>
                        <li<? if (DIR == 'feuerwehr' && SITE == 'jugendwehr') { echo ' class="active"'; } ?>><a href="/feuerwehr/jugendwehr">Jugendwehr</a></li>
                        <li<? if (DIR == 'feuerwehr' && SITE == 'ortsteilwehren') { echo ' class="active"'; } ?>><a href="/feuerwehr/ortsteilwehren">Ortsteilwehren</a></li>
                        <li<? if (DIR == 'feuerwehr' && SITE == 'verein') { echo ' class="active"'; } ?>><a href="/feuerwehr/verein">Verein</a></li>
                    </ul>
                </li>
                <li<? if (DIR == 'news') { echo ' class="active"'; } ?>><a href="/news"><i class="fa fa-newspaper-o"></i> News</a></li>
                <li<? if (DIR == 'einsaetze') { echo ' class="active"'; } ?>><a href="/einsaetze"><i class="fa fa-bell"></i> Einsätze</a></li>
                <li<? if (DIR == 'termine') { echo ' class="active"'; } ?>><a href="/termine"><i class="fa fa-calendar"></i> Termine</a></li>
                <li<? if (DIR == 'gaestebuch') { echo ' class="active"'; } ?>><a href="/gaestebuch"><i class="fa fa-book"></i> Gästebuch</a></li>
            </ul>
        </nav>
    </div>
    <div id="verlauf"></div>
</header>

Hier nochmal der Link zur Seite: http://localhost/feuerwehr/fahrzeuge/


Danke auch für die vielen anderen Tipps jedoch möchte ich nicht mehr meine ganze Grundstruktur ändern, dazu habe ich schon zu viele Views erstellt.

 

[djheke]

Hier nochmal eine vereinfachte bzw geänderte Variante. Auch wenn es nicht mehr notwendig ist.
http://www.gipspferd.de/forumhilfe/selektor/