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

[ERLEDIGT] Die Navigation via CSS zentrieren

Status
Für weitere Antworten geschlossen.
H

htmlberliner

Guest
Guten Tag, wie kann ich die Navigation zentrieren, ohne feste Werte, damit sie responsive ist?

HTML: 
<nav id="menu">
        <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">Projekte</a></li>
            <li><a href="#">Referenzen</a></li>
            <li><a href="#">Kunden</a></li>
            <li><a href="#">Kontakt</a></li>
            <li><a href="#">Impressum</a></li>
        </ul>
    </nav>

PHP: 
body {
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
}

nav#menu {
    position: absolute;
    width: 100px;
}

nav#menu ul {
    margin-left: auto;
    margin-right: auto;
}

nav#menu ul li {
    float: left;
    font-weight: 300;
    font-size: 18px;
    text-transform: uppercase;
    list-style: none;
    margin: 10px 0px 0px 20px;
}

nav#menu ul li a {
    text-decoration: none;
    color: white;
}

nav#menu ul li a.active {
    font-weight: 400;
}
 
Werbung:
htmlberliner schrieb:
wie kann ich die Navigation zentrieren, ohne feste Werte, damit sie responsive ist?
Zum Vergrößern anklicken....
Mit Flexbox: https://www.w3schools.com/code/tryit.asp?filename=FF76L0769T38 - "Run"-Button klicken

float:left für <li> ist damit dann obsolet.

Flexbox-Quellen (kleine Auswahl - Google kennt noch mehr, falls sie nicht ausreicht):
 
So ganz haut das aber noch nicht hin. Oder ich stelle mich zu doof an...
 

Anhänge

  • Bildschirmfoto 2017-05-01 um 14.59.49.png
    Bildschirmfoto 2017-05-01 um 14.59.49.png
    18,9 KB · Aufrufe: 4
Werbung:
htmlberliner schrieb:
So ganz haut das aber noch nicht hin. Oder ich stelle mich zu doof an...
Zum Vergrößern anklicken....
Zumindest, was den Screenshot angeht, ohne deinen aktualisierten Code zu zeigen.

Doch in diesem Fall hast du ausnahmsweise Glück gehabt, denn wenn ich das CSS von oben durchschaue, fehlt noch das
CSS: 
ul {margin:0;padding:0;}
damit die Liste ein Stück nach links rückt. Da sind nämlich noch ihre voreingestellten Abstände im Weg.
 
Werbung:
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navigation</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#menu {
 display:flex;
 justify-content:center;
}

#menu a {
 display:block;
 padding:10px;
 text-decoration:none;
 color:#000;
}

#menu .active {
 font-weight:bold;
}

@media screen and (max-width: 680px) {
   #menu {
    flex-direction:column;
    flex-basisi:100%;
   }

   #menu a {
    width:100%;
    text-align:center;
   }
}
</style>
</head>
<body>
<nav id="menu">
<a href="#" class="active">Home</a>
<a href="#">Projekte</a>
<a href="#">Referenzen</a>
<a href="#">Kunden</a>
<a href="#">Kontakt</a>
<a href="#">Impressum</a>
</nav>


</body>
</html>
Bin ich langsam!
 
djheke schrieb:
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navigation</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#menu {
 display:flex;
 justify-content:center;
}

#menu a {
 display:block;
 padding:10px;
 text-decoration:none;
 color:#000;
}

#menu .active {
 font-weight:bold;
}

@media screen and (max-width: 680px) {
   #menu {
    flex-direction:column;
    flex-basisi:100%;
   }

   #menu a {
    width:100%;
    text-align:center;
   }
}
</style>
</head>
<body>
<nav id="menu">
<a href="#" class="active">Home</a>
<a href="#">Projekte</a>
<a href="#">Referenzen</a>
<a href="#">Kunden</a>
<a href="#">Kontakt</a>
<a href="#">Impressum</a>
</nav>


</body>
</html>
Bin ich langsam!
Zum Vergrößern anklicken....
Und das, obwohl in deiner Fassung noch nicht mal die Liste enthalten ist :D:p
 
Werbung:
Weil du gerade Submenüs erwähnt hast:
Der aktuelle Trend ist doch solche Menüs zu vermeiden oder? Der Nutzer soll doch eine schnelle Übersicht haben und da sind ja Submenüs meist contraproduktiv oder?
 
Werbung:
htmlberliner schrieb:
Weil du gerade Submenüs erwähnt hast:
Der aktuelle Trend ist doch solche Menüs zu vermeiden oder? Der Nutzer soll doch eine schnelle Übersicht haben und da sind ja Submenüs meist contraproduktiv oder?
Zum Vergrößern anklicken....
Kann man so pauschal nicht sagen, dass (zunächst versteckte) Submenüs dem Besucher um eine schnelle Übersicht berauben würden.

Maßstab ist am Ende der Leistungsumfang des Webangebots.

Beispiel: Bekleidungshersteller wie Esprit, s'Oliver & Co, die Herren, Damen und Kinder vom Scheitel bis zur Sohle einkleiden, und eine entsprechend breite Produktpalette unter's Volk bringen wollen, die "katalogisiert" gehört. Ansonsten verliert dort der Kunde den

Der Kunde verliert hier eher den Überblick im Artikeldschungel, wenn nicht auf irgendeine (technische) Weise für eine "gefilterte" Struktur gesorgt wird.
 
Hallo

Der aktuelle Trend ist doch solche Menüs zu vermeiden oder? Der Nutzer soll doch eine schnelle Übersicht haben und da sind ja Submenüs meist contraproduktiv oder?
Zum Vergrößern anklicken....

Richtig. Und nicht nur der aktuelle Trend. Alle versteckten Texte (und damit auch teilweise versteckte Menüs) sind Barrieren, die vermieden werden sollten.

Gruss

MrMurphy
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben