Carmen: Wie würde die Navigation umgesetzt?

Hallo,

ich bin auf der Suche nach einer schönen Navigation durch Zufall auf die Sport1 Seite gekommen. Mir gefallen die schrägen Striche nach jedem Navigationspunkt. Allerdings tauchen die im HTML nicht auf und mein Firebug sagt im CSS auch nichts.

Daher meine Frage, wie wird so eine Navigation umgesetzt?

  1. Liebe Carmen,

    und mein Firebug sagt im CSS auch nichts.

    meiner sagt .s1-super-lead-tabs a:before { transform: rotate(14deg); }

    Liebe Grüße,

    Felix Riesterer.

    --
    "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
    1. Hallo Felix,

      meiner sagt .s1-super-lead-tabs a:before { transform: rotate(14deg); }

      danke dir, ich habe dazu folgendes in der CSS gefunden:

        
      .s1-navigation>li>a:before {  
      	content: "";  
      	position: absolute;  
      	left: -6px;  
      	top: 13px;  
      	height: 14px;  
      	width: 1px;  
      	background: #d9d9d9;  
      	border: 0;  
      	-webkit-transform: rotate(14deg);  
      	-moz-transform: rotate(14deg);  
      	-ms-transform: rotate(14deg);  
      	-o-transform: rotate(14deg);  
      	transform: rotate(14deg);  
      }  
      
      

      Füge ich dieses bei mir ein, erscheinen wirklich die / zwischen den Wörtern. Aber die Frage ist woher kommt dieses Zeichen? Bei "content" steht nichts drin?

      Auf der Seite http://caniuse.com/#search=transform sehe ich, dass nur -webkit benötigt wird, sehe ich das richtig? Dann könnten in meinem Beispiel alle anderen Angaben raus?

      1. Om nah hoo pez nyeetz, Carmen!

        Füge ich dieses bei mir ein, erscheinen wirklich die / zwischen den Wörtern. Aber die Frage ist woher kommt dieses Zeichen? Bei "content" steht nichts drin?

        Das ist kein Zeichen, sondern einfach ein gedrehtes farbiges Viereck.

        Auf der Seite http://caniuse.com/#search=transform sehe ich, dass nur -webkit benötigt wird, sehe ich das richtig? Dann könnten in meinem Beispiel alle anderen Angaben raus?

        Ja.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Nabe und Nabel.

        1. Hallo Matthias,

          Das ist kein Zeichen, sondern einfach ein gedrehtes farbiges Viereck.

          Ist mir gar nicht aufgefallen :)

          Ja.

          Ok, dann schmeiße ich den ganzen anderen Krempel raus.

          Dann hätte ich noch eine HTML Frage, was bedeuten diese Angaben? Sind die wichtig?

            
          role="menubar"  
          role="navigation" background-adjustment=""  
          role="presentation"  
          role="menuitem"  
          
          
            
              <nav class="s1-main-navigation" role="navigation" background-adjustment="">  
                  <ul class="s1-navigation s1-navigation-level0" role="menubar">  
                      <li class="s1-nav-item s1-nav-item-live" role="presentation"><a href="#" role="menuitem" >Test Link</a></li>  
                   </ul>  
              </nav>  
          
          
          1. Om nah hoo pez nyeetz, Carmen!

            Dann hätte ich noch eine HTML Frage, was bedeuten diese Angaben? Sind die wichtig?

            role="menubar"
            role="navigation" background-adjustment=""
            role="presentation"
            role="menuitem"

              
            - <http://de.wikipedia.org/wiki/Accessible_Rich_Internet_Applications>  
            - <http://www.hessendscher.de/wai-aria/>  
              
            Matthias
            
            -- 
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Mini und Ministrant](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=M#mini--1).  
            ![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  
            
            
  2. Hi,

    ich bin auf der Suche nach einer schönen Navigation durch Zufall auf die Sport1 Seite gekommen. Mir gefallen die schrägen Striche nach jedem Navigationspunkt. Allerdings tauchen die im HTML nicht auf und mein Firebug sagt im CSS auch nichts.

    Stichworte: Pseudo-Elemente, generated content.
    Hier kommt lediglich noch ein transform:rotate hinzu, um diese etwas schräg zu drehen.

    MfG ChrisB

    --
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
  3. Hallo,

    ich habe versucht die Navigation von Sport1 nachzubauen. Hat soweit auch geklappt nur ich habe ein Problem mit dem ersten / der sollte nicht erscheinen.

    Mein Online Beispiel ist hier zu sehen: http://jsfiddle.net/5ynu644x/

      
    .s1-navigation>li:first-child {  
    	margin-left: 0;  
    }  
      
    .s1-navigation>li {  
    	display: inline-block;  
    	vertical-align: top;  
    	margin-left: 5px;  
    	margin-right: 5px;  
    }  
      
    .s1-navigation>li:first-child>a {  
    	padding-left: 2px;  
    }  
      
    .s1-navigation>li>a {  
    	padding: 0 7px;  
    	position: relative;  
    }  
      
    .s1-navigation a {  
    	display: block;  
    	color: #3d464c;  
    	font-size: 16px;  
    	font-weight: 600;  
    	line-height: 40px;  
    }  
      
    .s1-navigation>li>a:before {  
    	content: "";  
    	position: absolute;  
    	left: -6px;  
    	top: 13px;  
    	height: 14px;  
    	width: 1px;  
    	background: #d9d9d9;  
    	border: 0;  
    	-webkit-transform: rotate(14deg);  
    	transform: rotate(14deg);  
    }  
    
    
      
        <nav id="firstNav s1-main-navigation" role="navigation" background-adjustment="">  
           <ul class="s1-navigation s1-navigation-level0" role="menubar">  
                <li class="s1-nav-item s1-nav-item-live" role="presentation"><a href="#" role="menuitem" >Test</a></li>  
                <li class="s1-nav-item s1-nav-item-fussball" role="presentation"><a href="#" role="menuitem" >Test 2</a></li>  
             </ul>  
    
    

    Habt Ihr eine Idee, wie ich den _ersten_ / weg bekomme?

    1. Hallo,

      ich denken, ich habe die Lösung:

        
      .s1-navigation>li:first-child>a:before {  
      		display:none;  
      }  
      
      

      Was ich noch immer nicht verstehe ist, woher kommt dieser / Matthias meinte vor ein paar Tagen daher "content: "";" aber da steht doch nichts drin, also muss der / noch irgendwo anderes festgelegt werden?

      1. Om nah hoo pez nyeetz, Carmen!

        Was ich noch immer nicht verstehe ist, woher kommt dieser / Matthias meinte vor ein paar Tagen daher "content: "";" aber da steht doch nichts drin, also muss der / noch irgendwo anderes festgelegt werden?

        Der Strich ist einfach ein Rechteck, das 14px hoch und 1px breit ist. Dieses hat eine Hintergrundfarbe bekommen und ist gedreht worden.

        Stell es dir wie ein div-Element vor.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Wien und Wiener.

        1. Hallo Matthias,

          Der Strich ist einfach ein Rechteck, das 14px hoch und 1px breit ist. Dieses hat eine Hintergrundfarbe bekommen und ist gedreht worden.

          Stell es dir wie ein div-Element vor.

          jetzt verstehe ich das, danke für deine Erkläung. Vielleicht kansnt du mir ja nochmals kurz helfen. Ich möchte gerne beim letzten Wort kein Abstand nach rechts haben, ich dachte ich löse dieses so:

            
          .s1-navigation>li:last-child {  
          	margin-right: 0px;  
          }  
          
          

          wird aber irgendwie überhaupt nicht beachtet, was mache ich hier falsch?

  4. Guten Morgen,

    ich bin ehrlich gesagt etwas am verzweifeln. Mein HTML und CSS sieht wie folgt aus:

      
    .first {  
    	border-bottom: 1px solid #dad9d9;  
            margin-bottom: 31px;  
            margin-top: 75px;  
            padding-bottom: 16px;  
    }  
      
    .s1-navigation>li:first-child {  
    	margin-left: 0;  
    }  
      
    .s1-navigation>li {  
    	display: inline-block;  
    	vertical-align: top;  
    	margin-right: 13px;  
    }  
      
    .s1-navigation>li:first-child>a {  
    	padding-left: 0px;  
    }  
      
    .s1-navigation>li:first-child>a:before {  
    		display:none;  
    }  
      
    .s1-navigation>li>a {  
    	padding: 0 8.4px;  
    	position: relative;  
    }  
      
    .s1-navigation a {  
    	display: block;  
    	color: #3d464c;  
    	font-size: 15px;  
    	font-weight: 600;  
    	line-height: 20px;  
    }  
      
    .s1-navigation>li>a:before {  
    	content: "";  
    	position: absolute;  
    	left: -7px;  
    	top: 4px;  
    	height: 14px;  
    	width: 1px;  
    	background: #d9d9d9;  
    	border: 0;  
    	-webkit-transform: rotate(14deg);  
    	transform: rotate(14deg);  
    }  
      
    .last a {  
    	padding-right:0px !important;  
    }  
    
    
      
        <nav class="first" role="navigation" background-adjustment="">  
           <ul class="s1-navigation" role="menubar">  
                <li class="s1-nav-item" role="presentation"><a href="" role="menuitem" >Test 1</a></li>  
                <li class="s1-nav-item" role="presentation"><a href="" role="menuitem" >Test 2</a></li>  
                <li class="s1-nav-item" role="presentation"><a href="" role="menuitem" >Test 3</a></li>  
                <li class="s1-nav-item" role="presentation"><a href="" role="menuitem" >Test 4</a></li>  
                <li class="s1-nav-item" role="presentation"><a href="" role="menuitem" >Test 5</a></li>  
                <li class="s1-nav-item" role="presentation"><a href="" role="menuitem" >Test 6</a></li>  
                <li class="s1-nav-item" role="presentation"><a href="" role="menuitem" >Test 7</a></li>  
                <li class="s1-nav-item" role="presentation"><a href="" role="menuitem" >Test 8</a></li>  
                <li class="s1-nav-item" role="presentation"><a href="" role="menuitem" >Test 9</a></li>  
                <li class="s1-nav-item last" role="presentation"><a href="" role="menuitem" >Test 10</a></li>  
             </ul>  
    	</nav>  
    
    

    Im Google Chrome, passt die Navigation schön über die ganze Seitenbreite. Im Firefox und IE passt der letzte Navigationspunkt nicht mehr in die Reihe und legt sich darunter. Wenn ich hier:

      
    .s1-navigation>li {  
    	display: inline-block;  
    	vertical-align: top;  
    	margin-right: 13px;  
    }  
    
    

    den Wert von margin-right auf 10px ändere, dann passt es wieder. Bei 10 Navigationspunkten sind dieses im ganzen 30px. Wie kann es sein, dass der Google Chrome dieses anderes darstellt wie der Firefox / Ie (beide stellen es gleich da). Ich dachte immer px sind px egal mit welchem Browser ich mir dieses anschaue.

    Nun könnte ich hingehen und einfach den Wert auf 10px ändern, dann sieht es im Firefox und IE "gut" aus, allerdings habe ich dann im Google Chrome ein "großen" Abstand nach rechts. Gibt es eine Lösung, dass es in _allen_ Browsern passt?

    1. Hallo,

      .s1-navigation>li>a {

      padding: 0 8.4px;
      position: relative;
      }

      .s1-navigation a {
      display: block;
      color: #3d464c;
      font-size: 15px;
      font-weight: 600;
      line-height: 20px;
      }

        
      diese beiden Selektoren erfassen in deinem Markup genau dieselben Elemente, der erste ist nur präziser formuliert. Also könntest du die beiden Blöcke auch zusammenfassen.  
      Allerdings macht mich die auf Zehntel-Pixel genaue Angabe für padding irgendwie stutzig.  
        
      
      > Gibt es eine Lösung, dass es in \_allen\_ Browsern passt?  
        
      Eventuell geht Chrome mit den Zehntel-Pixeln anders um oder rundet anders. Ist die Angabe denn wirklich sinnvoll?  
        
      So long,  
       Martin  
      
      -- 
      Der Sinn einer Behörde besteht in ihrer Existenz.  
        (alte Beamtenweisheit)  
      Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
      
      1. Hallo,

        diese beiden Selektoren erfassen in deinem Markup genau dieselben Elemente, der erste ist nur präziser formuliert. Also könntest du die beiden Blöcke auch zusammenfassen.

        ok, ich habe beide nun in eines zusammengefast

          
        .s1-navigation>li>a {  
        	padding: 0 8px;  
        	position: relative;  
        	display: block;  
        	color: #3d464c;  
        	font-size: 15px;  
        	font-weight: 600;  
        	line-height: 20px;  
        }  
        
        

        Allerdings macht mich die auf Zehntel-Pixel genaue Angabe für padding irgendwie stutzig.

        Aus den padding: 0 8.4 habe ich wie man oben sehen kann padding: 0 8px gemacht.

        Eventuell geht Chrome mit den Zehntel-Pixeln anders um oder rundet anders. Ist die Angabe denn wirklich sinnvoll?

        Bringt leider keine Änderung. Beide Browser stellen es noch immer unterschiedlich dar.

        1. Om nah hoo pez nyeetz, Carmen!

          Eventuell geht Chrome mit den Zehntel-Pixeln anders um oder rundet anders. Ist die Angabe denn wirklich sinnvoll?
          Bringt leider keine Änderung. Beide Browser stellen es noch immer unterschiedlich dar.

          Zeigen, bitte.

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Span und Spange.

          1. Hallo Matthias,

            Zeigen, bitte.

            ich kann und darf hier meine Seite nicht verlinken, wenn Google diese findet, dann sieht meine Konkurrenz was ich plane und das darf auf keinen Fall passieren.

            Muss eine andere Möglichkeit findet, dass der Browser mit den Abstand selber berechnet und alle Punkt gleich aufteilt. Vielleicht mit JavaScript.

            1. Hallo,

              mir ist etwas aufgefallen und zwar hier

                
              .s1-navigation>li>a {  
              	padding: 0 8px;  
              	position: relative;  
              	display: block;  
              	color: #3d464c;  
              	font-size: 15px;  
              	font-weight: 600;  
              	line-height: 20px;  
              }  
              
              

              Wenn ich aus font-size: 15px; font-size: 1em; mache, dann sieht das ganze schon anderes aus, aber warum? 1em ist doch _mehr_ als 15px?

              1. Hallo,

                wenn ich hier

                  
                .s1-navigation>li>a {  
                	padding: 0 8px;  
                	position: relative;  
                	display: block;  
                	color: #3d464c;  
                	font-size: 15px;  
                	font-weight: 600;  
                	line-height: 20px;  
                }  
                
                

                das font-weight: 600; entferne, dann wird es in beiden Browsern richtig dargestellt. Kann es also sein, dass jeder Browser das "font-weight" anderes darstellt? Und wie bekomme ich dann die Schrift "dicker" sollte ich "<strong>" nehmen?

                1. Hallo

                  Zu deinem vorherigen Posting: 1em ist *bei dir* größer als 15px.Es kann aber auch kleiner sein, wenn sich ein Benutzer entscheidet, seine Standardschriftgröße im System und/oder Browser entsprechend klein einzustellen.

                  .s1-navigation>li>a {
                  padding: 0 8px;
                  position: relative;
                  display: block;
                  color: #3d464c;
                  font-size: 15px;
                  font-weight: 600;
                  line-height: 20px;
                  }

                  
                  >   
                  > das `font-weight: 600;`{:.language-css} entferne, dann wird es in beiden Browsern richtig dargestellt. Kann es also sein, dass jeder Browser das "font-weight" anderes darstellt?  
                    
                  Zumindest dann, wenn sie in Zahlen angegeben ist.  
                    
                  
                  > Und wie bekomme ich dann die Schrift "dicker" sollte ich "<strong>" nehmen?  
                    
                  Strong nimmst du, wenn ein Wort oder Satz oder was auch immer besonders stark betont/hervorgehoben werden soll (em bei Hervorhebung ohne „besonders stark“). Wann das zutrifft, ist Gefühlssache.  
                    
                  Wenn es nur um eine typografische Hervorhebung geht, reicht auch `font-weight: bold;`{:.language-css}. Das verstehen alle grafischen Browser, ohne dass es – soweit mir das bekannt ist – zu merklich unterschiedlichen Darstellungen käme.  
                    
                  Tschö, Auge  
                  
                  -- 
                  Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.  
                  Terry Pratchett, "Wachen! Wachen!"  
                    
                  ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:} 
                  
                  1. Hallo Auge,

                    Strong nimmst du, wenn ein Wort oder Satz oder was auch immer besonders stark betont/hervorgehoben werden soll (em bei Hervorhebung ohne „besonders stark“). Wann das zutrifft, ist Gefühlssache.

                    Wenn es nur um eine typografische Hervorhebung geht, reicht auch font-weight: bold;. Das verstehen alle grafischen Browser, ohne dass es – soweit mir das bekannt ist – zu merklich unterschiedlichen Darstellungen käme.

                    ich hab es nun so geändert. In beiden Browsern wird es nun "richtig" dargestellt. Sollte man das CSS noch weiter optimieren können, bin ich für jeden Tipp dankbar.

                      
                    .s1-navigation>li:first-child {  
                    	margin-left: 0;  
                    }  
                      
                    .s1-navigation>li:last-child {  
                    	margin-right: 0;  
                    }  
                      
                    .s1-navigation li {  
                    	display: inline-block;  
                    	vertical-align: top;  
                    	margin-right: 20px;  
                    }  
                      
                    .s1-navigation>li:first-child>a {  
                    	padding-left: 0px;  
                    }  
                      
                    .s1-navigation>li:first-child>a:before {  
                    		display:none;  
                    }  
                      
                    .s1-navigation a {  
                    	padding: 0 7px;  
                    	position: relative;  
                    	display: block;  
                    	color: #3d464c;  
                    	font-size: 1em;  
                    	font-weight: bold;  
                    	line-height: 20px;  
                    }  
                      
                    .s1-navigation>li>a:before {  
                    	content: "";  
                    	position: absolute;  
                    	left: -7px;  
                    	top: 4px;  
                    	height: 14px;  
                    	width: 1px;  
                    	background: #d9d9d9;  
                    	border: 0;  
                    	-webkit-transform: rotate(14deg);  
                    	transform: rotate(14deg);  
                    }  
                    
                    
                    1. Hallo

                      … Sollte man das CSS noch weiter optimieren können, bin ich für jeden Tipp dankbar.

                      .s1-navigation a {
                      /* … */
                      }

                      .s1-navigation>li>a:before {
                      /* … */
                      }

                        
                      Gibt es im Element der Klasse `.s1-navigation`{:.language-css} noch andere Elemente vom Typ `a`{:.language-css} außer denen, die Kind von `li`{:.language-css} sind? Wenn \*nicht\*, kannst du die Spezifität für `.s1-navigation>li>a:before`{:.language-css} senken, indem du stattdessen `.s1-navigation a:before`{:.language-css} nimmst.  
                        
                      Tschö, Auge  
                      
                      -- 
                      Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.  
                      Terry Pratchett, "Wachen! Wachen!"  
                        
                      ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:} 
                      
                      1. Om nah hoo pez nyeetz, Auge!

                        Gibt es im Element der Klasse .s1-navigation noch andere Elemente vom Typ a außer denen, die Kind von li sind? Wenn *nicht*, kannst du die Spezifität für .s1-navigation>li>a:before senken, indem du stattdessen .s1-navigation a:before nimmst.

                        Und wenn man die Pseudoklasse mit zwei Doppelpunkten kennzeichnet, meckert auch der Syntaxhighlighter nicht mehr ;-)

                        Zwar ist die alte Schreibweise wahrscheinlich aus Kompatibilitätsgründen bis in alle Ewigkeit gültig, aber man kann ja vorsichtig darauf hinweisen.

                        .s1-navigation a:before
                        .s1-navigation a::before

                        Matthias

                        --
                        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Boss und Bossa nova.

                        1. Hallo Matthias,

                          Zwar ist die alte Schreibweise wahrscheinlich aus Kompatibilitätsgründen bis in alle Ewigkeit gültig, aber man kann ja vorsichtig darauf hinweisen.

                          .s1-navigation a:before
                          .s1-navigation a::before

                          nur bei code lang=css].s1-navigation a::before[/code] die :: oder auch bei .s1-navigation>li:last-child?

                          1. Hallo

                            nur bei .s1-navigation a::before die :: oder auch bei .s1-navigation>li:last-child?

                            Die Notation :: gilt nur für Pseudoelemente, nicht für Pseudoklassen, worunter auch first-child fällt. Die Auflistung in unserem Wiki stellt das mMn gut dar.

                            Tschö, Auge

                            --
                            Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
                            Terry Pratchett, "Wachen! Wachen!"
                            ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
                2. Om nah hoo pez nyeetz, Carmen!

                  wenn ich hier
                  das font-weight: 600; entferne, dann wird es in beiden Browsern richtig dargestellt. Kann es also sein, dass jeder Browser das "font-weight" anderes darstellt? Und wie bekomme ich dann die Schrift "dicker" sollte ich "<strong>" nehmen?

                  http://wiki.selfhtml.org/wiki/Font-weight letztes „Beachten Sie“ Und nein, du solltest keine strong-Elemente als einziges Kind in die a-Elemente setzen.

                  Matthias

                  --
                  Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Mus und Mustang.