CSS CSS Menü mittig darstellen

david22

Cadet 2nd Year
Registriert
Sep. 2013
Beiträge
24
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.
 
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?
 
Was wurde bisher den schon alles probiert?
 
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.
 
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;.​
 
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.
 

Anhänge

  • Screenshot_20220718-213742_Firefox Nightly.jpg
    Screenshot_20220718-213742_Firefox Nightly.jpg
    156,4 KB · Aufrufe: 168
Zuletzt bearbeitet von einem Moderator: (Ergänzung)
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.
 
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?
 
Zuletzt bearbeitet:
Zeile 21 display: inline-block;

Dann sollte es gehen
 

Anhänge

  • Screenshot_20220718-221021_Firefox Nightly.jpg
    Screenshot_20220718-221021_Firefox Nightly.jpg
    130,3 KB · Aufrufe: 183
Zuletzt bearbeitet von einem Moderator: (attachment)
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
 
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?
 
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.​
 
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?
 
ich hab jetzt nur die eingangsfrage schnell gelesen:

CSS:
#menu ul{
  display:flex;
  justify-content:center;
}
#menu li{
  display:block;
}
 
  • Gefällt mir
Reaktionen: kim88
Zurück
Oben