HTML Navigation oben und horizontal?
Ich möchte die Navigation oben und horizontal haben - wie geht das?
3 Antworten
Ich habe dir mal ein grundlegendes Beispiel erstellt: https://jsfiddle.net/v0v89q51/
Allgemein ist man heute gut damit beraten, statt auf kontextlose Tags wie DIV, UL, LI etc. auf sogenannte semantische Tags zu setzen, in diesem Fall also NAV. Von Flexbox rate ich bisher aus Kompatibilitätsgründen ab und empfehle für diesen Fall inline-block, was überhaupt keinen Mehraufwand darstellt. Allerdings ist ein kleiner Hack erforderlich, damit zwischen den Links kein unschönes Leerzeichen ist: Man schreibt alle Tags in eine Zeile. Da dies aber während der Entwicklungsphase unlesbar ist, kann man auch einfach die schließende spitze Klammer in eine neue Zeile schreiben.
Ansonsten sollte eigentlich alles recht verständlich sein. Hast du trotzdem noch weitere Fragen, kannst du dich gerne melden.
PS: Achte auf die gewählten Tags. Dies hat nichts mit Programmierung zu tun.
Lade den Code am besten direkt hier hoch und poste den Link, nachdem du gespeichert hast: https://jsfiddle.net/
Du rätst aus Kompatibilitätsgründen davon ab? Da bin ich anderer Meinung und mittlerweile Flexbox produktiv einsetze.
Teilweise setze ich es ein, meistens aber noch nicht. Man muss letztendlich selbst entscheiden, ob man ältere IEs noch unterstützen will und ob man auf die ganzen Hacks und Fixes für den IE11 Lust hat.
Wenn man sich immer an den schlechtesten Browsers orientiert, leiden im Endeffekt die Entwicklungsgeschwindigkeit
inline-block stellt zumindest für mich keinen höheren Entwicklungsaufwand dar als Flexbox. Ich sehe in diesem konkreten Fall keinen Grund, weshalb dies die Entwicklung verzögern sollte. Bei anderen Dingen gebe ich dir natürlich Recht, aber man muss sich selbst auch immer sagen: Früher hat man es doch auch so gemacht. Warum also nicht heute weiterhin so?
und die Leute mit besseren Browser daran.
Es kommt ganz darauf an. Wenn es Features sind, die sehr performance- oder datenlastig sind, setze ich sie gar nicht erst ein. An inline-block leidet keiner. Ein normaler Nutzer merkt es nicht einmal, ob jetzt inline-block, float, Flexbox oder was es sonst noch alles gibt im Spiel ist.
Sollte einem Kompatibilität sehr wichtig sein, kann man noch immer einen CSS Post Processor drüber laufen lassen, z.B. den autoprefixer von PostCSS.
Prefixes mache ich schon selbst, aber nur sehr sparsam. Mittlerweile setze ich eigentlich fast nur noch -webkit- für ältere Safaris ein. Flexbox zu inline-block oder float kann dieses Tool allerdings nicht machen.
Von Flexbox rate ich bisher aus Kompatibilitätsgründen ab
Das sehe ich ebenfalls anders. Wenn man sich immer an den schlechtesten Browsers orientiert, leiden im Endeffekt die Entwicklungsgeschwindigkeit und die Leute mit besseren Browser daran.
Sollte einem Kompatibilität sehr wichtig sein, kann man noch immer einen CSS Post Processor drüber laufen lassen, z.B. den autoprefixer von PostCSS.
Allgemein ist man heute gut damit beraten, statt auf kontextlose Tags wie DIV, UL, LI etc. auf sogenannte semantische Tags zu setzen, in diesem Fall also NAV.
Kann ich nur dick unterstreichen. Die neuen semantischen Elemente sollte man wenn möglich verwenden. Bezüglich der neuen semantischen Elemente man sich auch mit dem role-Attribute vertraut machen sollte.
Der Validator vom W3C meckert zwar rum bzw. spuckt des role-Attributes wegen die ein oder andere Warnung aus, welche man jedoch getrost ignorieren kann. Kurz um - einfach mit ARIA (Accessible Rich Internet Applications) beschäftigen und etwas zur Barrierefreiheit beitragen.
Von Flexbox rate ich bisher aus Kompatibilitätsgründen ab und empfehle für diesen Fall inline-block, was überhaupt keinen Mehraufwand darstellt.
Du rätst aus Kompatibilitätsgründen davon ab? Da bin ich anderer Meinung und mittlerweile Flexbox produktiv einsetze. Ich kenne noch die Zeit in der man besonders den IE mit all seinen Kuriositäten fixen musste. Das war mal und nicht mehr mit Halbgas entwickle.
Letztendlich hängt es vom Projekt selbst und der eigentlichen Zielgruppe ab. Im Enterprise-Bereich hier und da etwas zurückruder. Sei es weil im Firmen-internen Netz (Intranet) noch die ein oder andere Maschine mit älterem IE anwesend ist. Das war's dann eigentlich schon. Sonst wird ohne Browser-Prefixes »geflext«. Beim kompilieren dann entweder die Prefixes mit raushaue oder nicht.
LG medmonk
Ja. Haben wir vom Lehrer bekommen und sollen dran probieren :)
Wenn dein Lehrer so etwas im Unterricht behandelt respektive euch lehren will, erst einmal selber sehr genau wissen sollte, was er da macht. Das ausgegebene Arbeitsmaterial ist eigentlich ein No-Go und auf nen aktuelleren Stand gebracht werden sollte. Bevor dein Lehrer es an euch Schüler weitergibt, sein eigenes Geschreibsel erst mal validieren sollte.
Das Markup deines Lehrers, so wie es aktuell ist, direkt in die Tonne werfen. Neue angelegte HTML-Dokumente sollten gleich aktuell sein. Ergo den HTML5-Doctype verwenden und zum Auszeichnen einzelner Bereiche die neuen semantischen Elemente verwenden. Sei es <header> für den sichtbaren Kopfbereich, <nav> für die Navigation oder <main> für die eigentlichen Inhalte.
Die Zeilenumbrüche <br> im Bereich der Navigation sind schon mal murks und da nichts zu suchen haben. Ebenso wenig sollten die Anker (Links) einfach so hintereinanderweg geschrieben werden. Zur Umsetzung von Navigationen verwendet man i.d.R. unsortierte Listen <ul> und formatiert diese anschließend mit Hilfe von CSS. Wenn man die neuen semantischen Elemente mit einbezieht, man die unsortierte Liste in einen Nav-Tag schreibt.
Nachfolgend siehst du die eine aktualisierte Version vom Markup deines Lehrers. Das »Dokument« wurde mit dem HTML5-Doctype ausgezeichnet, die Div-Tags durch semantische Tags ersetzt und die Navigation überarbeitet. Die ID's der einzelnen Elemente wurden einfach übernommen. Lediglich kurz anmerke, das ich so nicht arbeiten würde. Sprich ID's fast ausschließlich im Zusammenhang mit JavaScript nutze.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Freiwillige Feuerwehr</title>
<link rel="stylesheet" href="formate_wl.css">
</head>
<body>
<header id="kopf">
<h1>Freiwillige Feuerwehr</h1>
<img id="logo" src="Feuerwehr_RLBS_Logo.svg.png" alt="FFW Logo">
<img id="logo1" src="FFSIG_LOGO.jpg" alt="FFW Sig Logo">
</header>
<nav id="topnav">
<ul>
<li><a href="start.html" target="inhalt">Startseite</a></li>
<li><a href="angebote.html" target="inhalt">Fahrzeuge</a><li>
<li><a href="#" target="inhalt">Kontakt</a></li>
</ul>
</nav>
<main>
<iframe src="start.html" name="inhalt">
</iframe>
</main>
</body>
</html>
Eine unsortierte Liste wir standardmäßig vertikal fortgesetzt. Wenn die einzelnen List-Elemente jedoch horizontal (nebeneinander) dargestellt werden soll, die Liste lediglich mit CSS formatiert werden muss. In CSS gibt es wiederum mehre Möglichkeiten. Angefangen beim abwärts-kompatiblen CSS Box-Modell mit float oder moderner mit dem Flexbox-Model (display: flex;).
CSS (Box-Model):
#topnav ul {
list-style-type: none;
overflow: hidden;
padding: 0;
}
#topnav li {
float: left;
}
#topnav a {
display: block;
padding: 16px 50px;
}
CSS (Flexbox-Model):
#topnav ul {
list-style-type: none;
display: flex;
padding: 0;
}
#topnav a {
display: block;
padding: 16px 50px;
}
Last but not least - wenn du denn Quellcode (Markup) deines Lehrers nicht abändern darfst, sprich alles so bleiben muss und ihr lediglich mit CSS arbeiten dürft, folgende Zeilen in dein CSS schreiben kannst:
#topnav {display: flex;}
#topnav a {padding: 16px 50px;}
Falls du noch Fragen hast oder sonst etwas unklar sein sollte, einfach schreiben. Sofern möglich und ich die Zeit habe, drauf antworten werde.
LG medmonk
Vielen lieben Dank! Werde es mir jetzt anschauen und bei Fragen komme ich auf dich zurück.
Arbeite mit der CSS-Eigenschaft display. Verwende entweder den Wert inline-block oder flexbox.
Verzichte auf die veraltete Eigenschaft float.
Beispiel mit Flexbox: https://jsfiddle.net/Savix/3emzytxL/
Nutze die Elemente, die für eine Navigation unter HTML üblicherweise verwendet werden: nav, ul, li
VG
Kann ich dir die gesamte Datei zukommen lassen? Die Navigation ist jetzt total verschoben.