Tipp: Registrierte Nutzer haben Vollzugriff auf das Forum und sehen gegenwärtig keine Werbeanzeigen!

Autor Thema: CSS: Style des Sub-Elements in Abhängigkeit eines übergeordneten Elements  (Gelesen 1265 mal)

McWinston Offline

  • Jr. Member
  • **
  • Beiträge: 67
  • Geschlecht: Männlich
    • Profil anzeigen
    • Fatbike Ratgeber
CSS: Style des Sub-Elements in Abhängigkeit eines übergeordneten Elements
« am: 03. Dezember, 2016, 22:12:21 Nachmittag »
Hallo,

ich hoffe jemand von euch kann mir zwei Fragen beantworten.
Ist es mit CSS generell möglich bei dem gegebenen Aufbau den Style der Klasse "slave" nur dann sichtbar zu machen, wenn das übergeordnete Element <div> von der Klasse "master" ist?

<div class="master">
<p style="text-align: justify;">
<i class="slave">(Button)</i>
</p>
</div>

2. Frage: Kann mir jemand bei der Lösung helfen? ;)
Hätte das ganze jetzt mit "display: none" gelöst. Gibts da noch eine bessere Variante?

Vielen Dank.

Alex.W. Offline

  • Administrator
  • Sr. Member
  • *****
  • Beiträge: 484
  • Geschlecht: Männlich
    • Facebook
    • Twitter
    • Youtube
    • Profil anzeigen
CSS: Style des Sub-Elements in Abhängigkeit eines übergeordneten Elements
« Antwort #1 am: 03. Dezember, 2016, 22:52:23 Nachmittag »
Hey,
ich verstehe nicht ganz was du erreichen willst, hast du vielleicht ein konkretes Beispiel?

Zu 1. kenne ich so keine Möglichkeit, aber du kannst das auch mit PHP lösen z.B. mit if und echo style="".

Gruß, Alex. W.
The worst things in life come free to us ...


McWinston Offline

  • Jr. Member
  • **
  • Beiträge: 67
  • Geschlecht: Männlich
    • Profil anzeigen
    • Fatbike Ratgeber
CSS: Style des Sub-Elements in Abhängigkeit eines übergeordneten Elements
« Antwort #2 am: 03. Dezember, 2016, 22:59:01 Nachmittag »
Ok, dann muss ich wohl doch genauer werden.

Es geht um eine Sticky-Navigationsleiste (klar?).
Als Default gehört die Navigationsleiste der Klasse "affix-top" an. Sobald die Navigationsleiste "andockt" und mit scrollt, wechselt die klasse zu "affix".
In diesem Moment möchte ich folgendes umsetzen:

#navigation .menu-item:first-of-type { display: none; }

Alex.W. Offline

  • Administrator
  • Sr. Member
  • *****
  • Beiträge: 484
  • Geschlecht: Männlich
    • Facebook
    • Twitter
    • Youtube
    • Profil anzeigen
CSS: Style des Sub-Elements in Abhängigkeit eines übergeordneten Elements
« Antwort #3 am: 03. Dezember, 2016, 23:44:29 Nachmittag »
Hast vielleicht n Link für mich?  :)

JQuery könnte auch eine Möglichkeit sein in dem Fall.

Für reines CSS klingt mir das zu kompliziert.

Gruß, Alex. W.
The worst things in life come free to us ...


McWinston Offline

  • Jr. Member
  • **
  • Beiträge: 67
  • Geschlecht: Männlich
    • Profil anzeigen
    • Fatbike Ratgeber
CSS: Style des Sub-Elements in Abhängigkeit eines übergeordneten Elements
« Antwort #4 am: 04. Dezember, 2016, 00:05:42 Vormittag »
Da kannste im Grunde meine fatbikes-kaufen-Seite nehmen - will es also im affiliatetheme.io einbinden.

Vorbild ist in etwa diese Seite: handybus[punkt]de

Danke schonmal für deine Hilfe =)
« Letzte Änderung: 04. Dezember, 2016, 00:08:39 Vormittag von McWinston »

