Zwei <nav> innerhalb von <header>

[Yael]

Ist es erlaubt, innerhalb von <header> zwei <nav> zu platzieren?

Ich hab eine Top Navigation mit Impressum, Datenschutz, AGB und die zweite soll die eigentliche Punkte beinhalten wie Startseite, Anzeigen, Profile usw.

Bis jetzt habe ich dieses wie folgt umgesetzt

  
<header id="header">  
	<a class="logo" href="index.html" title="zur Startseite">Logo</a>  
  
    <nav>  
        <i class="fa fa-bars" style="margin-right:14px; font-size:14px"><span style="padding-left:5px;"><a href="#">Impressum</a></span></i>  
        <i class="fa fa-envelope-o" style="margin-right:14px; font-size:14px"><span style="padding-left:5px;"><a href="#">Kontakt</a></span></i>  
        <i class="fa fa-info" style="font-size:14px"><span style="padding-left:5px;"><a href="#">Datenschutz</a></span></i>  
   </nav>  
</header>		  

Ich weiß es sind derzeit noch inline CSS vorhanden, dieses habe ich zum testen eingefügt, sobald ich mit der Darstellung zufrieden bin, kommt dieses in eine externe CSS Datei.

Auch weiß ich, dass man eigentlich kein <i> für ein Symbol nehmen sollte, aber leider wird dieses von http://fortawesome.github.io/Font-Awesome/icons/ vorgegeben.

[Gunnar Bittersmann]

@@Yael:

nuqneH

Ist es erlaubt, innerhalb von <header> zwei <nav> zu platzieren?

Ja, aber …

Ich hab eine Top Navigation mit Impressum, Datenschutz, AGB

… das gehört eher nicht in den header, sondern in einen footer: “A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”

Und nein, header/footer hat nichts mit oben/unten zu tun.

nav ist für Links zu Impressum, Datenschutz, AGB auch gar nicht angebracht: “Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.”

und die zweite soll die eigentliche Punkte beinhalten wie Startseite, Anzeigen, Profile usw.

Dafür hingegen ist nav angebracht.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

… das gehört eher nicht in den header, sondern in einen footer

oder in aside.

Qapla'

[Yael]

Hallo Gunnar Bittersmann

… das gehört eher nicht in den header, sondern in einen footer
oder in aside.

Aber <aside> ist doch gedacht, etwas auf einer rechten bzw. linken Seite zu platzieren, sprich neben dem Content, so hat es uns unser Dozent erklärt. Ist dieses etwa wieder falsch?

[Matthias Apsel]

Om nah hoo pez nyeetz, Yael!

Aber <aside> ist doch gedacht, etwas auf einer rechten bzw. linken Seite zu platzieren, sprich neben dem Content, so hat es uns unser Dozent erklärt. Ist dieses etwa wieder falsch?

Das aside-Element umschließt Abschnitte einer Seite, deren Inhalt nur in einem indirekten Zusammenhang mit dem umgebenden Inhalt stehen. Dies sind zum Beispiel Randbemerkungen, Fußnoten oder Links zu weitergehenden Webseiten.

Welches Element gewählt wird, hängt ausschließlich vom Inhalt ab, niemals von der gewünschten Darstellung.

Matthias

[Yael]

Das aside-Element umschließt Abschnitte einer Seite, deren Inhalt nur in einem indirekten Zusammenhang mit dem umgebenden Inhalt stehen. Dies sind zum Beispiel Randbemerkungen, Fußnoten oder Links zu weitergehenden Webseiten.

Danke für deine Antwort, das heißt auch ein <aside> darf öfters auf einer Seite vorkommen und vor allem egal an welcher Stelle.

Ich muss die Tage mal unseren Dozenten fragen ob er überhaupt weiß, dass er zu 80% nur Müll erzählt. Hat dieses bestimmt nicht gelernt.

[M.]

Mahlzeit,

Ich muss die Tage mal unseren Dozenten fragen ob er überhaupt weiß, dass er zu 80% nur Müll erzählt. Hat dieses bestimmt nicht gelernt.

Sag und aber dann, wie er reagiert hat :D

[Der Martin]

Hallo,

Aber <aside> ist doch gedacht, etwas auf einer rechten bzw. linken Seite zu platzieren, sprich neben dem Content

"neben" dem Content ist schon richtig, aber "neben" ist hier nicht unbedingt räumlich zu verstehen, sondern eher im logischen Sinn: "Ach übrigens, nebenbei ..."

so hat es uns unser Dozent erklärt. Ist dieses etwa wieder falsch?

Nicht direkt falsch, aber zu stur auf die Darstellung fixiert.

So long,
 Martin

[Gunnar Bittersmann]

