Frage von sommerli, 27

CSS: Hallo, wie bekomme ich ein horizontales Dropdownmenü mittig und gleichmäsig angeordnet?

Hallo und zwar habe ich mir eine Seite gebastet und dabei ein horizontales Dropdown Menü erstellt. Es ist zwar mittig, aber immernoch ein bisschen verschoben, da ich die werte selber eingegeben hab. Wie bekomm ich das Menü genau in die Mitte?

code (css):

#menu {
width: 1000px;
margin: -30px auto;
}
#menu h3 {
font-size: 16px;
color: #fff;
padding: 10px;
margin: 0;
background: #000;
line-height: 20px;
}
#menu ul {
position: absolute;
margin: 0 auto;
list-style: none;
z-index:1000000;
}
#menu ul li {
float: left;
margin: 0 0 0 170px;
font-size: 15px;
line-height: 50px;
}

hmtl:

<div id="menu">
                    <h1><ul id="nav">
                        <li><a href="start.html">START</a></li>
                        <li id="current"><a href="basiselemente.html">BASISELEMENTE</a>
                            <ul>
                                <h3></h3>
                                <a href="logo.html"><li>LOGO</li></a>
                                <a href="flasche.html"><li>FLASCHE</li></a>
                                <a href="flagge.html"><li>FLAGGE</li></a>
                                <a href="bilder.html"><li>BILDER</li></a>
                                <a href="slogan.html"><li>SLOGAN</li></a>
                                <a href="typografie.html"><li>TYPOGRAFIE</li></a>
                                <a href="farben.html"><li>FARBEN</li></a>
                                <a href="sounds.html"><li>SOUNDS</li></a>
                                <a href="gestaltungsprinzipien.html"><li>GESTALTUNGSPRINZIPIEN</li></a>
                            </ul>
                        </li>
                        <li><a href="anwendung.html">ANWENDUNG</a>
                            <ul>
                                <h3></h3>
                                <a href="format.html"><li>FORMAT</li></a>
                                <a href="beispiele.html"><li>BEISPIELE</li></a>
                                <a href="download.html"><li>DOWNLOAD</li></a>
                                <a href="anfrage.html"><li>ANFRAGE STELLEN</li></a>
                            </ul>
                        </li>
                    </ul></h1>
                </div>
    </div>
Antwort
von fluffiknuffi2, 11

Kannst du #nav nicht einfach eine feste Breite zuweisen und es mit margin: 0 auto positionieren?

(Sollte die Antwort nein lauten, dann werde ich dir nicht weiter helfen, ist mir ein zu komplexes Problem um das mal eben nebenbei für dich zu lösen :x Ansonsten noch als Idee, #nav mit display: inline-block, sowie auf übergeordnetes Element text-align: center  horizontal zentrieren)

Antwort
von ilovetoro, 7

Oh je ... zu viel durcheinander, z.B. wozu alles im h1, warum negativ margin, Vorsicht mit position absolute, der  a-tag gehört innerhalb  der li, etc.

Wenn das ein Schulprojekt ist, solltest du das ganze wirklich etwas mehr studieren, ansonsten hab ich dir hier alles mal vorgemacht:  https://jsfiddle.net/ddpth8eg/

Keine passende Antwort gefunden?

Fragen Sie die Community