[ERLEDIGT] Menüleiste wird nicht innerhalb der Box angezeigt

[Jul_Chen]

Hallo ihr Lieben,

ich bin blutiger Anfänger und möchte eine einfache Seite erstellen.
Leider bin ich bei der Menüleiste am Verzweifeln!
Ich möchte sie innerhalb der div "navi" mittig platzieren. Sie tauchen aber Oberhalb der navi-Box auf und sind logischerweise nach links versetzt...wegen dem float. Lasse ich ihn aber raus, so stehen alle Listenpunkte untereinander -.-

Könnt ihr mir bitte helfen?? Ich wäre euch sehr dankbar!
Viele Grüße

<div class="navi">
<ul id="headernavi">               
                <li class="menupt"><a href="...">WILLKOMMEN</a></li>
                <li class="menupt"><a href="...>ANMELDUNG</a></li>
            ....
            </ul>
</div>


div.navi {
margin-left: auto;
margin-right: auto;
width: 1200px;
height: 50px;
background-color: #0B0B40;


ul#headernavi {
      position:relative;
        font-size:smaller;       
        margin-left: auto;
      margin-right: auto;
        }

.menupt {
    font-family: 'Verdana', arial, serif;
       list-style: none;
    text-align: center;
       float:left;
    margin: 0 15px 0 0;
    padding: 0 0 0 15px;
    border-left:1px solid #FFFFFF;
    }

 

[Tronjer]

Wer floatet muss auch clearen.

Aber wozu der Aufwand? Standardelemente wie die Navbar gibt es als fertige Komponenten.
http://getbootstrap.com

 

[MrMurphy]

Hallo Jul Chen

Dein HTML und CSS sind leider veraltet und werden teilweise nicht so verwendet wie es vorgesehen ist.

Mit aktuellem HTML könnte dein Quelltext mit zentrierten Links so aussehen:

   <nav class="main-menu">
      <a href="">Willkommen</a>
      <a href="">Anmeldung</a>
      <a href="">Abmeldung</a>
   </nav>

und das CSS dazu so:

      .main-menu {
         background-color: hsla(240, 71%, 15%, 1);
         width: 1200px;
         padding: 0.3rem 0;
         margin: 0rem auto 0rem auto;
         display: flex;
         justify-content: center;
      }
      .main-menu a {
         font-family: Verdana, Arial, serif;
         text-transform: uppercase;
         padding: 0.3rem 0.5rem;
      }
      .main-menu a:hover,
      .main-menu a:active,
      .main-menu a:focus {
         background-color: hsla(360, 0%, 30%, 1);
      }
      .main-menu a:nth-child(1n+2) {
         border-left: 1px solid #FFFFFF;
      }

Gruss

MrMurphy

 

[Jul_Chen]

Vielen lieben Dank für eure Hilfe! Werd es mal mit dem Code probieren und nochmal Rückmeldung geben. Müsste mich wohl öfter damit beschäftigen ;)
@Trojaner...habe keinen fertigen Style gefunden, der meinen Wünschen entsprach...danke für den Tipp :)
Vielen Dank euch beiden nochmal !