CODEWITHSUNDEEP
htmlcss
A.J.W
A.J.W

Reputation: 127

How to center a html website menu navi

coding my first website. stuck on this part, any tips to get the menu writing centered properly and align with the image head. thanks in advance 

<!DOCTYPE html>
<html>
<head>
    <title>A.Willi A.G</title>
</head>

<h1 align="center">
   <a href="index.html"><img src="logo.png" alt="A.Willi A.G" /></a>
</h1>

<body><link rel="stylesheet" href="index.css" type="text/css" /></body>

<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    text-align: left;
}

li {
    float: left;


}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: black;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>

<body>

<ul>
  <li><a href="kontakt.html">Kontakt</a></li>
  <li class="dropdown">
        <a href="#" class="dropbtn">Bewerber</a>
        <div class="dropdown-content">
        <a href="#">Info</a>
        <a href="#">Jobs</a>

  <li class="dropdown">
        <a href="#" class="dropbtn">Kunde</a>
        <div class="dropdown-content">
        <a href="personalverleih.html">Personalverleih</a>
        <a href="toolrental.html">Werkzeuge Mieten</a>
        <a href="referenzen.html">Referenzen</a>
        <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>

  </li>

</ul>
</body>
</html>

Upvotes: 2

Views: 148

Answers (1)

HIR
HIR

Reputation: 302

Check this is it okay ?

<!DOCTYPE html>
<html>
<head>
    <title>A.Willi A.G</title>
</head>

<h1 align="center">
   <a href="index.html"><img src="logo.png" alt="A.Willi A.G" /></a>
</h1>

<body><link rel="stylesheet" href="index.css" type="text/css" /></body>

<head>
<style>
.menu_div{background-color: #333; width:100%;}
ul {
    list-style-type: none;
    margin: 0 auto;
    display:table;
    padding: 0;
    overflow: hidden; 
}

li {
    float: left;


}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: black;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>

<body>

<div class="menu_div">
<ul>
  <li><a href="kontakt.html">Kontakt</a></li>
  <li class="dropdown">
        <a href="#" class="dropbtn">Bewerber</a>
        <div class="dropdown-content">
        <a href="#">Info</a>
        <a href="#">Jobs</a>

  <li class="dropdown">
        <a href="#" class="dropbtn">Kunde</a>
        <div class="dropdown-content">
        <a href="personalverleih.html">Personalverleih</a>
        <a href="toolrental.html">Werkzeuge Mieten</a>
        <a href="referenzen.html">Referenzen</a>
        <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>

  </li>

</ul>
</div>
</body>
</html>

Upvotes: 1

Related Questions