Die Navigation via CSS zentrieren

system · 1. Mai 2017 um 12:40

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

[HTML]

Home

Projekte

Referenzen

Kunden

Kontakt

Impressum

[/HTML]

[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;
}
[/PHP]

SpiceLab · 1. Mai 2017 um 12:52

Mit Flexbox: https://www.w3schools.com/code/tryit.asp?filename=FF76L0769T38 - „Run“-Button klicken

float:left für

ist damit dann obsolet.

Flexbox-Quellen (kleine Auswahl - Google kennt noch mehr, falls sie nicht ausreicht):
[ul]
[li] https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/ - [SIZE=3]Achtung: Jahrgang 2013 - Hinweise zum Browsersupport nicht mehr aktuell![/SIZE][/li][li] http://webkrauts.de/artikel/2012/css3-flexbox-abloesung-fuer-float-layouts -[SIZE=3] Achtung: Jahrgang 2012 - Hinweise zum Browsersupport nicht mehr aktuell![/SIZE][/li]
[li] https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox [/li]
[li] http://www.on-design.de/tutor/html5_css3/css3/flexbox.html [/li]
[li] https://www.w3schools.com/css/css3_flexbox.asp [/li][/ul]

system · 1. Mai 2017 um 13:00

So ganz haut das aber noch nicht hin. Oder ich stelle mich zu doof an…

SpiceLab · 1. Mai 2017 um 13:04

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

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.

system · 1. Mai 2017 um 13:07

Vielen Dank! Es hat funktioniert!

SpiceLab · 1. Mai 2017 um 13:08

Jip - hab’ ich auch nicht d’ran gezweifelt

SpiceLab · 1. Mai 2017 um 13:12

Der Gegenbeweis folgt auf dem Fuße: http://caniuse.com/#search=flexbox

djheke · 1. Mai 2017 um 13:14

<!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!

SpiceLab · 1. Mai 2017 um 13:16

djheke:

<!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!

Und das, obwohl in deiner Fassung noch nicht mal die Liste enthalten ist :D:p

djheke · 1. Mai 2017 um 13:17

Wird auch nicht gebraucht:)

SpiceLab · 1. Mai 2017 um 13:19

In dem Fall wohl nicht

Interessant wird’s erst mit Submenü-Ebenen; und so richtig, wenn sie tiefergreifende Verschachteltungen beinhalten

system · 1. Mai 2017 um 13:28

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?

SpiceLab · 1. Mai 2017 um 13:42

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.

MrMurphy · 1. Mai 2017 um 14:24

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?

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