@@Yael:

nuqneH

Aber <aside> ist doch gedacht, etwas auf einer rechten bzw. linken Seite zu platzieren, sprich neben dem Content, so hat es uns unser Dozent erklärt. Ist dieses etwa wieder falsch?

aside hat genauso viel mit rechts/links zu tun wie header/footer mit oben/unten: nichts.

Qapla'

[Yael]

Hallo Gunnar Bittersmann

… das gehört eher nicht in den header, sondern in einen footer: “A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”

Und nein, header/footer hat nichts mit oben/unten zu tun.

das heißt, ich sollte dieses so lösen?

  
<header>  
    <nav>  
    	<ul>  
        	<li>Startseite</li>  
        	<li>Anzeigen</li>  
        </ul>  
    </nav>  
	<footer>  
    	<ul>  
        	<li>Impressum</li>  
        	<li>Datenschutz</li>  
        	<li>Impressum</li>  
        </ul>  
    </footer>  
</header>  

[Matthias Apsel]

Om nah hoo pez nyeetz, Yael!

das heißt, ich sollte dieses so lösen?

<header>
    <nav>
     <ul>
         <li>Startseite</li>
         <li>Anzeigen</li>
        </ul>
    </nav>
<footer>
     <ul>
         <li>Impressum</li>
         <li>Datenschutz</li>
         <li>Impressum</li>
        </ul>
    </footer>
</header>

  
Eher nein. Natürlich kann ein header-Element auch einen footer haben. Dein Footer enthält jedoch Inhalte, die sich auch das komplette Dokument (sogar auf die gesamte Webpräsenz) beziehen, er ist also ein dokumentweiter Footer.  
  
siehe <http://blog.selfhtml.org/2013/03/10/html5-serie-neue-elemente-fuer-die-seitenstruktur/>  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Hund und Hundertwasser](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=H#hund).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[M.]

Mahlzeit,

Eher nein. Natürlich kann ein header-Element auch einen footer haben. Dein Footer enthält jedoch Inhalte, die sich auch das komplette Dokument (sogar auf die gesamte Webpräsenz) beziehen, er ist also ein dokumentweiter Footer.

Macht das bei Screenreadern o.ä. eigentlich einen Unterschied, also evtl. die Reihenfolge usw.?
Denn grade dann sollte man auf sowas natürlich verstärkt achten.

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

Natürlich kann ein header-Element auch einen footer haben.

Bevor es der Gunnar liest: Nein.

Matthias

[Kackfohgel]

Ich hab eine Top Navigation mit Impressum, Datenschutz, AGB

… das gehört eher nicht in den header, sondern in einen footer: “A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”

Und nein, header/footer hat nichts mit oben/unten zu tun.

Das ist schon schwer in den head zu kriegen. Für mich wäre das bisher eine eindeutige Navigation zu den Unterseiten Impressum, Datenschutz und AGB und ich hätte das vmtl. auch eher in <nav> untergebracht und diese wiederum in einen <header>; eben gerade weil es naheliegt; dass der <header> im Seitenkopf (=>oben) und der <footer> am Seitenfuß (=> unten) zu suchen ist.

Wenn sich der Bankräuber eine Strumpfhose über den Kopf zieht, bleibt die Strumphose zwar eine Strumpfhose, aber dessen Birne wird dann ja nicht automatisch zum Fuß. Ein <header> scheint hingegen zum <footer> zu werden, wenn eine Socke darüber gez... äääh ein Impressumslink, Copryright o.ä. darin steckt.

Ich wollte das aus dem zitierten Textstück auch noch anders interpretieren, aber wenn man den verlinkten Artikel vollständig liest, scheint es wirklich so zu sein.

"Footers don't necessarily have to appear at the end of a section, though they usually do."

Ich glaube vor dem Hintergrund sind die Bezeichnungen echt irreführend. Bei <aside> habe ich das komischerweise nie so gesehen - auch wenn ich dies mal nicht seitlich angeordnet habe. Aber einen Footer am Seitenanfang ... das ist schon gewöhnungsbedürftig. Aber wenn man die Bezeichnung als Angabe der typischen und nicht vorgegebenen Anordnung sieht, wird eine Socke äääh ein Schuh daraus.

Naja, der Bankräuber wird vmtl. genau so wenig das Kleingedruckte gelesen haben wie ich. Ich danke für die Aufklärung.

Freundliche Grüße
Kackfohgel

[Gunnar Bittersmann]

@@Kackfohgel:

nuqneH

Aber einen Footer am Seitenanfang ... das ist schon gewöhnungsbedürftig. Aber wenn man die Bezeichnung als Angabe der typischen und nicht vorgegebenen Anordnung sieht, wird eine Socke äääh ein Schuh daraus.

