Mitfliegende Navigation per Html5/Css3

Niksda · 17.01.2013

Hallo Freunde,
ich beschäftige mich seit neustem mit Html 5 und bin am ausprobieren.

Ich suche ein Tutorial in dem erklärt wird, wie man den Content unter der Navigation und dem Footer verschwinden lassen kann. Etwa so wie hier:

http://www.sonjabell.de/

Müsste ja eigtl. nicht zu schwer sein.
Wäre auch zufrieden wenn es mir jemand erklären kann.

LG, Niksda.

PS: Meine Testwebsite besteht bis jetzt aus <header> <div id="container"> <nav><section ="content"> und nem <footer>.

leveler · 17.01.2013

AW: Mitfliegende Navigation per Html5/Css3

Dem header-wrapper und dem footer-wrapper wurden die css-Anweisung: "postition: fixed "mitgegeben. Daher bleiben diese Elemente stehen. Woher ich das weiss? Hab mir mit Firebug den Quellcode angeschaut und schwupps, sieht man, was wo wie wirkt.
Daher ein heisser Tip: wenn Dir eine Seite gefällt (und es keine Flashseite ist), kannst Du mit diesem Tool immer sehen, wie der Hase läuft

Niksda · 17.01.2013

AW: Mitfliegende Navigation per Html5/Css3

Vielen Dank. Ich hab auch den Quellcode aufgemacht (mit Google Chrome), dann ganz viel Code gesehen und gedacht, ach im forum geht das viel schneller

.

Was ist empfehlenswert um Content von verschiedenen Unterseiten einzubinden. Ohne jetzt in jedes Dokument die Navigation reinzukleben? <iframe>?, <embed>?

Myhar · 17.01.2013

AW: Mitfliegende Navigation per Html5/Css3

Ein Tip noch für dich als Google Chrome Nutzer: Verwende die rechte Maustaste und schau dir den Menüpunkt "Element untersuchen" (der allerletzte) an. Damit kannst du auch den Code einer Website analysieren und dir Ideen holen.
Wie meinst du deine zweite Frage? Seiten werden als HTML ausgeliefert und bei "großen", bzw. dynamischen Seiten im Backend (Sie es mittels CMS, per PHP, Java, wasauchimmer) generiert. Bei einer statischen Seite (mit wenigen Unterseiten) kann jede Seite als HTML Datei angelegt und untereinander verlinkt werden. iframe oder embed wird auf der eigenen Seite nirgends* verwendet.
* Außer um Videos, social-media-zeugs oder sonstige, für den eigentlichen Inhalt irrelevanten Sachen, einzubinden.

leveler · 17.01.2013

AW: Mitfliegende Navigation per Html5/Css3

Was ist empfehlenswert um Content von verschiedenen Unterseiten einzubinden.Ohne jetzt in jedes Dokument die Navigation reinzukleben?

Weiss jetzt nich 100% was du meinst,aber man kann Teile, die immer wieder auf jeder Seite auftauchen , auslagern (zB eine navigation) und dann per php "require_once" oder "include" von jeder html-Seite reinladen. Wenn die Inhalte dabei immer gleich sind, ist das sehr komfortabel, da man nur einen php-Aufruf benötigt, um diverse Zeilen Code einzupflegen. Ich gestehe allerdings, dass ich mit php nicht sehr sattelfest bin, evt gibts da bessere Lösungen.

Niksda · 17.01.2013

AW: Mitfliegende Navigation per Html5/Css3

Verlinkt im Sinne von <link href="#"... So wie bei CSS?

Sagen wir ich hab 5 Menüpunkte: Home, About, Media, Contact, Impressum.
Die Navi soll im index.html sein. wenn ich auf einen menüpunkt klicken soll dann unten im entsprechenden Contentbereich die Unterseite erscheinen.

Muss ich dass dann in den head reinpacken oder da wo der Content sein soll?

Nochmal Danke für deine schnelle, kompetente Antwort!

dlogic · 17.01.2013

AW: Mitfliegende Navigation per Html5/Css3

Die Navi soll im index.html sein... ich gehe mal davon aus du meinst eine horizonale Navigation direkt unter dem <header>

<header> - großes plakatives Bild (nicht verwechseln mit <head>!)
<nav> - horizontale Navigation
<section> - Content der einzelnen Seiten
<footer> - Abschließender Footer Bereich

Das Ganze kann man über PHP realisieren. Solltest du bei HTML bleiben, würde ich dir empfehlen die Navigation in jede einzelne Seite einzubringen und keine iframes, Frames etc. zu verwenden.

owieortho · 17.01.2013

AW: Mitfliegende Navigation per Html5/Css3

Du könntest Server Side Includes (shtml) verwenden, wenn der Server das unterstützt. Genau genommen hast Du aber genauso viel Lern- und Verwaltungsaufwand wie bei bei PHP, nur weitaus weniger Flexibilität. Und, mir ist keine aktuelle, moderne Seite bekannt, die ssi verwendet.

hth
O.

Niksda · 17.01.2013

AW: Mitfliegende Navigation per Html5/Css3

Ok Super, dann hab ich das bis jetzt richtig gemacht.
Hatte mir nur gedacht ich kann mir x-fachen code (für jede Seite) sparen wenn ich die unterseiten als <iframe> einbinde. Das wirkt sich vermutlich eh nicht großartig auf die Ladezeiten aus... (bei wenig Seiten)

Tja im Endeffekt läufts auf php raus.

Nochmals Danke an alle!
LG Niksda

Myhar · 18.01.2013

AW: Mitfliegende Navigation per Html5/Css3

dlogic schrieb:
<header> - großes plakatives Bild (nicht verwechseln mit <head>!)

<nav> - horizontale Navigation

<section> - Content der einzelnen Seiten

<footer> - Abschließender Footer Bereich

Woher hast du diese Informationen? Ich werde hier einfach die offiziellen definitionen reinkopieren. Man will ja nicht gleich mit falschen Informationen anfangen zu lernen ;-)

Header: A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

Nav: Erstens muss diese nicht horizontal sein. Zweitens: The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Section: http://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-section-element

Footer: The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

dlogic · 18.01.2013

AW: Mitfliegende Navigation per Html5/Css3

@Myhar

Du hast hier etwas völlig falsch verstanden...

dlogic schrieb:
Die Navi soll im index.html sein... ich gehe mal davon aus du meinst eine horizonale Navigation direkt unter dem <header>

Die von mir angegebene Struktur ist somit eine mögliche für seine Webseite und die Erklärung dahiner sinnbildlich zu verstehen. Aber ich finde es schön das du englische Texte kopieren kannst ;-)

Myhar · 18.01.2013

AW: Mitfliegende Navigation per Html5/Css3

dlogic schrieb:
Die von mir angegebene Struktur ist somit eine mögliche für seine Webseite und die Erklärung dahiner sinnbildlich zu verstehen.
/QUOTE]
Tut mir leid, aber das geht aus deinem Post nicht hervor. So wie du es formuliert hast, klingt es, als ob es so zu machen sei. Aber gut, dass du es jetzt wenigstens erwähnt hast.

dlogic schrieb:

Aber ich finde es schön das du englische Texte kopieren kannst ;-)

Zum Vergrößern anklicken....

Nicht nur kopieren, auch verlinken ;-)