Alex.W. Offline

  • Administrator
  • Sr. Member
  • *****
  • Beiträge: 484
  • Geschlecht: Männlich
    • Facebook
    • Twitter
    • Youtube
    • Profil anzeigen
CSS: Style des Sub-Elements in Abhängigkeit eines übergeordneten Elements
« Antwort #5 am: 04. Dezember, 2016, 00:25:51 Vormittag »
Die verwenden JQuery dafür, hier der Auszug:
<script>jQuery(document).ready(function() {
jQuery("#navigation").affix({
offset: {
top: jQuery("#navigation").offset().top,
}
});

jQuery("#navigation").on("affix.bs.affix", function () {
jQuery("#header").addClass("pb50");
});

jQuery("#navigation").on("affix-top.bs.affix", function () {
jQuery("#header").removeClass("pb50");
});

if ( jQuery("#navigation").hasClass("affix") ) {
jQuery("#header").addClass("pb50");
}
});</script>

Einfacher geht es mit Jquery direkt das entsprechende Element über die ID ein und auszublenden.

Musst du googeln nach Jquery CSS Manipulation oder Jquery CSS Style ändern etc.  ;)

Oder wenn du es genau so machen willst musst du in deiner CSS Datei das display:none; in eine Klasse / ID stecken OHNE sie deinem Element zuzuordnen, die Zuordnung machst du dann wie im o.g. Codeschnippsel bzw. entfernst sie wieder auch genau so und dann hast du deinen gewünschten Effekt

Nur mit CSS geht es nicht

Gruß, Alex. W.
« Letzte Änderung: 04. Dezember, 2016, 00:28:23 Vormittag von Alex.W. »
The worst things in life come free to us ...


McWinston Offline

  • Jr. Member
  • **
  • Beiträge: 67
  • Geschlecht: Männlich
    • Profil anzeigen
    • Fatbike Ratgeber
CSS: Style des Sub-Elements in Abhängigkeit eines übergeordneten Elements
« Antwort #6 am: 04. Dezember, 2016, 02:31:59 Vormittag »
Also diese JQuery-Funktion ist schon enthalten.
Sprich diese pb50-Klasse wird hinzugefügt und auch das Wechseln zwischen affix-top und affix funktioniert.

Habs jetzt quasi soweit, dass das Menü nahezu so aufgebaut ist, wie das von handybus.
Sprich: erstes Menu-Item ist von der Klasse "visible-affix menu-item[..]" und das zweite ist "hidden-affix menu-item[..]"

erreicht mit dem PHP-Code:
if ($item->ID == 2731) {
$class_names = "visible-affix ";
} else if ($item->ID == 80) {
$class_names = "hidden-affix ";
}
--> ist jetzt nicht universell geschrieben, ich weiss...bin aber auch nicht so der PHP-Könner^^

Wenn ich aber die Seite scrolle ändern sich aber die zugeordneten CSS-Anweisungen nicht - bei handybus[punkt]de funktioniert das jedoch.

Der CSS-Code ist auch nur kopiert:
@media (min-width: 768px)
#navigation.affix .visible-affix {
    width: 160px;
}

@media (min-width: 768px)
#navigation .visible-affix {
    width: 0;
    overflow: hidden;
    transition: width 0.3s;
}

@media (min-width: 768px)
#navigation.affix .hidden-affix {
    display: none;
}

siehe Fatbike-Seite: Das Icon-Feld soll quasi verschwinden, wenn Navigationsleiste nicht angepinnt ist.

Danke Dir =)

Alex.W. Offline

  • Administrator
  • Sr. Member
  • *****
  • Beiträge: 484
  • Geschlecht: Männlich
    • Facebook
    • Twitter
    • Youtube
    • Profil anzeigen
CSS: Style des Sub-Elements in Abhängigkeit eines übergeordneten Elements
« Antwort #7 am: 04. Dezember, 2016, 13:56:55 Nachmittag »
Okay, dann mach eine neue Klasse mit display:none; in deiner CSS Datei und dann if ( jQuery("#navigation").hasClass("affix") ) {
jQuery("#menu-item-2731").addClass("deineneuedisplaynoneklasse");
}

