How to remove blank space between banner and top of page - css

HTML
<html>
<head>
<link rel="shortcut icon" href=".\favicon.ico">
<title>rentPRO</title>
</head>
<body>
<nav id="top_menu">
<ul>
<li class="current">Home</li>
<li>My Profile</li>
<li>The Fleet
<ul>
<li>Nissan</li>
<li>Toyota</li>
<li>Honda</li>
<li>Mazda</li>
</ul>
</li>
<li>Other Services</li>
<li>Terms and Conditions</li>
<li>Frequently Asked Questions</li>
<li>About Us</li>
</ul>
</nav>
<div id="wrapper">
<div id="header">
</div>
<div class="content">
</div>
<div id="footer">© rentPRO 2015</div>
</div>
</body>
</html>
CSS
#header {
background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
background-size: 100% 100%;
width: 1050px;
height: 190px;
margin: 0 auto;
}
#top_menu {
display:block;
position:relative;
top: 200px;
border-radius: 5px;
border-width: 1px 1px 1px;
border-style:solid;
background-color: #e5e5e5;
font: bold 16px Tahoma;
height: 40px;
width: 1075px;
margin: 0 auto;
border-color: black;
}
The height: 40px; is making the banner to come down by 40px, thus leaving a blank space between the top of the page and the banner. When I remove this line, the problem goes away but the navigation bar no more has a background. Can anybody tell me what is wrong here?


First thing you have to put your <nav>tag inside the div with id header.
Set top: 190px; in #top_menu.
HTML :
<head>
<link rel="shortcut icon" href=".\favicon.ico">
<title>rentPRO</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<nav id="top_menu">
<ul>
<li class="current">Home</li>
<li>My Profile</li>
<li>The Fleet
<ul>
<li>Nissan</li>
<li>Toyota</li>
<li>Honda</li>
<li>Mazda</li>
</ul>
</li>
<li>Other Services</li>
<li>Terms and Conditions</li>
<li>Frequently Asked Questions</li>
<li>About Us</li>
</ul>
</nav>
</div>
<div class="content">
</div>
<div id="footer">© rentPRO 2015</div>
</div>
</body>
</html>
CSS:
#header {
background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
background-size: 100% 100%;
width: 1050px;
height: 190px;
margin: 0 auto;
}
#top_menu {
display:block;
position:relative;
top: 190px;
border-radius: 5px;
border-width: 1px 1px 1px;
border-style:solid;
background-color: #e5e5e5;
font: bold 16px Tahoma;
height: 40px;
width: 1075px;
margin: 0 auto;
border-color: black;
}
check fiddle


try this code, i moved your header tag above your menu, took away the height and changed the top menu height to 20.
</head>
<body>
<div id="header"></div>
<nav id="top_menu">
<ul>
<li class="current">Home</li>
<li>My Profile</li>
<li>The Fleet
<ul>
<li>Nissan</li>
<li>Toyota</li>
<li>Honda</li>
<li>Mazda</li>
</ul>
</li>
<li>Other Services</li>
<li>Terms and Conditions</li>
<li>Frequently Asked Questions</li>
<li>About Us</li>
</ul>
</nav>
<div id="wrapper">
<div class="content">
</div>
<div id="footer">© rentPRO 2015</div>
</div>
</body>
</html>
#header {
background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
background-size: 100% 100%;
width: 1050px;
height: 190px;
margin: 0 auto;
}
#top_menu {
display:block;
position:relative;
top: 20px;
border-radius: 5px;
border-width: 1px 1px 1px;
border-style:solid;
background-color: #e5e5e5;
font: bold 16px Tahoma;
width: 1075px;
margin: 0 auto;
border-color: black;
}


It would help you:
html, body {margin: 0; padding: 0}
#banner {
background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
background-size: 100% 100%;
width: 1050px;
height: 190px;
margin: 0 auto;
}
#top_menu {
display:block;
position:relative;
/*top: 200px;*/
border-radius: 5px;
border-width: 1px 1px 1px;
border-style:solid;
background-color: #e5e5e5;
font: bold 16px Tahoma;
height: 40px;
width: 1075px;
margin: 0 auto;
border-color: black;
}
And the HTML:
<header>
<div id="banner">
</div>
<nav id="top_menu">
<ul>
<li class="current">Home</li>
<li>My Profile</li>
<li>The Fleet
<ul>
<li>Nissan</li>
<li>Toyota</li>
<li>Honda</li>
<li>Mazda</li>
</ul>
</li>
<li>Other Services</li>
<li>Terms and Conditions</li>
<li>Frequently Asked Questions</li>
<li>About Us</li>
</ul>
</nav>
</header>
<div id="wrapper">
<div class="content">
</div>
</div>
<footer>
<div id="footer">© rentPRO 2015</div>
</footer>


If you are able to change the order of elements in your HTML, the simplest solution is to insert #top_menu between #header and #content. This structure more accurately reflects the structure you want to display and the elements will flow naturally. You can remove height and top from #top_menu.
<div id="wrapper">
<div id="header"></div>
<nav id="top_menu"> ... </nav>
<div class="content"></div>
<div id="footer">© rentPRO 2015</div>
</div>
Example below:
html,
body {
margin: 0;
}
#header {
background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
background-size: 100% 100%;
width: 1050px;
height: 190px;
margin: 0 auto;
}
#top_menu {
display: block;
position: relative;
border-radius: 5px;
border-width: 1px 1px 1px;
border-style: solid;
background-color: #e5e5e5;
font: bold 16px Tahoma;
width: 1075px;
margin: 0 auto;
border-color: black;
}
<div id="wrapper">
<div id="header"></div>
<nav id="top_menu">
<ul>
<li class="current">Home</li>
<li>My Profile</li>
<li>The Fleet
<ul>
<li>Nissan</li>
<li>Toyota</li>
<li>Honda</li>
<li>Mazda</li>
</ul>
</li>
<li>Other Services</li>
<li>Terms and Conditions</li>
<li>Frequently Asked Questions</li>
<li>About Us</li>
</ul>
</nav>
<div class="content"></div>
<div id="footer">© rentPRO 2015</div>
</div>

Related

How to remove the Large White space at the bottom of my webpage?

I have this problem of having a huge white space at the bottom of my web page. I tried for many hours to fix the problem but I can't seem to find where I have gone wrong. Can anybody please help me with the problem? I have attached my code samples below...
Here's my code sample. (HTML)
<!DOCTYPE html>
<html>
<head>
<title>Web Page Exercise 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<div class="UpperHeader"></div>
<div class="SliitLogo">
<img src="images/SLIIT Logo.png" width="25%" height="75">
</div>
<div class="Login">
Login
</div>
<div class="Register">
Register
</div>
<div class="SliitLibrary">
<h1>SLIIT<span id="Space">LIBRARY</span></h1>
</div>
<div id="UpperNavigationBar">
<div class="UpperNavigationBarContents">
<ul>
<li>
<div><p style="width: 100px;color: white;">Home</p></div>
</li>
<li>
<div><p style="width: 120px;color: white;">About Us</p></div>
</li>
<li>
<div><p style="width: 145px;color: white">Membership</p></div>
</li>
<li>
<div><p style="width: 100px;color: white">Search</p></div>
</li>
<li>
<div><p style="width: 150px;color: white">New Arrivals</p></div>
</li>
<li>
<div><p style="width: 145px;color: white">Staff</p></div>
</li>
</ul>
</div>
</div>
<div class="BackgroundPicture"></div>
<h3 style="position: relative;top: -610px; left: 10px;">Categories</h3>
<div class="SideNavagationBar1">
<UL TYPE="none">
<LI>OPAC Search</LI>
<LI>New Arrivals</LI>
<LI>How to Become a Member</LI>
<LI>Central Bank of Sri Lanka</LI>
<LI>e-Repository</LI>
<LI>Dictionary</LI>
<LI>Library Policies</LI>
<LI>University of Moratuwa</LI>
</UL>
</div>
<h3 style="position: relative;top: -590px;left: 10px;">E-Resources</h3>
<div class="SideNavagationBar2">
<UL TYPE="none">
<LI><div style="text-decoration: none;color: black;">Find the Journals</div></LI>
<LI><a style="text-decoration: none;">Online Journals</a></LI>
<LI><div style="text-decoration: none;">Access the available databases</div></LI>
<LI>Databases</LI>
<LI><div style="text-decoration: none;">Getting start with Research?</div></LI>
<LI>Research Papers</LI>
<LI><div style="text-decoration: none;">What is done already?</div></LI>
<LI>Thesis Dissertion</LI>
<LI><div style="text-decoration: none;">Help!!!</div></LI>
<LI>Library Guide</LI>
<LI><div style="text-decoration: none;">Turnitin</div></LI>
<LI>Turnitin</LI>
</UL>
</div>
</body>
</html>
And here's my CSS sample for the above HTML
.UpperHeader{
background-color: #808080;
width: 100%;
height: 160px;
}
.SliitLogo{
position: relative;
top: -150px;
left: 5px;
margin-right: 10px;
}
.Login{
position: absolute;
float: right;
right: 100px;
top: 40px;
font-size: 10px;
}
.Register{
position: absolute;
float: right;
right: 30px;
top: 40px;
font-size: 10px;
}
.SliitLibrary{
position: relative;
float:right;
right: 20px;
top: -200px;
color: white;
font-family: Lifetime;
}
#Space{
display:inline-block;
margin-left: 10px;
}
#UpperNavigationBar{
background-color: #333333;
position: relative;
top: -140px;
margin: 0px auto;
width: 98%;
height: 35px;
}
.UpperNavigationBarContents li{
display:block;
float:left;
position:relative;
top: -7px;
left: -20px;
color: white;
}
.SideNavagationBar1{
position: relative;
top: -600px;
font-size: 14px;
}
.SideNavagationBar1 li>a{
color: blue;
}
.SideNavagationBar1 li:not(:last-child) {
margin-bottom: 3px;
}
.SideNavagationBar2{
position: relative;
margin-left: 0;
top: -600px;
font-size: 14px;
border: 2px solid red;
}
.SideNavagationBar2 li>a{
color: blue;
}
.SideNavagationBar2 li:not(:last-child) {
margin-bottom: 20px;
}
.BackgroundPicture{
position: relative;
bottom: 0;
top: -130px;
background-color: #d3d3d3;
width: 100%;
min-height: 80vh;
}
The problem is I see a huge white space below the the web page. A huge one. Can anybody please help me???
.UpperHeader{
background-color: #808080;
width: 100%;
height: 160px;
}
.SliitLogo{
position: relative;
top: -150px;
left: 5px;
margin-right: 10px;
}
.Login{
position: absolute;
float: right;
right: 100px;
top: 40px;
font-size: 10px;
}
.Register{
position: absolute;
float: right;
right: 30px;
top: 40px;
font-size: 10px;
}
.SliitLibrary{
position: relative;
float:right;
right: 20px;
top: -200px;
color: white;
font-family: Lifetime;
}
#Space{
display:inline-block;
margin-left: 10px;
}
#UpperNavigationBar{
background-color: #333333;
position: relative;
top: -140px;
margin: 0px auto;
width: 98%;
height: 35px;
}
.UpperNavigationBarContents li{
display:block;
float:left;
position:relative;
top: -7px;
left: -20px;
color: white;
}
.SideNavagationBar1{
position: relative;
top: -600px;
font-size: 14px;
}
.SideNavagationBar1 li>a{
color: blue;
}
.SideNavagationBar1 li:not(:last-child) {
margin-bottom: 3px;
}
.SideNavagationBar2{
position: relative;
margin-left: 0;
top: -600px;
font-size: 14px;
border: 2px solid red;
}
.SideNavagationBar2 li>a{
color: blue;
}
.SideNavagationBar2 li:not(:last-child) {
margin-bottom: 20px;
}
.BackgroundPicture{
position: relative;
bottom: 0;
top: -130px;
background-color: #d3d3d3;
width: 100%;
min-height: 80vh;
}
<!-- IT No: IT17157124 -->
<!-- ID No: 952314017V -->
<!-- Name: Jananth Banuka Jayarathna -->
<!DOCTYPE html>
<html>
<head>
<title>Web Page Exercise 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<div class="UpperHeader"></div>
<div class="SliitLogo">
<img src="images/SLIIT Logo.png" width="25%" height="75">
</div>
<div class="Login">
Login
</div>
<div class="Register">
Register
</div>
<div class="SliitLibrary">
<h1>SLIIT<span id="Space">LIBRARY</span></h1>
</div>
<div id="UpperNavigationBar">
<div class="UpperNavigationBarContents">
<ul>
<li>
<div><p style="width: 100px;color: white;">Home</p></div>
</li>
<li>
<div><p style="width: 120px;color: white;">About Us</p></div>
</li>
<li>
<div><p style="width: 145px;color: white">Membership</p></div>
</li>
<li>
<div><p style="width: 100px;color: white">Search</p></div>
</li>
<li>
<div><p style="width: 150px;color: white">New Arrivals</p></div>
</li>
<li>
<div><p style="width: 145px;color: white">Staff</p></div>
</li>
</ul>
</div>
</div>
<div class="BackgroundPicture"></div>
<h3 style="position: relative;top: -610px; left: 10px;">Categories</h3>
<div class="SideNavagationBar1">
<UL TYPE="none">
<LI>OPAC Search</LI>
<LI>New Arrivals</LI>
<LI>How to Become a Member</LI>
<LI>Central Bank of Sri Lanka</LI>
<LI>e-Repository</LI>
<LI>Dictionary</LI>
<LI>Library Policies</LI>
<LI>University of Moratuwa</LI>
</UL>
</div>
<h3 style="position: relative;top: -590px;left: 10px;">E-Resources</h3>
<div class="SideNavagationBar2">
<UL TYPE="none">
<LI><div style="text-decoration: none;color: black;">Find the Journals</div></LI>
<LI><a style="text-decoration: none;">Online Journals</a></LI>
<LI><div style="text-decoration: none;">Access the available databases</div></LI>
<LI>Databases</LI>
<LI><div style="text-decoration: none;">Getting start with Research?</div></LI>
<LI>Research Papers</LI>
<LI><div style="text-decoration: none;">What is done already?</div></LI>
<LI>Thesis Dissertion</LI>
<LI><div style="text-decoration: none;">Help!!!</div></LI>
<LI>Library Guide</LI>
<LI><div style="text-decoration: none;">Turnitin</div></LI>
<LI>Turnitin</LI>
</UL>
</div>
</body>
</html>

You should
avoid relative positioning if you really don't need it. Because relatively positioned elements occupy the same space as if they would be statically positioned (by default).
place elements in needed containers.
Demo:
body {
background-color: #d3d3d3;
margin: 0;
}
.UpperHeader {
background-color: #808080;
height: 160px;
padding-top: 20px;
padding-bottom: 20px;
}
.SliitLogo {
margin-right: 10px;
}
.Login {
float: right;
font-size: 10px;
}
.Register {
float: right;
font-size: 10px;
}
.SliitLibrary {
color: white;
font-family: Lifetime;
}
#Space {
display: inline-block;
margin-left: 10px;
}
#UpperNavigationBar {
background-color: #333333;
margin: 0px auto;
width: 98%;
height: 35px;
}
.UpperNavigationBarContents li {
display: block;
float: left;
color: white;
}
.SideNavagationBar1 {
font-size: 14px;
}
.SideNavagationBar1 li>a {
color: blue;
}
.SideNavagationBar1 li:not(:last-child) {
margin-bottom: 3px;
}
.SideNavagationBar2 {
border: 2px solid red;
}
.SideNavagationBar2 li>a {
color: blue;
}
.SideNavagationBar2 li:not(:last-child) {
margin-bottom: 20px;
}
<div class="UpperHeader">
<div class="SliitLogo">
<img src="images/SLIIT Logo.png" width="25%" height="75">
</div>
<div class="Login">
Login
</div>
<div class="Register">
Register
</div>
<div class="SliitLibrary">
<h1>SLIIT<span id="Space">LIBRARY</span></h1>
</div>
</div>
<div id="UpperNavigationBar">
<div class="UpperNavigationBarContents">
<ul>
<li>
<div>
<a href="#" style="text-decoration: none">
<p style="width: 100px;color: white;">Home</p>
</a>
</div>
</li>
<li>
<div>
<a href="#" style="text-decoration: none">
<p style="width: 120px;color: white;">About Us</p>
</a>
</div>
</li>
<li>
<div>
<a href="#" style="text-decoration: none">
<p style="width: 145px;color: white">Membership</p>
</a>
</div>
</li>
<li>
<div>
<a href="#" style="text-decoration: none">
<p style="width: 100px;color: white">Search</p>
</a>
</div>
</li>
<li>
<div>
<a href="#" style="text-decoration: none">
<p style="width: 150px;color: white">New Arrivals</p>
</a>
</div>
</li>
<li>
<div>
<a href="#" style="text-decoration: none">
<p style="width: 145px;color: white">Staff</p>
</a>
</div>
</li>
</ul>
</div>
</div>
<h3>Categories</h3>
<div class="SideNavagationBar1">
<div>OPAC Search</div>
<div>New Arrivals</div>
<div>How to Become a Member</div>
<div>Central Bank of Sri Lanka</div>
<div>e-Repository</div>
<div>Dictionary</div>
<div>Library Policies</div>
<div>University of Moratuwa</div>
<h3>E-Resources</h3>
<div class="SideNavagationBar2">
<UL TYPE="none">
<LI>
<div style="text-decoration: none;color: black;">Find the Journals</div>
</LI>
<LI><a style="text-decoration: none;">Online Journals</a></LI>
<LI>
<div style="text-decoration: none;">Access the available databases</div>
</LI>
<LI>Databases</LI>
<LI>
<div style="text-decoration: none;">Getting start with Research?</div>
</LI>
<LI>Research Papers</LI>
<LI>
<div style="text-decoration: none;">What is done already?</div>
</LI>
<LI>Thesis Dissertion</LI>
<LI>
<div style="text-decoration: none;">Help!!!</div>
</LI>
<LI>Library Guide</LI>
<LI>
<div style="text-decoration: none;">Turnitin</div>
</LI>
<LI>Turnitin</LI>
</UL>
</div>

Don't know if it helps, but when you use some relative positioning, keep in mind that the original place of the DOM element keeps.
In your CSS you have many element that have relative position with negative values, so, white space is the "ghost" of the orignal places of these elements.

offset last li in a centeres li's list

I have a centered LI's UL (like those default navigation bars...) - see code below.
Now i want to make a little weird adjustment to that. i want the last li to stay sticked to the left of the last li before him (just like float: left) but without him taking space in the ul, so the other li's will be in the center and he will just be sticking in the side (maybe just like an absolute position's element will...). another thing is i that i need to work when this weird li is alone in the ul also. here is an image that explains better:
weird sticky li image before and after
and here is a codepen playground with that.
Also a built-in one here:
*{font-size:24px;text-align:center;}
.con { background: #aaa; }
.navbar { background: #eee; width:70%;margin:auto;}
.navbar li{display:inline-block; padding: 4px 8px; border: 1px solid blue;}
.last{color:red;}
.afterlast{margin-right:-78.6px;}
BEFORE:
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last">WEIRD</li>
</ul>
</nav><!-- /.navbar -->
</div>
AFTER:
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last afterlast">WEIRD</li>
</ul>
</nav><!-- /.navbar -->
</div>
Now I prefer a pure css solution if possible and of course it should be responsive.

So, combining the answer and comments made by the grateful users, this is the best answer (pure css):
Using absolute positioning.
Using the :first-child:last-child to set position to relative when the weird li is alone.
Here it is live:
* {
font-size: 24px;
text-align: center;
}
.con {
background: #aaa;
}
.navbar {
background: #eee;
width: 70%;
margin: auto;
}
.navbar ul {
padding: 0;
}
.navbar li {
display: inline-block;
padding: 4px 8px;
border: 1px solid blue;
}
.last {
color: red;
}
.afterlast:last-child {
position: absolute;
margin-left: .25em;
}
.afterlast:first-child:last-child {
position: relative;
margin-left: 0;
}
<h2>BEFORE:</h2>
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
<h2>AFTER:</h2>
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last afterlast">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
<h2>AFTER ALONE:</h2>
<div class="con">
<nav class="navbar">
<ul>
<li class="last afterlast">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
Thanks to: #sorayadragon, #JaKhris and #Michael Coker.

You'll have to add an additional class to that li element when it's by itself so you can adjust the styles and make it take up space again. I added the .aloneweird class and adjusted its styles. Additionally, I removed the padding-left from the ul element which was making it uncentered.
* {
font-size: 24px;
text-align: center;
}
.con {
background: #aaa;
}
.navbar {
background: #eee;
width: 70%;
margin: auto;
}
.navbar ul {
padding-left: 0;
}
.navbar li {
display: inline-block;
padding: 4px 8px;
border: 1px solid blue;
}
.last {
color: red;
}
.afterlast {
position: absolute;
margin-left: .25em;
}
.aloneweird {
position: relative;
margin-left: 0;
}
<h2>AFTER:</h2>
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last afterlast">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
<h2>ALONE:</h2>
<div class="con">
<nav class="navbar">
<ul class="nav">
<li class="last afterlast aloneweird">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>

Center Nav menu using floating

Hi I tried to center the navigation menu by using floating CSS element but didn't work. Does anyone have any advices?
<header>
<div id="top-banner">
<img src="Images/headerlines.png" alt="lines">
</div>
<div id="logo">
<img src="Images/logo.png" alt="logo">
</div>
<nav>
<ul class="nav">
<li>About</li>
<li>Price</li>
<li>Contact us</li>
</ul>
</nav>
</header>
Css
.nav li{
width:960px;
list-style:none;
float:left;
}
.nav a {
display:block;
text-align:center;
width:320px;
text-decoration:none;
}
Sorry guys, this is my first time posting question on stackoverflow.

You can do it like this :)
.nav {
width: 960px;
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
.nav li{
display: inline-block;
}
.nav a {
text-decoration: none;
margin: 0px 30px;
}
<header>
<div id="top-banner">
<img src="Images/headerlines.png" alt="lines">
</div>
<div id="logo">
<img src="Images/logo.png" alt="logo">
</div>
<nav>
<ul class="nav">
<li>About
</li>
<li>Price
</li>
<li>Contact us
</li>
</ul>
</nav>
</header>

Adding
margin-left:50%;
in the class "nav"

Margin 0 auto wont work as intended

The title says it all for some reason my margin 0 auto is not centering my margin: 0 auto; wont center my ul inside of the nav element. Any help would be greatly appreciated. I already took a look at other posts on stack regarding the same issues, and couldn't fix my issue.
CSS
/* Sets the body to take up 100% of the width of the browser */
body {
width: 100%;
background: #444444;
margin: 0px;
}
#container{
width: 100%;
}
header {
margin-left: -10px;
margin-top: -10px;
padding: 0 20px;
width: 25%;
height: 12000px;
background: url("imgs/headerBg.jpg") repeat-y;
float: left;
}
nav{
width:60%;
margin: auto;
}
nav ul{
width: 70%;
list-style-type: none;
text-align: center;
margin: 0 auto;
}
nav ul li{
height: 45px;
padding: 0px;
margin: 0px;
display: inline-block;
border-top: 3px double #fff;
}
nav ul li a{
text-decoration: none;
text-align: center;
font-weight: bold;
color: #ffffff;
font-size: 2.5em;
}
#homepage{
height: 120000px;
width: 65%;
float: left;
}
#homepage li{
list-style-type: none;
height: 14.20%;
}
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Skull Alcohol ©</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="container">
<header>
<nav>
<ul>
<li>home</li>
<li>recipes</li>
<li>our products</li>
<li>shop</li>
<li>contact</li>
</ul>
</nav>
</header>
<section id="homepage">
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
</section>
<footer>
<div id="privacy">privacy</div>
<div id="tos">terms of service</div>
</footer>
</div>
</body>
</html>

