Ankündigung

Einklappen
Keine Ankündigung bisher.

Zwei horizontale Navigationsleisten

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Zwei horizontale Navigationsleisten

    ALL-INKL.COM - Webhosting Server Hosting Domain Provider
    Hallo,
    ich bin neu hier und auch mit HTML und CSS nicht so vertraut.
    Meine mittlerweile schon etwas ältere Homepage, damals mit HTML4 erstellt, möchte ich jetzt erneuern und mit HTML5 und CSS etwas umgestalten.
    Ich habe schon einiges gelesen und kenne die Begriffe/Aufteilung header, navigation, section, footer. Das würde mir für meine (einfache) Homepage durchaus ausreichen, später kann es mehr werden.

    Hier möchte ich Hilfe/Unterstützung zum Block Navigation erhalten. Den Rest versuche ich mir zu "erlesen".
    Homepage hat die genannten 4 Bereiche.
    Die Navigation sollte zwei Zeilen/Leisten haben und zwar (beide) horizontal. Die eine ist das sogenannte Hauptmenü und die zweite ist das Untermenü, welche, bei jedem Punkt aus dem Hauptmenü etwas anders ist.
    Meine Fragen:
    1.) Wie kann ich in HTML5 (Editor) diese Zweiteilung am besten erreichen?
    2.) Wie kann ich die dann in/mit CSS am besten "ansprechen" und "formatieren"?
    Mir geht es mehr um die richtige "Bezeichnung/Aufteilung" im Editor und das zielgenaue ansprechen der Aufteilung in CSS.

    Hoffe es ist einigermaßen verständlich...

    Danke schon mal für die Unterstützung.

  • #2
    AW: Zwei horizontale Navigationsleisten

    Hallo

    header, navigation, section, footer
    Das wollen eher header, nav, main und footer sein. Ein navigation-Element gibt es nicht und section ist eher nicht für den Hauptinhalt geeignet.

    Für deinen Wunsch gibt es mehrere Möglichkeiten. Welche davon für dich am geeignetsten ist können wir dir ohne Kenntnis deiner Seite kaum raten.

    Zum einen kannst du zwei Nav-Elemente verwenden und ihnen jeweils eigene Klassen (class) zuweisen:

    Code:
    <body>
       <header>
       </header>
       <nav class="navigation">
       </nav>
       <nav class="unternavi">
       </nav>
       <main>
       </main>
       <footer>
       </footer>
    </body>
    mit folgendem CSS

    Code:
          .navigation {}
          .unternavi {}
    Oder zu verwendest nur ein nav-Element und gibst ihm zwei Container als direkte Kind-Elemente, also

    Code:
    <body>
       <header>
       </header>
       <nav class="navigation">
          <div></div>
          <div></div>
       </nav>
       <main>
       </main>
       <footer>
       </footer>
    </body>
    oder

    Code:
    <body>
       <header>
       </header>
       <nav class="navigation">
          <section></section>
          <section></section>
       </nav>
       <main>
       </main>
       <footer>
       </footer>
    </body>
    mit folgendem CSS

    Code:
          .navigation {}
          .navigation>:nth-child(1) {}
          .navigation>:nth-child(2) {}
    Das sind aktuell die üblichen Lösungen, es gibt aber noch weitere.

    Gruss

    MrMurphy

    Kommentar


    • #3
      AW: Zwei horizontale Navigationsleisten

      Danke.
      Werde mich morgen mal dran wagen.
      Hatte immer nur header, navigation, section, footer gelesen... Dachte das sind die Hauptbereiche, die man dann nach und nach anreichern/erweitern kann.
      bei der Suche nach HTML5 stoße ich auf eine Menge "Tutorials"/Regeln/Hinweise und ich weiß dann nicht was aktuell ist. Bin noch am Anfang.
      Für den Anfang sage ich Danke und werde mal "rumprobieren".

      Kommentar


      • #4
        AW: Zwei horizontale Navigationsleisten

        Hi,
        ich würde Dir empfehlen, <nav> als umschließendes Element für eine verschachtelte unsoltierte <ul> Liste zu verwenden und die horizentalen Ausrichtungen dann über CSS für das Hauptmenü (ul li {}) und die Untermenüs (ul ul li {}) zu definieren.

        Du solltest aber auch für Smartphones ein alternatives Menü mittels Javescipt bereitstellen oder ein vertikales Menü verwenden.

        Gruß
        Ingo
        Ingo Webdesign

        Kommentar


        • #5
          AW: Zwei horizontale Navigationsleisten

          Zitat von Ingo
          ich würde Dir empfehlen, <nav> als umschließendes Element für eine verschachtelte unsoltierte <ul> Liste zu verwenden und die horizentalen Ausrichtungen dann über CSS für das Hauptmenü (ul li {}) und die Untermenüs (ul ul li {}) zu definieren.
          So würde ich das auch empfehlen. Ist mit etwas CSS-Geschick auch weitesgehend responsive tauglich, so dass man nicht zwingend JavaScript dafür benötigt.
          PHProcks! » Tutorials

          Kommentar


          • #6
            AW: Zwei horizontale Navigationsleisten

            Danke für de Antworten.
            Bin aber ziemlicher Anfänger... Sagt mir alles nicht so viel...
            Habe jetzt anhand der Empfehlung von gestern einen Versuch gestartet.
            Mir ist noch nicht alles so klar, aber ein erstes Ergebnis habe ich. Denke auch, dass im nav-Bereich, das eine oder andere zuviel/überflüssig/nicht brauchbar ist, aber es sieht in etwa so aus, wie ich es haben will. Und oberste Maxime ist, es soll einfach sein, funktionieren und ich soll es einigermaßen verstehen.
            Habe versucht die vier Bereiche header, nav, main, footer in den Elementen (Schriftart, Farbe, Hintergrundfarbe) unterschiedlich zu gestalten, damit ich die Auswirkungen sehen kann (hilfreich für Anfänger). Hatte auch die Unterstreichung der nav-Positionen schon mal weg, aber jetzt sind sie wieder da.

            Hier der HTML-Teil
            Code:
            <!DOCTYPE html>
            <html lang="de">
            
            <head>
                <meta charset="utf-8">
                <title>Lerndatei HTML5 und CSS</title>
                <meta name="description" 
                      content="Dateiaufbau HTML5 und CSS">
                	<link rel="stylesheet" href="stylesheet10.css">
            </head>
            
            <body>
              <header>
              
            	<h1>Das ist eine Lern-Homepage zu HTML5 und CSS</h1>
            	<p>Diese Website gliedert sich in 4 Bereiche
                   header, navigation (mit zwei Leisten), main (mit Inhalten/Text/Bilder), footer</p>
            	
              </header>
            	
            	<nav class="navigation">
            		<!-- Startseite mit Hauptmenue ist eine eigene Seite
            			 fuer die Untermenues gibt es mehrere Seiten-->
            		<ul>
            			<a href="index.htm">Startseite</a>
            			<a href="datei1.htm">Thema_1</a>
            			<a href="datei2.htm">Thema_2</a>
            			<a href="datei3.htm">Thema_3</a>
            			<a href="datei4.htm">Thema_4</a>
            			<a href="datei5.htm">Thema_5</a>
            			<a href="datei6.htm">Thema_6</a>
            			<a href="datei7.htm">Thema_7</a>
            			<a href="datei8.htm">Thema_8</a>
            			<a href="datei9.htm">Thema_9</a>
            		</ul>
                </nav>
            	
            	<nav class="unternavi">
            		<!-- fuer jeden Untermenuepunkt eine extra Seite erstellen -->
            		<ul>
            			<a href="datei1_a.htm">Unterthema_1</a>
            			<a href="datei2_a.htm">Unterthema_2</a>
            			<a href="datei3_a.htm">Unterthema_3</a>
            		</ul>
            	</nav>
             
              <main>
            	<section>
            	
               <h1>Hier ist der Hauptbereich mit dem Inhalt der Homepage</h1>
              
            	<ul>
            		<li>Text Text Text</li>
            		<li>Bild Bild Bild</li>
            		<li>Weiterer Text Weiterer Text Weiterer Text</li>
            		<li>Weiteres Bild Weiteres Bild Weiteres Bild</li>
            	</ul>
              
              <p>Damit die Homepage Bereiche in der Lernphase sofort zu erkennen sind,
                 werden unterschiedliche Farben und Schriftarten vergeben.</p>
            	
            	</section>
            	
              </main>
               
              <footer>
            	<p>Text am unteren Rand</p>
              </footer>
            
            </body>
            </html>
            Hier der CSS-Teil
            Code:
            header, nav, section, footer
            header {
                background-color: yellow;
            	font-family: Corp Sans Semibold, sans-serif;
            	color: black;
            	padding: 5px 0 5px 5px;
            	margin-bottom: 20px; /* Abstand zu unterem Element */
            }
            
            .navigation {
            	background-color: grey;
            	font-family: Comic Sans MS, sans-serif;
            	color: yellow;
            	word-spacing: 20px;
            	padding: 20px 0 20px 0;
            	margin-bottom: 10px;
            }
            
            
            .unternavi {
            	background-color: lightgrey;
            	font-family: Forte, sans-serif;
            	color: yellow;
            	word-spacing: 20px;
            	padding: 10px 0 10px 0;
            	margin-bottom: 10px;	
            }
            
            nav ul { 
            	text-align: left;
            	padding: 5px;
            }
            
            /*
            nav li {
            	display: inline;
            	list-style-type: none;
            }
            */
            nav a, nav span {
            	display: inline; width: 8em;
            }
            
            nav:link
            { color:blue;
              text-decoration:none; }
            
            nav a:visited
            { color: black;
            text-decoration: none; }
            
            nav a:focus
            { color: green;
            text-decoration: none; }
            
            nav a:hover
            { color: red;
            text-decoration: none; }
            
            nav a:active
            { color: orange;
            text-decoration: none; }
            
            nav:link
            { color: blue;
              text-decoration: none; }
            
            section {
                background-color: lightgreen;
            	font-family: Times New Roman; serif;
            	color: white;
            	padding: 5px 0 5px 5px;
            	margin-bottom: 20px
            }
            
            footer {
                background-color: deepskyblue;
            	font-family: Lucida Calligraphy; sans-serif;
            	color: yellow;
            	padding: 5px 0 5px 5px;
            }
            Würde mich über Rückmeldungen freuen und bitte bedenken... "erste Schritte"

            Kommentar


            • #7
              AW: Zwei horizontale Navigationsleisten

              Hi,
              ich würde ja eine verschachtelte Liste nehmen und den Inhalt nicht in eine Liste, sondern Paragraphen setzen.

              nav würde ich auch nicht als Selektor verwenden und Comic Sans MS außer auf Comic-Seiten natürlich gar nicht.

              Gruß
              Ingo
              Ingo Webdesign

              Kommentar


              • #8
                AW: Zwei horizontale Navigationsleisten

                Danke für den Vorschlag. Nur wie kriege ich das hin??? Bin schon froh gewesen, dass ich "irgendeine" Lösung hinbekommen habe, die einigermaßen das hergibt was ich haben möchte.
                Wenn es nicht zuviel verlangt ist... Wie sieht dann der Code aus?
                Muss immer relativ viel probieren, da ich das so noch nicht gemacht habe und auch meine Kenntnisse das nicht hergeben. Danach muss ich ja wieder alles in CSS "ansprechen". Das fällt mir dann besonders schwer, diese vielen Möglichkeiten zu nutzen und die gewünschte Wirkung zu erzielen. Habe gerade heute gelesen, dass bei der CSS "Formatierung" zuerst die einzelnen/selektiven Attribute kommen, dann erst die allgemeinen auf nav bezogen. Das sind alles Sachen, die sich ewig hinziehen bis ich was brauchbares habe.
                Mein Gedanke war - 4 "klare" Bereiche in HTML und dann jeden einzelnen in CSS in Form bringen. Soll ja eine einfache Homepage werden (nichts kommerzielles) mit Text und Fotos. Danach kann ich mit de Zeit ja noch dran arbeiten und verfeinern. Hilfe ist immer willkommen .

                Schriften/Farben sind nur zum Üben, damit ich bei Veränderungen im CSS die Auswirkungen sehen kann.

                Danke und Gruß,
                Josef.
                Zuletzt geändert von pager; 22.11.2016, 21:26. Grund: Ergänzung

                Kommentar


                • #9
                  AW: Zwei horizontale Navigationsleisten

                  Hallo

                  Habe versucht die vier Bereiche header, nav, main, footer in den Elementen (Schriftart, Farbe, Hintergrundfarbe) unterschiedlich zu gestalten, damit ich die Auswirkungen sehen kann (hilfreich für Anfänger).
                  Nicht nur für Anfänger. Es kommt beim Erstellen von Webseiten immer wieder vor, dass man die Größen von Elementen aus den Augen verliert oder unerklärliche Abstände auftauchen. Das solltest du also beibehalten. Wobei in der Regel knallige / eindeutige Hintergrundfarben ausreichen. Andere zeitweise Formatierungen für die Entwicklung kannst du dann bei Bedarf hinzufügen. Das solltest du also beibehalten.

                  Mein Gedanke war - 4 "klare" Bereiche in HTML und dann jeden einzelnen in CSS in Form bringen.
                  Richtig. Davon solltest du dich auch nicht abbringen lassen.

                  Wenn es nicht zuviel verlangt ist... Wie sieht dann der Code aus?
                  Da hast du schon ganz richtig gelegen. Nur das ul-Element hat dort nichts verloren. Also

                  Code:
                     <nav class="navigation">
                        <a href="index.htm">Startseite</a>
                        <a href="datei1.htm">Thema_1</a>
                        <a href="datei2.htm">Thema_2</a>
                        <a href="datei3.htm">Thema_3</a>
                        <a href="datei4.htm">Thema_4</a>
                        <a href="datei5.htm">Thema_5</a>
                        <a href="datei6.htm">Thema_6</a>
                        <a href="datei7.htm">Thema_7</a>
                        <a href="datei8.htm">Thema_8</a>
                        <a href="datei9.htm">Thema_9</a>
                     </nav>
                     <nav class="unternavi">
                        <a href="datei1_a.htm">Unterthema_1</a>
                        <a href="datei2_a.htm">Unterthema_2</a>
                        <a href="datei3_a.htm">Unterthema_3</a>
                     </nav>
                  Der Rest dann mit CSS. Leider haben wir noch recht wenig Informationen von dir wie die Navigation im Endeffekt aussehen soll, so dass es schwierig ist dir konkrete Tips zu geben.

                  Zum Beispiel ob die Leisten direkt aneinanderstoßen sollen. Oder ob sich beim Hovern auch die Hintergrundfarbe ändern soll. Im Moment erscheinen mir auch die Höhen-Abstände innerhalb der nav-Elemente recht groß.

                  Gruss

                  MrMurphy
                  Zuletzt geändert von MrMurphy; 22.11.2016, 21:53.

                  Kommentar


                  • #10
                    AW: Zwei horizontale Navigationsleisten

                    Hallo,
                    der Gedanke zur Navigation ist folgender.

                    Es gibt das Hauptmenü mit ca. 10 Themen und drunter das Untermenü und da wird es zu jedem Thema vom Hauptmenü 1 - 5 Unterthemen geben.
                    Die aktiven "Begriffe" (Thema Hauptmenü und Thema Untermenü) sind schwarz, fett, die anderen wie angegeben, Maus-"Farbe1", besucht-"Farbe2", etc.

                    Im Moment habe ich es noch etwas bunt, damit ich Veränderungen nachvollziehen kann. Was tut sich bei welchem Befehl.

                    Je nach Thema im Hauptmenü und Untermenü wird es im "main"-Bereich einen anderen Text oder diverse Fotos geben. Das muss ich mir noch überlegen, wie und was ich da mache.

                    Im Moment ist mir der Gesamtaufbau mit einer sinnvollen Navigation wichtig. Da kenne ich noch nicht alle Befehle, oder besser gesagt, ich bin da noch am Suchen welcher Befehl (Code) wie geschrieben wird und was es dann für Auswirkungen hat. Anfänger halt... Dachte nur, durch Probieren (und Fragen) lernt man am meisten.

                    Kommentar


                    • #11
                      AW: Zwei horizontale Navigationsleisten

                      Hallo

                      Es gibt das Hauptmenü mit ca. 10 Themen und drunter das Untermenü und da wird es zu jedem Thema vom Hauptmenü 1 - 5 Unterthemen geben.
                      und

                      Die aktiven "Begriffe" (Thema Hauptmenü und Thema Untermenü) sind schwarz, fett, die anderen wie angegeben
                      Das sind der zweite und der dritte Schritt und etwas aufwändiger.

                      Benutzerfrendlich ich ist jedem Fall schon mal dass deine Hauptnavigation und die jeweilige Unternavigation ständig sichtbar sind. Das solltest du auch beibehalten.

                      Die Hauptüberschrift befindet sich in der Regel direkt unter der Navigation. Wenn aus der Hauptüberschrift hervorgeht auf welcher Seite sich der Besucher befindet reicht das in der Regel vollkommen aus.

                      Du kannst auch direkt unterhalb der Navigation eine sogenannte Breadcrumb-Leiste erstellen, die den aktuellen Weg anzeigt. Aber auch das ist relativ aufwändig und sollte ein weiterer Schritt sein.

                      Erst mal sollte ein stabile Grundnavigation stehen, die später problemlos für weitere Verfeinerungen erweitert werden kann. Das HTML dazu hast du ja bereits.

                      Ich beschreibe mal wie ich bei der Navigation von Beginn an vorgehen würde, da hast du dich ja etwas verlaufen.

                      Zunächst lösche ich alle Einzelangaben zu nav, .navigation, .unternavi und a. Da die Navigation in die bestehende Seite eingefügt werden soll bleibt das Rest-CSS bestehen, also:

                      Code:
                            header,
                            nav,
                            section,
                            footer {
                               background-color: yellow;
                               color: black;
                               font-family: "Corp Sans Semibold", sans-serif;
                               padding: 5px 0 5px 5px;
                               /* Abstand zu unterem Element */
                               margin-bottom: 20px;
                            }
                            section {
                               background-color: lightgreen;
                               color: white;
                               font-family: "Times New Roman", serif;
                               padding: 5px 0 5px 5px;
                               margin-bottom: 20px;
                            }
                            footer {
                               background-color: deepskyblue;
                               color: yellow;
                               font-family: "Lucida Calligraphy", sans-serif;
                               padding: 5px 0 5px 5px;
                            }
                      Zunächst benötige ich drei sogenannte Selektoren um alle benötigten nav-Elemente anzusprechen:

                      Code:
                            nav {
                            }
                            nav a {
                            }
                            nav a:hover,
                            nav a:focus {
                            }
                      und dann noch einige um unterschiedliche Angaben für die beiden Navigationsleisten zu erstellen:

                      Code:
                            .navigation {
                            }
                            .navigation a {
                            }
                            .navigation a:hover,
                            .navigation a:focus; {
                            }
                            .unternavi {
                            }
                            .unternavi a {
                            }
                            .unternavi a:hover,
                            .unternavi a:focus {
                            }
                      Wobei ich für die Grundnavigation aus dem zweiten Block nur zwei benötige:

                      Code:
                            .navigation {
                            }
                            .unternavi {
                            }
                      Die anderen kannst du dir für deine eigenen Angaben trotzdem ins CSS übernehmen.

                      Die weiteren Angaben kannst du nach und nach in dein CSS einbauen und schauen, wie sich die Navigationsleisten anpassen. Zum Schluß wird alles gut.

                      Ich führe jetzt nur Selektoren auf, in denen ich Änderungen vornehme. Die dazwischenliegenden lasse ich weg.

                      Zunächst vergebe ich Hintergrundfarben und entferne Abstände:

                      Code:
                            nav {
                               background-color: hsla(0, 0%, 15%, 1);
                               padding: 0;
                               margin: 0;
                            }
                            .navigation {
                               background-color: red;
                               margin-bottom: 16px;
                            }
                            .unternavi {
                               background-color: orange;
                               margin-bottom: 16px;
                            }
                      Die beiden Navigationsleisten sollten jetzt mit etwas Abstand untereinander stehen.

                      Stör dich nicht an den hsla-Farb-Angaben, dort kannst du natürlich dir geläufige Farbnamen oder Werte verwenden.

                      Wenn das so bleiben soll ist gut, ich selber finde es schöner ohne Abstand und kommentiere deshalb den unteren Abstand der oberen Navigation aus. Falls ich später doch einen Abstand wünsche habe ich auch ohne Kommentar einen Hinweis wo das gedacht ist. Wer noch nicht so viel Erfahrung hat sollte aber einen Kommentar hinschreiben.

                      Code:
                            .navigation {
                               background-color: red;
                               /*margin-bottom: 16px;*/
                            }
                      Es hat sich bewährt Schriftfarben (color) immer den dafür gedachten Elementen selbst zuzuweisen, nicht den übergeordneten Containern. Also p, h1 bis h6, li oder, wie in diesem Fall, dem a. Durch text-decoration und outline werden gleichzeitig die Rahmen und Unterstreichungen verhindert, die einige Browser einfügen.

                      Code:
                            nav a {
                               color: white;
                               text-decoration: none;
                               outline: none;
                               padding: 8px 10px;
                            }
                            nav a:hover,
                            nav a:focus {
                               background-color: hsla(0, 0%, 40%, 1);
                            }
                      Hinweis: Im Endeffekt sollten aber für hover und focus deutlich sichtbare Änderungen eingefügt werden, damit auch Menschen mit Farbsehschwächen diese Zustände eindeutig erkennen können.

                      Jetzt mache ich alle a-Elemente zu Flex-Items (nein, das tut nicht weh), indem ich die übergeordneten nav-Elemente zu Flex-Containern mache:

                      Code:
                            nav {
                               display: flex;
                               flex-wrap: wrap;
                            }
                      Die a-Elemente füllen jetzt in ihrer ganzen Höhe die nav-Elemente aus.

                      Jetzt verteile ich noch die a-Elemente der oberen Leiste ohne Berechnungen über die gesamte Breite:

                      Code:
                            .navigation {
                               justify-content: space-between;
                            }
                      Für die (bislang) nur drei a-Elemente der unteren Seite sieht so eine Verteilung aber nicht gut aus, deshalb lasse ich sie links stehen. Wenn du sie rechtsbündig haben möchtest (auch nur mal zum rumspielen) erreichst du das mittels

                      Code:
                            .unternavi {
                               justify-content: flex-end;
                            }
                      Damit ist die Grundnavigation für mich fertig und du hast ein solide Grundlage um die Navigation auszuprobieren und weiter zu entwickeln. Zum Schluß noch mal mein gesamtes CSS für die Navigation im Zusammenhang:

                      Code:
                            nav {
                               background-color: hsla(0, 0%, 15%, 1);
                               padding: 0;
                               margin: 0;
                               display: flex;
                               flex-wrap: wrap;
                            }
                            nav a {
                               color: white;
                               text-decoration: none;
                               outline: none;
                               padding: 8px 10px;
                            }
                            nav a:hover,
                            nav a:focus {
                               background-color: hsla(0, 0%, 40%, 1);
                            }
                            .navigation {
                               background-color: red;
                               /*margin-bottom: 16px;*/
                               justify-content: space-between;
                            }
                            .navigation a {
                            }
                            .navigation a:hover,
                            .navigation a:focus; {
                            }
                            .unternavi {
                               background-color: orange;
                               margin-bottom: 16px;
                               /*justify-content: flex-end;*/
                            }
                            .unternavi a {
                            }
                            .unternavi a:hover,
                            .unternavi a:focus {
                            }
                      Gruss

                      MrMurphy
                      Zuletzt geändert von MrMurphy; 22.11.2016, 23:36.

                      Kommentar


                      • #12
                        AW: Zwei horizontale Navigationsleisten

                        Hi,
                        Zitat von MrMurphy Beitrag anzeigen
                        Da hast du schon ganz richtig gelegen. Nur das ul-Element hat dort nichts verloren.
                        natürlich kann nav auch eine ul enthalten! In diesem Fall ist das aus semantischer Sicht sogar anzuraten, denn nur eine verschachtelte Liste vermittelt auch die Beziehung des Untermenüs zum Hauptmenüpunkt.

                        Dein Code würde - ohne CSS - so interpretiert:
                        Link1 Link2 Link3 Link4 Link5
                        Sub1 Sub2 Sub3

                        Als Listen jedoch so:
                        Link1
                        Link2
                        - Sub1
                        - Sub2
                        - Sub3
                        Link3
                        Link4
                        Link5

                        Auch kann eine verschachtelte Liste abwärtskompatibel besser formatiert werden. Die neue CSS-Eigenschaft justify-content z.B. würde von einem IE ignoriert, der älter als 3 Jahre ist.

                        Gruß
                        Ingo
                        Ingo Webdesign

                        Kommentar


                        • #13
                          AW: Zwei horizontale Navigationsleisten

                          natürlich kann nav auch eine ul enthalten!
                          Wüsste jetzt auch nicht, was dagegen spricht: https://developer.mozilla.org/de/doc...ML/Element/nav
                          Gibt sicher Seiten, wo das so nicht gezeigt wird, aber ich habe auf die Schnelle keine Seite gefunden, die das explizit wiederlegt.
                          PHProcks! » Tutorials

                          Kommentar


                          • #14
                            AW: Zwei horizontale Navigationsleisten

                            Hallo

                            Kopfschüttel. Euch ist schon klar das ich auf den Beitrag von pager für pager geantwortet habe?

                            Mein Hinweis bezog sich auf seinen Code

                            Code:
                            <nav class="navigation">
                               <!-- Startseite mit Hauptmenue ist eine eigene Seite
                               fuer die Untermenues gibt es mehrere Seiten-->
                               <ul>
                                  <a href="index.htm">Startseite</a>
                                  <a href="datei1.htm">Thema_1</a>
                                  <a href="datei2.htm">Thema_2</a>
                                  <a href="datei3.htm">Thema_3</a>
                                  <a href="datei4.htm">Thema_4</a>
                                  <a href="datei5.htm">Thema_5</a>
                                  <a href="datei6.htm">Thema_6</a>
                                  <a href="datei7.htm">Thema_7</a>
                                  <a href="datei8.htm">Thema_8</a>
                                  <a href="datei9.htm">Thema_9</a>
                               </ul>
                            </nav>
                            
                            <nav class="unternavi">
                               <!-- fuer jeden Untermenuepunkt eine extra Seite erstellen -->
                               <ul>
                                  <a href="datei1_a.htm">Unterthema_1</a>
                                  <a href="datei2_a.htm">Unterthema_2</a>
                                  <a href="datei3_a.htm">Unterthema_3</a>
                               </ul>
                            </nav>
                            Dort ist das ul-Element sachlich falsch. Auf ein ul-Element dürfen nur li-Elemente folgen, keine anderen wie das a-Element.

                            Entweder muss in dem nav-Element eine korrekte Liste stehen oder überhaupt keine.

                            Nach den Regeln von HTML5 sollen Inhalt und Gestaltung so weit wie möglich und sinnvoll getrennt werden.

                            Dazu gehört unter anderem keine Elemente in den HTML-Quelltext einzufügen, die nur der Gestaltung dienen.

                            Da in dieser Navigation keine Liste erforderlich ist sollte sie nach den HTML5-Regeln also weggelassen werden.

                            Es gibt auch keinen anderen sachlichen Grund hier eine Liste zu verwenden.

                            Was aber nicht heißt, dass eine korrekte Liste ein Fehler wäre. Jeder Webseitenersteller darf seine Webseite erstellen wie er mag. Also auch komplizierter als eigentlich notwendig.

                            Gruss

                            MrMurphy

                            Kommentar


                            • #15
                              ALL-INKL.COM - Webhosting Server Hosting Domain Provider
                              AW: Zwei horizontale Navigationsleisten

                              Hi,
                              Zitat von MrMurphy Beitrag anzeigen
                              Dazu gehört unter anderem keine Elemente in den HTML-Quelltext einzufügen, die nur der Gestaltung dienen.

                              Da in dieser Navigation keine Liste erforderlich ist sollte sie nach den HTML5-Regeln also weggelassen werden.
                              kann es sein, dass Du Semantik nicht richtig verstehst. Eine Liste dient doch ganz klar der Strukturierung.

                              Gruß
                              Ingo
                              Ingo Webdesign

                              Kommentar

                              homepage-forum.de - Hilfe für Webmaster! Statistiken

                              Einklappen

                              Themen: 56.540   Beiträge: 427.606   Mitglieder: 28.120   Aktive Mitglieder: 46
                              Willkommen an unser neuestes Mitglied, Balle.

                              Online-Benutzer

                              Einklappen

                              313 Benutzer sind jetzt online. Registrierte Benutzer: 4, Gäste: 309.

                              Mit 2.057 Benutzern waren am 14.07.2019 um 12:45 die meisten Benutzer gleichzeitig online.

                              Die neuesten Themen

                              Einklappen

                              Die neuesten Beiträge

                              Einklappen

                              Lädt...
                              X