CSS CSS Menü mittig darstellen

david22 · 18. Juli 2022

Hallo,

ich habe folgendes Menü im Internet gefunden:

CSS:

#menu {
    background: #000;
    color: #FFF;
    height:100px;
    text-align:right;
    padding-left: 18px;
margin: 0 auto;
font-weight:bold;
}

#menu ul, #menu li {
    margin: 0 auto;
    padding: 0;
    list-style: none
}
#menu ul {
    width: 100%;
}
#menu li {
    float: left;
    display: inline;
    position: relative;
}
#menu a {
    display: block;
    line-height: 45px;
    padding: 0 14px;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 16px;
}
#menu li a:hover {
    color: #BDBDBD;
}

Mein Problem: Ich möchte, dass das komplette Menü in der Mitte (waagerecht) dargestellt wird und auch die einzelnen Menüpunkte sollen senkrecht mittig dargestellt werden. Beides kriege ich nicht hin. Könnt Ihr mir helfen?

Danke schonmal.

Crizzo · 18. Juli 2022

Ohne HTML-Code wird das sehr schwierig. Und dein Problem vlt. mit Paint bezeichnen?

Magst du nicht mal ein simple HTML-Datei + CSS irgendwo hochladen, wo man sieht, was du da machst?

r00tk1d · 18. Juli 2022

Zeile 5: text-align: center; schon probiert?

Fujiyama · 18. Juli 2022

Was wurde bisher den schon alles probiert?

david22 · 18. Juli 2022

Crizzo schrieb:
Ohne HTML-Code wird das sehr schwierig. Und dein Problem vlt. mit Paint bezeichnen?

Magst du nicht mal ein simple HTML-Datei + CSS irgendwo hochladen, wo man sieht, was du da machst?

Der zugehörige HTML-Code ist hier:

HTML:

<html>
<head>
<title>Test</title>
<link href="stylesheet_menue.css" rel="stylesheet" type="text/css" />
</head>

<body>
      <nav id='menu'>
  <ul>
    <li><a href=''>Menüpunkt 1</a></li>
    <li><a href=''>Menüpunkt 2</a></li>
    <li><a href=''>Menüpunkt 3</a></li>
    </ul>
    </nav>
    </body>
    </html>

Ich habe mein Problem mal hier aufgemalt:

Bildschirmfoto 2022-07-18 um 21.16.10.png

Probiert habe ich schon einiges. margin, vertical-align, text-align, hat alles nicht funktioniert.

User007 · 18. Juli 2022

Hi...

david22 schrieb:
hat alles nicht funktioniert.

Wo an welcher Stelle/welchen Stellen hast Du das probiert?
Probier's mal mit im Style-Element #menu ul nach Zeile 17 noch eingefügter Anweisung text-align: center;.

r00tk1d · 18. Juli 2022

Das id-tag und die href müssen in doppelte Anführunszeichen.
Zeile 4 height:100%;
Zeile 5 text-align:center;
Das float:left; auskommetieren.

Crizzo · 18. Juli 2022

Okay, dann musst du das "block"-Element <ul> zentrieren.

Zum Beispiel via: Breite "width: 300px" und dann "margin: 0 px;"

Du kannst halt kein Element zentrieren, was 100% der Breite einnimmt, dann ist natürlich schon zentriert.

david22 · 18. Juli 2022

r00tk1d schrieb:
Das id-tag und die href müssen in doppelte Anführunszeichen.
Zeile 4 height:100%;
Zeile 5 text-align:center;
Das float:left; auskommetieren.

Ich habe die drei Änderungen gemacht. Ohne das float:left wird das Menü untereinander angezeigt, ich brauche es aber nebeneinander

EDIT: Wenn ich in Zeile 17 bei width: 100%; die Zahl auf ca. 70% setze, kommt das Menü in die Mitte. Ist das eine gute Lösung oder geht das auch anders?

floq0r · 18. Juli 2022

#menu ul
{
...
display: flex;
justify-content: center;
}

float und display inline für li kann dann raus

r00tk1d · 18. Juli 2022

Zeile 21 display: inline-block;

Dann sollte es gehen

david22 · 18. Juli 2022

Danke für die Hilfe.
Das klappt soweit schonmal. Ich will ins Menü noch ein Logo einfügen, und zwar in die Mitte, sodass die Menüpunkte links und rechts davon angezeigt werden.
Dafür habe ich mein HTML so angepasst:

HTML:

<html>
<head>
<title>Test</title>
<link href="stylesheet_menue.css" rel="stylesheet" type="text/css" />
</head>

<body>
      <nav id='menu'>
  <ul>
    <li><a href=''>Link 1</a></li>
    <li><a href=''>Link 2</a></li>
    <li><a href=''>Link 3</a></li>
    <li><img src="Link zum Logo" /></li>
    <li><a href=''>Link 4</a></li>
    <li><a href=''>Link 5</a></li>
    <li><a href=''>Link 6</a></li>
    </ul>
    </nav>
    </body>
    </html>

Die Ausgabe sieht so aus. Das müsste alles in die Mitte. Wie mache ich das am besten? Sollte ich das Logo so überhaupt einfügen, wie ich es gemacht habe?

Bildschirmfoto 2022-07-18 um 22.23.40.png

r00tk1d · 18. Juli 2022

Du hast schon wieder einfache Anführungszeichen in deinem html drin, das müssen doppelte sein.

Nichts für ungut aber schau mal bei W3school oder Youtube vorbei und such nach html tutorials dann lernst du auch was.

Was bezweckst du damit, willst du was lernen oder sollen wir dein Menü zusammenschrauben?

Crizzo · 18. Juli 2022

Schau mal bitte:
https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg
oder: https://www.w3schools.com/html/default.asp

User007 · 18. Juli 2022

Das kommt davon, weil Du statt eines begrenzenden div-Containers für die Navi das nav-Element benutzt und dafür kein "umschließender" Bereich (auch bspw. für die Höhe) definiert ist.

Außerdem laß mal das Image-Element umschließende List-Element weg.

Vllt. sollte da auch noch ein bißchen Recherche zu Navigationsstrukturen, bspw. hier im selfHTML-wiki, betrieben werden.

Crizzo · 18. Juli 2022

User007 schrieb:
Außerdem laß mal das Image-Element umschließende List-Element weg.

Hm?
Er darf auch nicht sowas machen:

Code:

 <ul>
    <li><a href="">Link 1</a></li>
    <img src="Link zum Logo" />
    <li><a href="">Link 4</a></li>
    </ul>

oder wie meinst du das?

netzgestaltung · 18. Juli 2022

ich hab jetzt nur die eingangsfrage schnell gelesen:

CSS:

#menu ul{
  display:flex;
  justify-content:center;
}
#menu li{
  display:block;
}

Suche

CSS CSS Menü mittig darstellen

david22

Cadet 2nd Year

Crizzo

Redakteur

r00tk1d

Gast

Fujiyama

Fleet Admiral

david22

Cadet 2nd Year

User007

Vice Admiral

r00tk1d

Gast

Anhänge

Crizzo

Redakteur

david22

Cadet 2nd Year

floq0r

Commander

r00tk1d

Gast

Anhänge

david22

Cadet 2nd Year

r00tk1d

Gast

Crizzo

Redakteur

User007

Vice Admiral

Crizzo

Redakteur

netzgestaltung

Captain

Ähnliche Themen