CSS first-child bearbeitet von bleumi85 19.07.2016 09:53 Vielen Dank für die vielen und schnellen Antworten, leider bin ich was das hovern angeht immer noch nicht am Ziel, aber irgendwie werde ich schon noch eine Lösung finden. Vielleicht ist mein grundsätzlicher Aufbau auch irgendwie falsch. Mein HTML-Teil sieht aktuell wie folgt aus: ~~~html <body> <nav> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">bla bla</a></li> <li><a href="#">Bilder</a></li> <li><a href="#">Videos</a></li> </ul> </nav> </body> ~~~ Und das hier wäre die zugehörige CSS: ~~~css body{ font-size:100%; margin:0em; padding:0em; width:70%; left:15%; top:4em; position:absolute; } nav{ width:100%; height:3em; } nav ul{ margin:0em; padding:0em; } nav ul li{ position:relative; display:block; float:left; list-style:none; height:1.5em; background-image:linear-gradient(#46c182 15%, #00a652 100%); text-align:center; margin-right:0.3em; padding:0.6em 1em 0.9em 1em; border-radius:0.5em 0.5em 0 0; } nav ul li a{ text-decoration:none; color:white; font-size:1.5em; } nav ul li a.active{ background:white; color:black; } ~~~ Es bleibt aber dabei, dass das aktive li-Element nicht vollständig gefärbt wird sondern eben nur der Text und sein Hintergrund. Was genau ich da falsch angehe versteh ich selber nicht. > [Vollzitat entfernt]
CSS first-child bearbeitet von Matthias Apsel 19.07.2016 09:58 Vielen Dank für die vielen und schnellen Antworten, leider bin ich was das hovern angeht immer noch nicht am Ziel, aber irgendwie werde ich schon noch eine Lösung finden. Vielleicht ist mein grundsätzlicher Aufbau auch irgendwie falsch. Mein HTML-Teil sieht aktuell wie folgt aus: ~~~html <body> <nav> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">bla bla</a></li> <li><a href="#">Bilder</a></li> <li><a href="#">Videos</a></li> </ul> </nav> </body> ~~~ Und das hier wäre die zugehörige CSS: ~~~css body{ font-size:100%; margin:0em; padding:0em; width:70%; left:15%; top:4em; position:absolute; } nav{ width:100%; height:3em; } nav ul{ margin:0em; padding:0em; } nav ul li{ position:relative; display:block; float:left; list-style:none; height:1.5em; background-image:linear-gradient(#46c182 15%, #00a652 100%); text-align:center; margin-right:0.3em; padding:0.6em 1em 0.9em 1em; border-radius:0.5em 0.5em 0 0; } nav ul li a{ text-decoration:none; color:white; font-size:1.5em; } nav ul li a.active{ background:white; color:black; } ~~~ Es bleibt aber dabei, dass das aktive li-Element nicht vollständig gefärbt wird sondern eben nur der Text und sein Hintergrund. Was genau ich da falsch angehe versteh ich selber nicht. > @@Auge > > > Einel Liste `ul` (oder auch `ol` für eine geordnete Liste) darf selbst **nur** `li` als Kindelemente haben. > > Nicht **nur**. Auch _script-supporting elements_{: lang="en"}. [[HTML](http://w3c.github.io/html/grouping-content.html#elementdef-ul)] > > > > Die Browser sehen zwar gnädig über solche Fehler hinweg. da sie das aber nicht alle auf die selbe Art tun, also kein Verlass auf ein gleichartiges Verhalten ist, … > > HTML5 definiert einen Parser, d.h. dass die Verarbeitung von HTML-Quelltext – auch von fehlerhaftem – genau festgelegt ist. Neuere Browser sollten sich also gleich verhalten. > > LLAP 🖖 > -- > _“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.”_{: lang="en"} —Vitaly Friedman in [Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”](https://www.smashingmagazine.com/2016/06/inclusive-design-patterns/) > _[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}
nicht angemeldet nicht angemeldet
