HTML & CSS: Centering the Navbar -
i've looked other people have had similar problems can't seem find answer works me. i'm trying center nav bar keeps getting pushed off left. appreciated! thanks.
body { background-color: rgb(222, 243, 246); /* background-image: url("capitola.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: contain; margin: 0; padding: 0; border: 0; */ } div.image { background-image: url("capitola.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: 100% 100%; margin: 0; padding: 0; border: 10 solid #021a40; position: absolute; height: 100%; width: 100%; } div#wrapper { position: fixed; text-align: center; z-index: 1000; margin: 0 auto; } .navbar ul { list-style-type: none; display: inline-block; padding: 0; margin: 0; overflow: hidden; border-radius: 500px; border: 1px solid black; } .navbar li { float: left; display: inline; text-align: center; } .navbar { display: inline-block; font-weight: bold; width: 120px; color: black; background-color: rgb(254, 255, 241) /*rgb(219,243,245)*/ ; text-align: center; padding: 10px; text-decoration: none; } .navbar a:hover { background-color: rgb(239, 162, 180); } h1 { font-family: florence, cursive; margin-top: 8%; margin-left: 60%; color: white; font-size: 3.5em; }
<!doctype html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>michael leath</title> </head> <body> <div class="image"> <h1>michael leath</h1> </div> <div id="wrapper"> <div class="navbar"> <ul> <li><a href="#aboutme">about me</a> </li> <li><a href="#contact">contact</a> </li> <li><a href="#education">eduation</a> </li> <li><a href="#background">background</a> </li> </ul> </div> </div> </body> </html>
you need set width #wrapper margin: 0 auto
work :)
body { background-color: rgb(222, 243, 246); /* background-image: url("capitola.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: contain; margin: 0; padding: 0; border: 0; */ } div.image { background-image: url("capitola.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: 100% 100%; margin: 0; padding: 0; border: 10 solid #021a40; position: absolute; height: 100%; width: 100%; } div#wrapper { position: fixed; text-align: center; z-index: 1000; margin: 0 auto; width: 100%; } .navbar ul { list-style-type: none; display: inline-block; padding: 0; margin: 0; overflow: hidden; border-radius: 500px; border: 1px solid black; } .navbar li { float: left; display: inline; text-align: center; } .navbar { display: inline-block; font-weight: bold; width: 120px; color: black; background-color: rgb(254, 255, 241) /*rgb(219,243,245)*/ ; text-align: center; padding: 10px; text-decoration: none; } .navbar a:hover { background-color: rgb(239, 162, 180); } h1 { font-family: florence, cursive; margin-top: 8%; margin-left: 60%; color: white; font-size: 3.5em; }
<!doctype html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>michael leath</title> </head> <body> <div class="image"> <h1>michael leath</h1> </div> <div id="wrapper"> <div class="navbar"> <ul> <li><a href="#aboutme">about me</a> </li> <li><a href="#contact">contact</a> </li> <li><a href="#education">eduation</a> </li> <li><a href="#background">background</a> </li> </ul> </div> </div> </body> </html>
Comments
Post a Comment