It looks like your ul is actually centered, but because ul has a default padding on the left side it appears more to the right.
Try adding padding: 0 to your nav ul rule.

Need a basic submenu for my CSS navigation

So disregarding styling and everything else, all I would like is for a sub menu to appear for some of my navigation selections.
Right now I have a basic list that I made on my own using an online tutorial. Afterwards though, after searching through the web, I still have not found a submenu navigation that is close to my code or understanding.
This is my html code:
<div class="navigation">
<li>
<h2>Services</h2>
</li>
<li>
<h2>Store</h2> </l
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design</li>
</li>
</nav>
</div>
<div class="navigation blue">
<li>
<a href="https://www.facebook.com/pages/Argano-Computer-Services/268377233227887?fref=ts">
<h2>Facebook</h2>
</a></li></div><a href="https://www.facebook.com/pages/Argano-Computer-Services/268377233227887?fref=ts">
</a>
<div class="navigation orange">
<li>
<a href="http://www.bing.com/maps/default.aspx?v=2&pc=FACEBK&mid=8100&rtp=adr.~pos.35.195859_-106.672877_Argano+Computer+Services_10009+Clearwater+Court%2C+Albuquerque%2C+New+Mexico&cp=35.195859~-106.672877&lvl=16&sty=r&rtop=0~0~0~&mode=D&FORM=FBKPL1&mkt=en-US" target="_blank">
<h2>Locate</h2>
</a>
</li>
</div>
<div class="navigation green">
<li>
<h2>Feedback</h2>
</li>
</div>
<div class="navigation purple">
<li>
<h2>About</h2>
</li>
</div>
</div>
</div>
this is my css:
<div class="navigation">
<li>
<h2>Services</h2>
</li>
<li>
<h2>Store</h2> </l
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design</li>
</li>
</nav>
</div>
<div class="navigation blue">
<li>
<a href="https://www.facebook.com/pages/Argano-Computer-Services/268377233227887?fref=ts">
<h2>Facebook</h2>
</a></li></div><a href="https://www.facebook.com/pages/Argano-Computer-Services/268377233227887?fref=ts">
</a>
<div class="navigation orange">
<li>
<a href="http://www.bing.com/maps/default.aspx?v=2&pc=FACEBK&mid=8100&rtp=adr.~pos.35.195859_-106.672877_Argano+Computer+Services_10009+Clearwater+Court%2C+Albuquerque%2C+New+Mexico&cp=35.195859~-106.672877&lvl=16&sty=r&rtop=0~0~0~&mode=D&FORM=FBKPL1&mkt=en-US" target="_blank">
<h2>Locate</h2>
</a>
</li>
</div>
<div class="navigation green">
<li>
<h2>Feedback</h2>
</li>
</div>
<div class="navigation purple">
<li>
<h2>About</h2>
</li>
</div>
</div>
</div>
any suggestions?

Simple submenu for you:
<ul id="submenu">
<li>Home</li>
<li>About</li>
<li>Team</li>
</ul>
<style>
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
zoom: 1;
}
#submenu {
width: 200px;
background: #eee;
padding: 10px;
}
#submenu li{
margin: 0;
margin-bottom: 10px;
position: relative;
text-align: center;
font-weight: bold;
color: #fff !important;
line-height: 1 !important;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
white-space: nowrap;
border: none;
cursor: pointer;
display: inline-block;
vertical-align: middle;
zoom: 1;
border-radius: 3px;
-webkit-font-smoothing: antialiased;
background-color: #77cc6d;
text-shadow: 0 1px 0 rgba(0,0,0,0.15);
font-size: 15px;
padding: 12px 12px 12px 12px;
box-shadow: 0 3px 0 0 #53994b;
width: 100%;
}
#submenu li:active, #submenu li:focus{
box-shadow: 0 1px 0 0 #53994b;
top: 2px;
}
#submenu li:last-child{
margin-bottom: 0px;
}
</style>
JSFiddle: http://jsfiddle.net/aLggP/1/

Resources