Simon Teidt: Anfänger braucht Hilfe

problematische Seite

Hallo,

ich habe mit dem Website erstellen seit ca. einer Woche angefangen nun habe ich mal eine Frage. Ich habe mir das ganze bis jetzt durch Youtube und dieser Seite angeeignet. Doch nun habe ich ein Problem. Auf meiner Seite habe ich eine Navigationleiste:

<nav>
	<ul>
		<li><a href="index.html">Home</a> </li>
		<li><a href="über.html">Über</a> </li>
		<li><a href="kontakt.html"> Kontakt </a>  </li>
	</ul>
</nav> 

An der Seite habe ich noch eine:

<nav id="alleligen">
	<ul>
		<li><a href="liga1.html">Liga 1</a> </li>
		<li><a href="liga2.html">Liga 2</a> </li>
		<li><a href="liga3.html">Liga 3 </a>  </li>
	</ul>
</nav>

Diese Leiste möchte ich getrennt von einander gestalten. Habe das auch probiert mit ner Id zu trennen doch das hat nicht funktioniert. Wenn ich in der CSS Datei bei der nav was verändert hat, hat sich auch was bei der nav auf der linken Seite geändert und nicht nur bei Home über und Kontakt.

CSS:

nav{
	text-align: center;
	font-size: 19px;
}

nav ul {
	
	list-style-type: none;	
}

nav li {
	display: inline;
	margin-right: 40px;	
}

#alleligen {
	text-align: left;
	font-size: 20px;
}

