Platz zwischen Nav

Wie mache ich einen netten Header/Nav Abschnitt?Platz zwischen Nav

Dies ist mein Code:

body { 
 
    margin: 0px; 
 
} 
 

 
.container { 
 
    width: auto; 
 
    height: 1920px; 
 
    background-color: #514367; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    height: 70px; 
 
    background-color: #647551; 
 
    top: 0px; 
 
} 
 

 
nav ul { 
 
    margin: 0px; 
 
    padding: 24px 0px 5px 30px; 
 
} 
 

 
nav li { 
 
    margin-right: 40px; 
 
    list-style: none; 
 
    text-decoration: none; 
 
    display: inline; 
 
} 
 

 
nav li a { 
 
    text-decoration: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <link href="css/Main.css" type="text/css" rel="stylesheet" /> 
 
     <meta charset="utf-8"> 
 
     <title>Talkody - Design Services</title> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
     <!-- Menu start --> 
 
     <header> 
 
      <nav> 
 
       <ul> 
 
        <li><a href="index.html">Home</a></li> 
 
        <li><a href="about/index.html">About</a></li> 
 
        <li><a href="portfolio/index.html">Portfolio</a></li> 
 
        <li><a href="contact/index.html">Contact</a></li> 
 
       </ul> 
 
      </nav> 
 
     </header> 
 
     <!-- Menu end --> 
 
     </div> 
 
    </body> 
 
</html>

Also, was ich will. Ich möchte den Text etwas mehr in der Mitte haben. Warte !, lass es uns anders erzählen. Du siehst die "StackExchange" Navigationsleiste oben? Nun, das will ich. Ich möchte den Text auf der rechten Seite (aber in der Mitte zentriert) und dann ein Logo auf der linken Seite (aber auch in der Mitte zentriert).

Ich versuche, meine Anerkennung in HTML5 zu verbessern. Also begann ich mit der Nav- und Header-Funktion zu arbeiten.

Quelle

2017-02-11 Gilles

Bootstrap NavBars tun genau dasselbe, und sie sind für die mobile Ansicht auch ansprechbar. Sie können sie unter http://v4-alpha.getbootstrap.com/components/navbar/ überprüfen. –

Es ist hilfreich, aber ich möchte die HTML5-Welt erkunden. Ich mag es nicht, Dinge zu kopieren usw. Gibt es einen anderen Weg als Bootstrap? – Gilles

Eine großartige HTML5/CSS3-Positionierungslösung ist CSS Flexbox.

Um damit zu beginnen, fügen Sie display:flex zu Ihrem <ul> hinzu. Dann können die internen Elemente auf verschiedene Arten mit Eigenschaften entweder auf dem Flex-Container (<ul>) oder auf den Flex-Childs (<li>) positioniert werden.

Um Ihre <ul> und ihre Kinder von zu weit zu erweitern (wie das Stack-Überlaufnav tut) habe ich es eine festgelegte Breite von 80% gegeben, dann zentriert es innerhalb der <nav> mit flexbox.

Flexbox ist ein sehr vielseitiges Werkzeug zum Positionieren, Sie können ein wenig mehr darüber lesen here.

body { 
 
    margin: 0px; 
 
} 
 

 
.container { 
 
    width: auto; 
 
    height: 1920px; 
 
    background-color: #514367; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    height: 70px; 
 
    background-color: #647551; 
 
    top: 0px; 
 
} 
 

 
nav { 
 
    display:flex; 
 
    justify-content:center; 
 
    } 
 

 
ul { 
 
    margin:0 auto; 
 
    width:80%; 
 
    display:flex; 
 
    justify-content:space-between; 
 
    } 
 

 
#logo { 
 
    margin-right:auto; 
 
    } 
 
    
 
nav ul { 
 
    margin: 0px; 
 
    padding: 24px 0px 5px 30px; 
 
} 
 

 
nav li { 
 
    margin-right: 40px; 
 
    list-style: none; 
 
    text-decoration: none; 
 
    display: inline; 
 
} 
 

 
nav li a { 
 
    text-decoration: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <link href="css/Main.css" type="text/css" rel="stylesheet" /> 
 
     <meta charset="utf-8"> 
 
     <title>Talkody - Design Services</title> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
     <!-- Menu start --> 
 
     <header> 
 
      <nav> 
 
       <ul> 
 
        <li id="logo"><a href="index.html">Home</a></li> 
 
        <li><a href="about/index.html">About</a></li> 
 
        <li><a href="portfolio/index.html">Portfolio</a></li> 
 
        <li><a href="contact/index.html">Contact</a></li> 
 
       </ul> 
 
      </nav> 
 
     </header> 
 
     <!-- Menu end --> 
 
     </div> 
 
    </body> 
 
</html>

Quelle

2017-02-11 10:46:36

Vielen Dank! – Gilles

Platz zwischen Nav

Antwort

Verwandte Themen