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

Elternelement selektieren!

bodo92

bodo92

Aktives Mitglied
Hallo ,

und zwar möchte ich die "Subnavi" mit Position absolute am Boden des Header einhängen und bei aktivem <li> wäre dann die Subnavi sichtbar. Dann würde ich bei aktiver Subnavi dem Header ein padding-bottom: 50px geben..
Hier habe ich ein Fiddle erstellt das mein Problem darstellt: http://jsfiddle.net/u2bp4hsn/

Somit hatte ich mich gerade gefragt ob ich mit CSS das Elternelement selektieren kann, hierzu habe ich einen alten Thread gefunden, jedoch ohne Lösung: https://www.html.de/threads/css-eltern-selektor.3750/

Nach Recherche fand ich folgenden Artikel: http://www.drweb.de/magazin/css4-bereits-heute-nutzen-mit-cssparentselector-38683/
Da dort der Link defekt ist habe ich das hier gefunden: https://github.com/Idered/cssParentSelector
Frage mich nur warum es so selten genutzt ist (Annahme aufgrund der wenigen Sterne auf GitHub)

Gibt es andere Möglichkeiten bevorzugt ohne JS?

LG Bodo
 
:( will abba :p

Okay und was hälst von dem JQuery Plugin?

EDIT: Kann ja dann nen Fallback-Style schreiben der dann wieder überschrieben wird oder?
 
:rolleyes: Kenne ich klar, da ich mich so auf CSS fixiert habe wäre ich nie drauf gekommen.

Also die JS-Blocker werden jetzt einfach bestraft. Die werden eh nicht lange da sein bei der Augenkrebserregenden Meldung die ich hab :D

Danke vorerst, falls jemand noch ne Idee hat gerne melden.
 
Traversieren im DOM gehört zu den Basics und ist per jQuery einfach zu bewerkstelligen, weil man mit Methoden wie closest() und find() Ebenen überspringen kann, anstatt sich über jeden Node hangeln zu müssen.

Da musst du durch. ;)
 
Wenn ich dich richtig verstanden habe, soll das Padding-bottom nur greifen, wenn .active vorhanden ist. Wenn dem so ist, dann reicht doch ein Nachfahrselektor.
Code: 
header.jumbotron .active {
  padding-bottom: 50px;
}
Bei mir klappt's.
 
Nicht ganz denn nicht jeder Reiter hat eine Subnavi also soll der Header nur ein Padding bekommen wenn innerhalb des li.active auch ein ul vorkommt.

Habs jetzt soweit ganz gut hinbekommen: http://feuerwehr.ebelmxi.de/feuerwehr/

Man merkt zwar ne kurze Verzögerung aber da man in der Regel eh in einer anderen Seite einsteigt minimiert sich die.
 
Ist schon in Ordnung. Du nutzt sowieso JS (JQuery). Daher wäre das mit CSS Only nur eine Quälerei.
 
Wenn es CSS-Only geht würde ich mich sehr freuen wenn du mir einen Tipp gehen könntest, das ist bisher doch eher ein Notbehelf.
Auch meine Freundin (annähernd DAU) ist es aufgefallen das da was zuckt

Gesendet von meinem SM-G900F mit Tapatalk
 
Habe mal deine Navi geringfügig abgeändert. Weiß aber nicht ob du es so anwenden kannst. Im Grunde bekommt Body die Klasse feuerwehr zugewiesen.
Code: 
<!DOCTYPE html>
<html lang="de">
<head>
<title>Galerie</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">

* {
padding:0;
margin:0;
list-style:none;
text-decoration:none;
}

header {
float:left;
width:100%;
position:relative;
}

header nav ul {
float:left;
width:100%;
background:#f00;

  }

header nav li {
float:left;
background:#eee;
margin:5px 5px 0 5px;
}


header nav a {
display:block;
padding: 10px 15px;
color: #fff;
background:#d00;
border:1px solid #000;
border-bottom:none;
}

header nav li.active  a {
color:#000;
}
header nav ul li ul {
  position:absolute;
  bottom:0;
  left:0;
  background:#eee;
}

header nav ul li.active> a {
background:#fff;
}

header nav li ul  a {
background:#ddd;
}

header nav ul ul a {
background:#eee;
}

.feuerwehr header {
background:#eee;
padding-bottom:50px;
}

.feuerwehr .fw_seite {
display:block;
}

.fw_seite {
display:none;
}
</style>

</head>
<body class="feuerwehr">
  <header class="jumbotron">
  <a id="hamburger"><span></span></a>
  <nav>
  <ul>
  <li><a href="/"><i class="fa fa-home"></i> Home</a></li>
  <li class="active"><a href="/feuerwehr"><i class="fa fa-bullseye"></i> Feuerwehr</a>
  <ul class="fw_seite">
  <li><a href="/feuerwehr/geraetehaus">Gerätehaus</a></li>
  <li><a href="/feuerwehr/fahrzeuge">Fahrzeuge</a></li>
  <li><a href="/feuerwehr/hauptwehr">Hauptwehr</a></li>
  <li><a href="/feuerwehr/jugendwehr">Jugendwehr</a></li>
  <li><a href="/feuerwehr/ortsteilwehren">Ortsteilwehren</a></li>
  <li><a href="/feuerwehr/verein">Verein</a></li>
  </ul>
  </li>
  <li><a href="/news"><i class="fa fa-newspaper-o"></i> News</a></li>
  <li><a href="/einsaetze"><i class="fa fa-bell"></i> Einsätze</a></li>
  <li><a href="/termine"><i class="fa fa-calendar"></i> Termine</a></li>
  <li><a href="/gaestebuch"><i class="fa fa-book"></i> Gästebuch</a></li>
  </ul>
  </nav>
  </div>
</header>

<div style="padding:20px;height:500px;clear:left;">fcöldsaföasdc sdfs</div>
</body>
</html>

@edit: Überarbeitet
 
Zuletzt bearbeitet:
@bodo92
Keine Ahnung, wie du das geschafft hast, aber im Safari ist die Navi völlig zerschossen.

Was die Frage betrifft: Die Feuerwehrseite basiert doch auf PHP. Warum also nach dem Seitenaufbau Styles per JS zuweisen, wenn diese auch direkt vom Server ausgeliefert werden können? Bei Webportalen, die sich ein gemeinsames Stylesheet teilen, bildet man Namespaces für die einzelnen Seiten. Die einfachste Weise wäre, den Namen der Unterseite als CSS-Klasse dem Body zuzuweisen und das bei den Selektoren zu berücksichtigen, also: .meine-unterseite header {...}.

Nebenbei bemerkt gibt es in jQuery Methoden wie fadeIn() und animate(), um 'harte' Einblendungen zu vermeiden.
 
Wozu Regex? Du ziehst den Namen der Unterseite aus der URI und weist ihn als Klasse dem Body zu, der Rest ist CSS.
 
Dei Ansatz mit REQUEST_URI war schon richtig. Du splittest den String, ziehst dir das entsprechende Array-Element heraus und renderst dieses als CSS-Klasse im Body-Tag.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben