Ankündigung

Einklappen
Keine Ankündigung bisher.

Navigation wird nicht mittig gesetzt?

Einklappen

Neue Werbung 2019

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

  • Navigation wird nicht mittig gesetzt?

    Guten Abend liebe Community. Ich habe gerade ein kleines Problem mit CSS & HTML. Ich wollte dass meine Navigation sich in die Mitte setzt und habe es so ausprobiert:

    PHP-Code:
    body {
        
    font-familyUbuntusans-serif;
        
    background-color#fff;
    }

    header {
        
    top0;
        
    left0;
        
    width100%;
        
    height120px;
        
    positionfixed;
        
    background-color#D23333;
        
    margin-left0px auto;
        
    margin-right0px auto;
    }

    navli {
        list-
    style-typenone;
        
    displayinline;
    }

    navaa:hover {
        
    text-decorationnone;
        
    color#fff;
        
    text-transformuppercase;

    HTML Code:
    PHP-Code:
    <body>
    <
    header>
        <
    nav>
            <
    ul>
                <
    li><a href="#">Home</a></li>
                <
    li><a href="#">About</a></li>
                <
    li><a href="#">Work</a></li>
                <
    li><a href="#">Services</a></li>
                <
    li><a href="#">Contact</a></li>
            </
    ul>
        </
    nav>
    </
    header>
    </
    body
    Wieso wird der ganze Inhalt nicht in die Mitte gesetzt?


  • #2
    Code:
    margin-left: 0px auto; 
        margin-right: 0px auto;
    ??
    Code:
    margin-left: auto;
    margin-right: auto;
    Zitat von nikosch
    Macht doch alle was Ihr wollt mit Eurem Billigscheiß. Von mir aus sollen alle Eure Server abrauchen.

    Kommentar


    • #3
      Wenn du den <Header> mittig setzen willst.
      Warum dannheader { left: 0;

      Ansonsten zentriere ich immer mit margin: 0px auto; width: 500px; height:200px;
      Oder bei Position, left:50%; und margin-left: - 250px; immer die Hälfte der Breite! Also bei 500px sind es 250px

      Alternativ gibt es noch die unschöne Lösung das ganze zwischen <center></center> zusetzen.
      Darf man fragen warum du <header> benutzt und keine div container?

      Kommentar


      • #4
        Zitat von mebuca Beitrag anzeigen
        Darf man fragen warum du <header> benutzt und keine div container?
        Ist das als grundsätzliche Frage gemeint (warum man das <header>-Tag statt eines <div>-Tags verwendet) oder auf seinen konkreten Code bezogen?

        Ich nehme mal aufgrund deines offensichtlich fortgeschrittenen Kenntnisstandes letzteres an: Es ist schon okay, die Navigation in das Header-Tag einzubetten. Zusätzlich sollte aber ein h1-h6-Element (oder hgroup falls mehr als eines) enthalten sein.

        Kommentar


        • #5
          Zitat von monolith Beitrag anzeigen
          Ist das als grundsätzliche Frage gemeint (warum man das <header>-Tag statt eines <div>-Tags verwendet) oder auf seinen konkreten Code bezogen?

          Ich nehme mal aufgrund deines offensichtlich fortgeschrittenen Kenntnisstandes letzteres an: Es ist schon okay, die Navigation in das Header-Tag einzubetten. Zusätzlich sollte aber ein h1-h6-Element (oder hgroup falls mehr als eines) enthalten sein.
          Mich hätte es allgemein mal intressiert, warum er lieber <header> anstatt <div id="header"> benutzt. Ob es nur daran liegt das ein Header-Tag aussagekräftiger ist oder ob es für ihn noch andere Gründe gibt.
          Für mich gabe es weder in HTML 4.01 noch in 5 einen Grund darauf umzusteigen und da mir bisher auch noch nicht sehr viele Personen über den weggelaufen sind die jetzt mit Header und co. Tags arbeiten, habe ich gedacht ich frag ihn einfach mal

          Kommentar


          • #6
            Ist z.B. für Suchmaschinen, o.Ä. besser zu crawlen. Somit können bessere Resultate deiner Seite erzeugt werden, ...

            Kommentar


            • #7
              @mebuca: "Hard facts" kann ich aus dem Stand dazu auch keine nennen. Einen direkten, klar erkennbaren Vorteil kenne ich derzeit auch nicht.

              Aber du bringst eben eine semantische Bedeutung unter, die maschinell (also z. B. von der Google-Suche) erfasst und ausgewertet werden kann. Sowas ist meines Wissens nach konkret für Screenreader von großer Bedeutung.

              Oder kennst du bestimmt die Funktion einiger Browser, dass nur der Haupttext einer Seite angezeigt wird, z. B. Safari kann das nativ. Dazu muss der Browser aber natürlich diesen identifizieren und das geht zuverlässiger wenn er die semantische Bedeutung von Elementen einer Seite versteht. Dazu gibt es bei HTML5 eben viele neue Tags wie header, nav, footer, aside, article, section, hgroup usw. In dem Beispiel könnte Safari also möglicherweise davon ausgehen, dass der Haupttext in einem article-Tag steht. Das reicht zwar nicht aber ist schon mal besser als ein nichtssagendes div.

              Natürlich gibt es auch noch Erweiterungen/Alternativen dazu. OpenGraph-Tags, Aria, Microformats, ...

              Kommentar

              Lädt...
              X