Probleme mit em
bearbeitet von Gunnar Bittersmann@@bleumi85
> ~~~html
> <img id="logo" src="images/therminator2.png" />
> <nav class="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>
> ~~~
Das Logo und die Navigation würden gut in einem `header` gruppiert sein.
> ~~~html
> <section id="main">
> ~~~
`section` ist für (mehrere) **Unter**abschnitte. Für den **einen**(!) Hauptinhalt dient – wie Matthias schon sagte – das `main`-Element. Womöglich brauchst du dafür keine ID.
Apropos ID:
> ~~~css
> #Main{
> background:white;
> margin:0 15% 2em 15%;
> }
> ~~~
Das kann nicht wirken; der Selektor `#Main`{: .language-css} passt nicht zur ID `"main"`.
---
{: style="margin: 2em 0"}
> ~~~php
> <?php
> for($i=1; $i<=100; $i++){
> echo "Dies ist ein cooler Test! Nummer: ".$i."<br>";
> }
> ?>
> ~~~
Ich würde niemals™ Markup mit PHP generieren, sondern PHP in HTML schachteln – mit der [alternativen Syntax für Kontrollstrukturen](http://php.net/manual/de/control-structures.alternative-syntax.php):
~~~php
<?php for($i=1; $i<=100; $i++): ?>
Dies ist ein cooler Test! Nummer: <?php echo $i; ?><br>
<?php endfor; ?>
~~~
---
{: style="margin: 2em 0"}
> ~~~css
> .nav ul li{…}
>
> .nav ul li a{…}
> ~~~
Die Selektoren sind überspezifiziert. Mache Selektoren nur so spezifisch wie nötig: `.nav li` und `.nav a`{: .language-css}.
Aber wie Matthias schon sagte, brauchst du die Klasse `"nav"` nicht. Du kannst auch per Elementtyp `nav`{: .language-css style="white-space: nowrap"}, `nav ul`{: .language-css style="white-space: nowrap"}, `nav li`{: .language-css style="white-space: nowrap"} und `nav a`{: .language-css style="white-space: nowrap"} selektieren.
---
{: style="margin: 2em 0"}
> Wenn ich dem nav-Bereich eine Höhe von 3em gönne, die Textgröße auf 1em setze und das padding auch, wieso hab ich dann überstehende Ränder?
Was heißt „überstehende Ränder“? [Online-Beispiel, bitte.](https://forum.selfhtml.org/self/2015/jan/14/jquery-footer-ie-fehler/1629597#m1629597)
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"}