Bitte um Rückmeldung.

  1. problematische Seite

    Hallo Simon Teidt,

    Oberhalb des Formulars, in dem du deine Frage eingibst, gibt es einige beschriftete Buttons. Schau doch mal, ob du es hinbekommst, deinen Beitrag leserlich zu formatieren.

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. problematische Seite

      Wurde formatiert, von wem auch immer :D

      1. problematische Seite

        Hello,

        Wurde formatiert, von wem auch immer :D

        von unserer magic number one?

        scnr

        Liebe Grüße
        Tom S.

        --

        Die Kravatte ist das Kopftuch des Westens
      2. problematische Seite

        Hallo Simon Teidt,

        Wurde formatiert, von wem auch immer :D

        Von mir. Auch das kannst du herausfinden. Im Kopf des Beitrages gibt es einen Link (Versionen).

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
      3. problematische Seite

        Hallo Simon,

        Wurde formatiert, von wem auch immer :D

        Das kannst du durch einen Klick auf das Versionen in der Kopfzeile deines Beitrags feststellen.

        edit: Ups, zu langsam :-)

        Gruß
        Julius

  2. problematische Seite

    Hallo Simon Teidt,

    <nav>
    	<ul>
    		<li><a href="index.html">Home</a> </li>
    		<li><a href="über.html">Über</a> </li>
    		<li><a href="kontakt.html"> Kontakt </a>  </li>
    	</ul>
    </nav> 
    
    <nav id="alleligen">
    	<ul>
    		<li><a href="liga1.html">Liga 1</a> </li>
    		<li><a href="liga2.html">Liga 2</a> </li>
    		<li><a href="liga3.html">Liga 3 </a>  </li>
    	</ul>
    </nav>
    

    Nicht jede Navigation gehört auch in ein nav-Element.

    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. (HTML 4.3)

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. problematische Seite

      Das bedeutet ich soll das ganze einfach in ein <div> Element schreiben? Wie ist es dann möglich verschiedene <div> auf meiner Seite unterschiedlich zu formatieren? Habe da das Prinzip noch nicht ganz verstanden.

      1. problematische Seite

        Hallo Simon Teidt,

        Das bedeutet ich soll das ganze einfach in ein <div> Element schreiben? Wie ist es dann möglich verschiedene <div> auf meiner Seite unterschiedlich zu formatieren? Habe da das Prinzip noch nicht ganz verstanden.

        Du hast doch in deinem ersten Thread ganz ähnliche Fragen gestellt. Hast du denn den Ratschlag, das Tutorial durchzuarbeiten, umgesetzt?

        Btw: „Seit“ und „angefangen“ passen nicht zusammen. Ersteres bezeichnet eine Zeitspanne, letzteres einen Zeitpunkt. „Anfänger braucht Hilfe“ ist kein aussagekräftiger Betreff. Wenn man am Betreff schon sehen kann, worum geht, wirst du möglicherweise bessere und schnellere Hilfe bekommen.

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        1. problematische Seite

          Ja ich habe das alles durch gearbeitet, doch alles was da steht ist für mich als Anfänger nicht direkt zu verstehen, deswegen frage ich. Sonst hätte ich auch das was ich bis jetzt erstellt habe nicht so hinbekommen denke ich.

        2. problematische Seite

          Hi,

          Btw: „Seit“ und „angefangen“ passen nicht zusammen. Ersteres bezeichnet eine Zeitspanne, letzteres einen Zeitpunkt.

          Bei manchem dauert halt selbst das Anfangen so lange, daß es eine Zeitspanne ist … ;-)

          cu,
          Andreas a/k/a MudGuard

          1. problematische Seite

            Hallo,

            Bei manchem dauert halt selbst das Anfangen so lange, daß es eine Zeitspanne ist … ;-)

            im Sinne von „Ich bin gerade am Anfangen dran.“ 😀

            Gruß
            Jürgen

            1. problematische Seite

              Hi,

              Bei manchem dauert halt selbst das Anfangen so lange, daß es eine Zeitspanne ist … ;-)

              im Sinne von „Ich bin gerade am Anfangen dran.“ 😀

              Heißt das nicht "Ich bin gerade an am fangen." ;-)

              cu,
              Andreas a/k/a MudGuard

      2. problematische Seite

        Hallo Simon,

        dafür gibt es Selektoren, unter anderem für Klassen für Gruppen von Elementen (<div class="klasse"></div>) oder für IDs für einzelne Elemente (<div id="id"></div>) – bisher hast du anscheinend nur mit Element-Selektoren gearbeitet.

        .klasse {
          color:red;
        }
        
        #id {
          color:green;
        }
        

        Aber es ist noch mehr möglich – arbeite die Artikel zu Selektoren im Wiki durch und kloppe nicht gleich alles mit Klassen und IDs voll :-)

        Gruß
        Julius

        1. problematische Seite

          Danke dafür, werde mir das durchlesen. Das bringt mich bestimmt weiter :)

    2. problematische Seite

      Aloha ;)

      Nicht jede Navigation gehört auch in ein nav-Element.

      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. ([HTML 4.3]

      „Not all need to be in“ ist nicht exakt das gleiche wie „nicht jede gehört in“[1]. Außerdem gehört sehr wohl jede Navigation in ein nav-Element - es muss nur nicht jede Gruppe von Links mit einem nav-Element umschlossen werden, weil nicht jede Gruppe von Links eine Navigation ist - das ist in meinem Verständnis der springende Punkt hinter diesem Zitat.

      Im vorliegenden Fall halte ich es für semantisch richtig, <nav> zu verwenden. Beide Linklisten erfüllen für mich Charakteristika einer Navigation und sind damit mit <nav> korrekt ausgezeichnet.

      Grüße,

      RIDER

      --
      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
      # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[

      1. „nicht alle müssen in sein“ halte ich für eine Übersetzung, die die Intention des Originals besser trifft. Wenn etwas nicht in etwas anderes gehört ist das mehr „must not be in“ als „need not be in“. Quasi „X gehört nicht in Y“ vs. „X muss nicht immer in Y vorkommen“ ↩︎

  3. problematische Seite

    Also merkwürdig ist das schon, laut Spezifitätsregeln schlägt ein ID-Selektor einen Typselektor, daher sollte dein #alleligen Style Vorrang vor dem nav Style haben.

    Es sei denn, du führst uns in die Irre und hast an nav ul bzw. nav li was geändert - was DORT passiert, schlägt sich natürlich in beiden Navigationen nieder. Ich habe den Navigationsteil deiner Seite mal in einem Fiddle nachgebaut; Änderungen am text-align oder font-size des nav Style wirken sich auf die linke Navigation nicht aus, auch wenn sie mit nav id="alleligen" gebaut ist. Weil der #alleligen Style Vorrang hat. Wenn du die ul oder li Elemente der aside-Navigation extra stylen willst, musst Du einen Selektor wie #alleligen ul schreiben.

    Rolf

    1. problematische Seite

      Wenn ich in der CSS-Datei bei der nav was verändert hat, hat sich auch was bei der nav auf der linken Seite geändert

      Änderungen am text-align oder font-size des nav-Style wirken sich auf die linke Navigation nicht aus, auch wenn sie mit nav id="alleligen" gebaut ist.

      Sein "was" bezieht sich vermutlich nicht alleine auf text-align und font-size aus seinem Beispiel, jedenfalls verstehe ich das so.

      Insofern wird es so formuliert vielleicht klarer: Änderung an nav wirken sich selbstverständlich auch auf <nav id="alleliegen"> aus, das ist schließlich auch ein nav. #alleligen kommt lediglich zu dem hinzu, was in nav gegeben ist (und überschreibt doppeltes gegebenenfalls).

      Und dafür gilt natürlich das Gleiche:

      hast an nav ul bzw. nav li was geändert - was DORT passiert, schlägt sich natürlich in beiden Navigationen nieder.

      Falls das das Problem sein sollte, helfen zwei getrennte id-Angaben, so dass nav wirklich nur die Gemeinsamkeiten beinhaltet.