Problem bei Nutzung html css z-index nth-child

  • Gelöst vlux

    (@vlux)


    vor 9 Jahren, 3 Monaten

    Ich nutze ein theme-child von twentysixteen.
    Dort habe ich folgenden Beitrag verfasst:

    <div class="tabtest">

<section id="fluxaktuell">
	<h5><a href="#fluxaktuell">Stand 2016</a></h5>

</section>
<section id="flux2016">
	<h5><a href="#flux2016">Historie 2016</a></h5>

</section>
<section id="flux2015">
	<h5><a href="#flux2015">Historie 2015</a></h5>

</section>
	
</div>

    Dazu habe ich in der zugehörigen Datei style.css definiert:

    div.tabtest section {
		    position: absolute;
		   
		    margin-top: 75px;margin-left: 15px;
		    background-color: #e3e3e3;
		}

		div.tabtest section h5 {
		position: absolute;
		top: -70px;
		    left: 0;
		    width: 124px;
		    height: 29px;
		    font-family: Montserrat, "Helvetica Neue", sans-serif;
		    font-size: 13px;
		    margin: 10;
		    background-color: #c8c8c8;
		    border-radius: 15px 15px 0 0;
		    border: solid #ffffff;
		    border-width: 1px 1px 0 0;
		    z-index: 1;
		}

		div.tabtest section:nth-child(2) h5 {
		    left: 120px;
		    z-index: 0;
		}

		div.tabtest section:nth-child(3) h5 {
		    left: 240px;
		    z-index: -1;
		}

		div.tabtest section h5 a {
		    display: block;
		    margin: 5px 0 0 0;
		    text-align: center;
		    text-decoration: none;
		    color: #e3e3e3;
		
		}

    Leider werden mir nicht die 3 gewünschten seitlich versetzten h5-Überschriften angezeigt, sondern nur zwei. Anzusehen unter:
    http://www.flux-hildesheim.org/testtab
    Mir gelingt es nicht den fehler zu finden. Da die html Anweisungen außerhalb von WordPress das gewünschte Ergebnis liefern, hoffe ich, hier im Forum einen Tipp für die Lösung zu erhalten.
    Vielen Dank!!

Ansicht von 2 Antworten – 1 bis 2 (von insgesamt 2)
  • Flower33

    (@flower33)

    vor 9 Jahren, 3 Monaten

    Hallo @vlux,
    ohne mich da jetzt richtig reindenken zu wollen, weil ich nur in der Fußballpause hier reinschaue: 🙂
    Das liegt AFAICS am z-index:-1. Wenn du aus -1 eine 1 machst, wird (zumindest hier im Firefox) auch der dritte Tab sichtbar. Warum überhaupt die verschiedenen z-indizes hier? Wenn ich sie alle deaktiviere, klappts immer noch.

    Thread-Starter vlux

    (@vlux)

    vor 9 Jahren, 3 Monaten

    Vielen Dank, der wichtige Hinweis war

    z-index: -1

    Ich habe es jetzt geändert, die css-Anweisungen lauten jetzt:

    div.tabtest section {
		position: absolute;
		display: block;
		width: 1000px;
		height: 40px;
		margin-top: 40px;margin-left: 15px;
		background-color: #e9e9e9;
		}

		div.tabtest section h5 {
		position: absolute;
		top: -30px;
		    left: 0;
		    width: 124px;
		    height: 29px;
		    font-family: Montserrat, "Helvetica Neue", sans-serif;
		    font-size: 13px;
		    margin: 10;
		    background-color: #a2a2a2;
		    border-radius: 9px 9px 0 0;
		    border: solid #ffffff;
		    border-width: 1px 1px 0 0;
		    z-index: 5;
		}

		div.tabtest section:nth-child(2) h5 {
		    left: 120px;
		    z-index: 4;
		}

		div.tabtest section:nth-child(3) h5 {
		    left: 240px;
		    z-index: 3;
		}

		div.tabtest section h5 a {
		    display: block;
		    margin: 5px 0 0 0;
		    text-align: center;
		    text-decoration: none;
		    color: #e3e3e3;
		
		}
		div.tabtest section:target, div.tabtest section:target h5 {
		    color: #5a227a;
		    background-color: #e9e9e9;
		    z-index: 5;
		}

		div.tabtest section:target h5,div.tabtest  section:target a {
		    color: #c62828; /* rot */background-color: #e9e9e9;
		}

		div.tabtest section a {background-color: #a2a2a2; }

    Außerdem habe ich nun das

    Pseudoattribut :target

    eingefügt, um zwischen den Tabs zu springen, wenn der Link aktiviert wurde. Im nächsten Schritt werden dann Texte zum jeweiligen Tab formuliert. Damit sollte mein Vorhaben gelingen.
    Das Ergebnis vom Test steht weiterhin unterhttp://www.flux-hildesheim.org/testtab

    Vielen Dank für Deine Mühe!

Ansicht von 2 Antworten – 1 bis 2 (von insgesamt 2)

Das Thema „Problem bei Nutzung html css z-index nth-child“ ist für neue Antworten geschlossen.

Schlagwörter