und wiederum if #navigation has class "affix-top" jQuery("#header").removeClass("deineneuedisplaynoneklasse");


Dann solltest du den selben Effekt erzielen, ist aber nicht der Selbe Code wie bei Handybus.

Gruß, Alex. W.
The worst things in life come free to us ...


McWinston Offline

  • Jr. Member
  • **
  • Beiträge: 67
  • Geschlecht: Männlich
    • Profil anzeigen
    • Fatbike Ratgeber
CSS: Style des Sub-Elements in Abhängigkeit eines übergeordneten Elements
« Antwort #8 am: 05. Dezember, 2016, 17:07:38 Nachmittag »
So läuft jetzt! :D
Ist zwar optisch noch nicht komplett angepasst, aber die Grundfunktionalität ist da.

Danke Alex!

(btw: ein Script musste ich doch an keiner Stelle  ändern)

Alex.W. Offline

  • Administrator
  • Sr. Member
  • *****
  • Beiträge: 484
  • Geschlecht: Männlich
    • Facebook
    • Twitter
    • Youtube
    • Profil anzeigen
CSS: Style des Sub-Elements in Abhängigkeit eines übergeordneten Elements
« Antwort #9 am: 05. Dezember, 2016, 20:44:18 Nachmittag »
Freut mich, dass du einen Weg gefunden hast!

Wie hastes hinbekommen? Css erstes Auswahl Item display:none; bei Klasse Affix?

Gruß, Alex. W.
The worst things in life come free to us ...


McWinston Offline

  • Jr. Member
  • **
  • Beiträge: 67
  • Geschlecht: Männlich
    • Profil anzeigen
    • Fatbike Ratgeber
CSS: Style des Sub-Elements in Abhängigkeit eines übergeordneten Elements
« Antwort #10 am: 05. Dezember, 2016, 23:23:47 Nachmittag »
diesen PHP-Code musste ich beibehalten (eine ID hat sich geändert)
if ($item->ID == 2732) {
$class_names = "visible-affix ";
} else if ($item->ID == 80) {
$class_names = "hidden-affix ";
}
--> ist immer noch nicht universell geschrieben, ich weiss...
Für die, die es interessiert: das kommt in die Datei walker.php des affiliatetheme.io
Pfad: /wp-content/themes/affiliatetheme/library/navigation
--> ja, das ist nicht im Child-Theme! Korrekt! Tests und Recherchen ergaben, dass Library-Funktionen nicht von Child-Themes überladen werden können

Und dazu diesen CSS-Code
@media (min-width: 767px)
{
#navigation .visible-affix { display: none; }
#navigation .visible-affix > a { padding: 10px 15px !important; }
#navigation .visible-affix img { max-height: 40px; }
#navigation.affix .visible-affix { display: block; }
}

@media (min-width: 767px)
{
#navigation.affix .hidden-affix { display: none; }
}

Scripte blieben default.

Mir missfällt natürlich, dass der Hover-Effekt bei dem eingeblendeten Button nicht stimmt.
Wahrscheinlich fehlt da irgendeine Klassen-Zuweisung... prüfe ich morgen mal.
« Letzte Änderung: 05. Dezember, 2016, 23:30:31 Nachmittag von McWinston »

Alex.W. Offline

  • Administrator
  • Sr. Member
  • *****
  • Beiträge: 484
  • Geschlecht: Männlich
    • Facebook
    • Twitter
    • Youtube
    • Profil anzeigen
CSS: Style des Sub-Elements in Abhängigkeit eines übergeordneten Elements
« Antwort #11 am: 05. Dezember, 2016, 23:31:32 Nachmittag »
Hmm danke für deine Rückmeldung. Gar nicht so einfach, aber vielleicht kann es ja wer gebrauchen in der Zukunft und stößt hier drauf.

Oder ich habe mal das selbe Problem ...

Gruß, Alex. W.
The worst things in life come free to us ...