css - How to center a html website menu navi -
coding first website. stuck on part, tips menu writing centered , align image head. 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 { 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>
check 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 { 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>
Comments
Post a Comment