Ich hab mich dran gewöhnt. Siehe Quelltext.

Qapla'

[Yael]

Hallo,

hab noch eine weitere Frage, warum wird mein CSS im Firebug durchgestrichen?

Mein CSS Code sieht so aus:

  
#firstNav {  
    border-bottom: 1px solid #dad9d9;  
    margin-bottom: 31px;  
    margin-top: 75px;  
    padding-bottom: 16px;  
}  
  
#firstNav a:first-child {  
	font-weight:bold;  
	padding-right:10px;  
	padding-left:1px;  
}  
  
#firstNav a {  
	font-weight:bold;  
	padding-right:10px;  
}  
  
#firstNav a:last-child {  
	font-weight:bold;  
	padding-right:0px;  
}  

[Yael]

Ah ok, man muss wohl im :first-child nur das angeben, das zusätzlich hinzukommt

  
#firstNav a {  
	font-weight:bold;  
	padding-right:12px;  
}  
  
#firstNav a:first-child {  
	padding-left:5px;  
}  
  
#firstNav a:last-child {  
	padding-right:0px;  
}  

jetzt wird es auch nicht mehr durchgestrichen.

[Matthias Apsel]

Om nah hoo pez nyeetz, Yael!

Ah ok, man muss wohl im :first-child nur das angeben, das zusätzlich hinzukommt.

muss nicht, aber sollte. Vor allem muss man angeben, was sich ändern soll.

Am Ende muss eine eindeutige Definition für die Darstellung des Elements geben. Dazu muss geregelt sein, wie mit redundanten oder widersprüchlichen Deklarationen umgegangen werden soll. Das ist nicht unkomplex. Lies dazu etwa dies.

Matthias

[ChrisB]

Hi,

hab noch eine weitere Frage, warum wird mein CSS im Firebug durchgestrichen?

Firebug zeigt dir damit an, dass diese Regel zwar auf das Element zutrifft – die durchgestrichenen Eigenschaften aber von den Angaben in einer Regel mit höherer Spezifität überschrieben werden.

MfG ChrisB

[Yael]

Ich hab noch eine kleine Zusatzfrage zu meiner Navigation. Wenn ich auf meiner Seite nach unten scrolle verschwindet meine Navigation bzw. der ganzer Headerbereich, dieses ist soweit auch OK.

Wäre es denn möglich, eine alternative Navigation einzublenden, wenn man sagen wir ca. 400px nach unten gescrollt ist? Natürlich sollte diese auch wieder verschwinden, wenn man nach oben Scrollt.

Ist so etwas schwer umzusetzen? Ich sehe diese Technik in der letzten Zeit auf sehr vielen Seiten. Leider habe ich das nötige CSS nie gefunden.

Zwei Seiten die das neu drin haben:

http://www.bild.de/

Diese Seite hat es meiner Meinung nach sehr toll umgesetzt
http://winfuture.de/

[Matthias Apsel]

Om nah hoo pez nyeetz, Yael!

Wäre es denn möglich, eine alternative Navigation einzublenden, wenn man sagen wir ca. 400px nach unten gescrollt ist? Natürlich sollte diese auch wieder verschwinden, wenn man nach oben Scrollt.

Mit CSS allein ist das nicht möglich. Auch möchtest du nicht zwei Navigationen haben (und pflegen müssen) sondern du möchtest die eine verändern, wenn gescrollt wurde. Um festzustellen, wie weit gescrollt wurde, benötigst du JavaScript. Eine erste Anregung könnte dir dieser Artikel liefern.

Matthias

[Yael]

Mit CSS allein ist das nicht möglich. Auch möchtest du nicht zwei Navigationen haben (und pflegen müssen) sondern du möchtest die eine verändern, wenn gescrollt wurde. Um festzustellen, wie weit gescrollt wurde, benötigst du JavaScript. Eine erste Anregung könnte dir dieser Artikel liefern.

Ich hab mir das angesehen, aber verstehe leider nicht, wie ich sagen kann wenn ein gewisser Bereich erreicht ist, dass diesem Code

  
    <nav id="naviOben">  
   </nav>  

noch eine class="naviObenFix" hinzugefügt wird.

[Martin_Online]

Ich hab mir das angesehen, aber verstehe leider nicht, wie ich sagen kann wenn ein gewisser Bereich erreicht ist, dass diesem Code

<nav id="naviOben">
   </nav>

>   
> noch eine `class="naviObenFix"`{:.language-html} hinzugefügt wird.  
  
Schau mal, ob du damit weiter kommst [http://gutefrage.electro-jot.de/onscroll.html](http://gutefrage.electro-jot.de/onscroll.html)