• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigation in die Mitte oder nach unten stellen problem

M

manager17

Mitglied
Guten Tag,

Kommen wir direkt zum Thema. Ich weiß nicht wie ich meine Navigation in die Mitte stelle oder etwas unten.

Auf dem Bild ist ein Beispiel. Das Schwarze und rote makierte sollte darstellen das ich die Navigation eigentlich da haben möchte. Hab's mit margin-top versucht doch es tut sich nichts.

HTML Code:
Code: 
<!DOCTYPE HTML>
<html>

<head>
<meta name="de">
<meta name="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Page</title>
<link rel="stylesheet" href="leport.css" type="text/css">
</head>
<body>
    <header>
  
    </header>
  
    <nav><center>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Forum</a></li>
    </nav></center>
</body>
</html>

CSS:
Code: 
nav {
display:block;
margin:0 auto;
height:50px;
width:100%;
background:#FFF;
}

nav a {
text-decoration:none;
color:#2F2C2C;
text-shadow:0.1px 0.1px 0.1px #2F2C2C;
font-family:Helvetica;
font-weight:50;
}

nav li {
list-style:none;
display:inline;
}

nav a,li {
margin:10px;
}

nav a:hover {
background:#F4F1F1;
}
 

Anhänge

  • nav.PNG
    nav.PNG
    10,9 KB · Aufrufe: 13
Zuerst nimmste das falsch verschachtelte "center" raus. Dann entfernste width:100% und margin: 0 auto.
Und dann funktioniert auch margin-top. Zum zentrieren text-align: center.
 
Klappt i-wie immernoch nicht mit margin-top. Nur bei " nav " aber dann verschiebst sich auch alles bzw. die ganze nav möchte aber es nur weiter unten stellen
 
manager17 schrieb:
Klappt i-wie immernoch nicht mit margin-top. Nur bei " nav " aber dann verschiebst sich auch alles bzw. die ganze nav möchte aber es nur weiter unten stellen
Zum Vergrößern anklicken....

Hallo.

Deine Listenelemente gehören eigentlich in eine Liste.

HTML: 
<ul>  
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Forum</a></li>
</ul>

Diese kannst du dann innerhalb des <nav> Elements verschieben ohne das dieses sich mitverschiebt.

Gruss
Elroy
 
Das kann doch nicht so schwer sein.

HTML: 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  <!--
 nav {
display:block;
height:50px;
background:#FFF;
}

ul a {
text-decoration:none;
color:#2F2C2C;
text-shadow:0.1px 0.1px 0.1px #2F2C2C;
font-family:Helvetica;
font-weight:50;
}

ul li {
list-style:none;
display:inline;
}

ul a,li {
margin:10px;
}

ul a:hover {
background:#F4F1F1;
}

ul {
  width: 500px;
  margin:  20px auto 0 auto;
}

  -->
  </style>
</head>

<body>
  <nav>
    <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Forum</a></li>
    </ul>
  </nav>
</body>

</html>

Ich hoffe den Rest schaffst du alleine.

Gruss
Elroy
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben