Issue with side navigation bar - html

I'm sure I've just made a silly error with this, but I can't seem to make it work it out.
My list items in my nav are not starting at the edge of my div, it's almost like there is a margin on the left.
HTML
<div class="container">
<div id="topline"> blah blah </div>
<div class="leftbox">
<img src="images/totalbulllogo.svg" alt="Total Bull Clothing Company Logo" />
</div>
<div id="banner">
<img src="images/totalbullbanner2.jpg" alt="Total Bull Clothing Company Logo" />
</div>
<div id="navmenu">
<ul>
<li class="active">HOME</li>
<li>ABOUT</li>
<li>STORE</li>
<li>SALE ITEMS</li>
<li>CONTACT</li>
</ul>
</div>
<div id="mainContent"> FEATURED ITEMS</div>
</div>
CSS
html, body {
margin:0;
padding:0;
font-family: Calibri, Arial, sans-serif;
}
#font-face {
font-family:'Neon 80s';
src:url('../fonts/neon.ttf'),
url('../fonts/neon.eot');
}
.container {
clear: both;
margin: 0 auto;
padding: 0;
width: 58%;
background-color: #FFFFFF;}
#topline { float:left;
text-align:right;
padding: 0;
width: 100%;
height: 5%;
background-color: #FFF;
margin-top:2%;
margin-bottom:2%;}
.leftbox {
float:left;
padding: 0;
width: 30%;
background-color: #5D2F92;}
.leftbox img {width: 96%;
margin-left: 3%
margin-right:1%;}
#banner img {width: 100%;}
#banner {float:left;
width:68%;
margin-left:2%;}
#navmenu {
float:left;
padding: 0;
width: 30%;
background-color: #5D2F92;
height: 100%;
margin-top:0.5%;
font-family:'Neon 80s';
font-size:18pt;
text-align:left;
}
#navmenu li {
list-style:none;
margin: 0;
}
#navmenu li a {text-decoration:none;
color:#FFFFFF;
margin: 0;
display:block;
padding:20px 0px;}
#navmenu li.active a {background-color:#C49A6C;}
#mainContent {float:left;
width:68%;
background-color:red;
text-align:center;
margin-top:0.5%;
margin-left:2%;}

You forgot to reset the browser ul default CSS values.
By default, depending on the browser, there are some attribute values assigned to some elements, in case of the ul has some margin and padding. So in order to fix this, you should reset these values as follows:
http://jsfiddle.net/gespinha/dW9wB/1/
#navmenu ul{
margin:0;
padding:0;
}

Related

CSS responsive design overlapping body

The situation is: I'm learning on my own how to make websites. I already know some stuff and now I decided to create one website.
But I have some struggle... I'm trying to make it responsive, ant it kinda works, but footer overlaps content in body when you resize the page...
The idea is to scroll down for the tags when they start to overlap..
I've googled for similar issue and checked threads, tried a lot of things, but still got nowhere :|
Help?...
body{
margin: 0px;
font-family: 'Open Sans', sans-serif;
background-image: url(https://umad.com/img/2015/1/dark-geometric-wallpaper-176-205-hd-wallpapers.jpg);
}
/*+++NAVBAR*/
#primary_nav_wrap{
width: 100%;
background:#333;
margin: 0;
float:left;
}
#primary_nav_wrap ul
{
background-color: #333;
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul a
{
display:block;
color:#fff;
text-decoration:none;
font-weight:500;
line-height:50px;
padding:0 20px;
font-family: 'Open Sans',"Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#4CAF50
}
#primary_nav_wrap ul li:hover
{
background:#282828
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#333;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/*---NAVBAR*/
.hometitle span{
width: 100%;
}
.hometitle h1{
font-size: 80px;
color:#fff;
text-align: center;
clear: both;
padding-top: 10%;
}
.hometitle h2{
font-size: 36px;
color:#fff;
text-align: center;
clear: both;
margin-top: -60px;
}
/*+++TAGS*/
.tags {
position: fixed;
bottom: 10px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.item {
-webkit-flex: 1 auto;
flex: 1 auto;
padding: 0.5rem;
text-align: center;
}
.item a {
display: block;
background-color: #4CAF50;
text-decoration: none;
padding: 0.2rem 0.5rem;
border-radius: 3px;
color: #fff;
}
/*---TAGS*/
.homecontainer {
width: 100%;
height: 20%;
min-height: 400px;
}
#footer{
position: relative;
bottom: 0;
width: 100%;
height: 20%;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta name"viewport" content="width=device-width, initial scale=1">
<meta charset="utf-8">
<link rel="shortcut icon" href="/images/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="/arturnmk/style.css">
</head>
<body>
<div class="main">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
<li>Menu</li>
<li>Menu
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>WutWut</li>
</ul>
</li>
<li>Menu</li>
</ul>
</nav>
<div class="homecontainer">
<div class="hometitle">
<span>
<h1>Firtname Lastname</h1>
</span>
<span>
<h2>Thing to say/state</h2>
</span>
</div>
</div>
</div>
</body>
<footer>
<div class="tags">
<div class="item">TagTagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTag</div>
<div class="item">Tag</div>
<div class="item">TagTagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTagTagTag</div>
<div class="item">TagTag</div>
<div class="item">TagTag</div>
<div class="item">PTagTagTag</div>
<div class="item">TagTagTagTagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">Tag16 Tag16 Tag16Tag16</div>
<div class="item">Tag15Tag15</div>
<div class="item">Tag14Tag14Tag14</div>
<div class="item">Tag13</div>
<div class="item">Tag12</div>
<div class="item">Tag11</div>
<div class="item">Tag10</div>
<div class="item">Tag9</div>
<div class="item">Tag8</div>
<div class="item">Tag7</div>
<div class="item">Tag6</div>
<div class="item">Tag5</div>
<div class="item">Tag4</div>
<div class="item">Tag3</div>
<div class="item">Tag2</div>
<div class="item">Tag1</div>
</div>
</footer>
</html>
To achieve responsive web design, use CSS3 media queries
Issue for overlap is due to min-height of homecontainer class and fixed position for tags class
Please check the below option using CSS3 media queries
https://codepen.io/nagasai/pen/vJbqeE
CSS:
html{
height:100%;
}
body{
height:100%;
margin: 0px;
font-family: 'Open Sans', sans-serif;
background-image: url(https://umad.com/img/2015/1/dark-geometric-wallpaper-176-205-hd-wallpapers.jpg);
}
/*+++NAVBAR*/
#primary_nav_wrap{
width: 100%;
background:#333;
margin: 0;
float:left;
}
#primary_nav_wrap ul
{
background-color: #333;
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul a
{
display:block;
color:#fff;
text-decoration:none;
font-weight:500;
line-height:50px;
padding:0 20px;
font-family: 'Open Sans',"Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#4CAF50
}
#primary_nav_wrap ul li:hover
{
background:#282828
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#333;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/*---NAVBAR*/
.hometitle span{
width: 100%;
}
.hometitle h1{
font-size: 80px;
color:#fff;
text-align: center;
clear: both;
padding-top: 10%;
}
.hometitle h2{
font-size: 36px;
color:#fff;
text-align: center;
clear: both;
margin-top: -60px;
}
/*+++TAGS*/
.tags {
bottom: 10px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.item {
-webkit-flex: 1 auto;
flex: 1 auto;
padding: 0.5rem;
text-align: center;
}
.item a {
display: block;
background-color: #4CAF50;
text-decoration: none;
padding: 0.2rem 0.5rem;
border-radius: 3px;
color: #fff;
}
/*---TAGS*/
.homecontainer {
width: 100%;
height: 20%;
min-height: 400px;
}
#footer{
position: relative;
bottom: 0;
width: 100%;
height: 20%;
}
#media only screen and (max-width: 550px) {
.homecontainer {
width: 100%;
height: 20%;
min-height: 100px;
}
footer{
position: absolute;
top: 400px;
width: 100%;
height: 20%;
}
}
1) You shouldn't have HTML code outside of the <body> tag for elements that are meant to be displayed on the page. Your footer should be contained inside the <body> tag. You can create a <div> to contain the elements which you now have in the body of the document.
2) To avoid the overlapping (considering that you want to keep your existing code structure and CSS) you can set a margin-bottom equal to the height of your footer to the container of your main content. This approach will work if your footer always has the same height.
3) If your footer needs to change in height, another simple solution (but with drawbacks) is to let the footer stick to the normal page flow, instead of absolutely positioning it to the bottom of the document, and to set a min-height to the container of your main content. The min-height should be set to ensure that your footer won't be positioned in the middle of the user's screen on pages that are short (that don't have a lot of content in them). The min-height on the main content's container will in this case create whitespace below the main content that will push the footer down.
I may be mistaken, but is the only issue you have the footer getting in the way?
If I want the footer to stay at the bottom of the screen, I usually do as follows:
#footer{
position: absolute;
top: 100%;
height: however high you want it to be;
transform: translateY(-100%) ;
}
That pushes the footer all the way off your screen on the bottom, but the transform: translate pulls it back up exactly the height of the footer.

can't get rid of list items height in menu

hi i just wanted to code a site like BBC just for practice while doing this i got an error in li item of a ul i don't know the problem but when i give it a border-right the border take more height then the original menu, i'm pasting my code here please check it and help me??
in simple words i want list item's border to be equal to the borders of "Signin" and "logo" div
<html>
<head>
<title>BBC</title>
<style>
body{
margin:0;
font-family:Arial,Helvetica,freesans,sans-serif;
}
#top{
width:100%;
height:50px;
}
.keepcenter{
width:1100px;
margin: 0 auto;
}
#logo{
border-right:1px solid #CCCCCC;
float:left;
padding-right:5px;
height:100%;
}
#signin{
font-weight:bold;
font-size:0.9em;
border-right:1px solid #CCCCCC;
width:200px;
height:100%;
float:left;
}
#signin img{
position:relative;
top:5px;
margin-left:15px;
}
#signin p{
display:inline;
position:relative;
top:1px;
padding-left:5px;
}
#menutop{
float:left;
}
#menutop ul{
list-style-type:none;
margin:0;
padding:0;
}
#menutop li{
padding:15px 20px 10px 20px;
display:inline;
font-weight:bold;
font-size:0.9em;
float:left;
border-right:1px solid #CCCCCC;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<div class="keepcenter">
<div id="logo">
<img src="images/logo.jpg" />
</div>
<div id="signin">
<img src="images/signicon.png" /><p>Sign In</p>
</div>
<div id="menutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Simply remove the top and bottom padding from the list items.
body {
margin: 0;
font-family: Arial, Helvetica, freesans, sans-serif;
}
#top {
width: 100%;
height: 50px;
}
.keepcenter {
width: 1100px;
margin: 0 auto;
}
#logo {
border-right: 1px solid #CCCCCC;
float: left;
padding-right: 5px;
height: 100%;
}
#signin {
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #CCCCCC;
width: 200px;
height: 100%;
float: left;
}
#signin img {
position: relative;
top: 5px;
margin-left: 15px;
}
#signin p {
display: inline;
position: relative;
top: 1px;
padding-left: 5px;
}
#menutop {
float: left;
}
#menutop ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menutop li {
padding: 0 20px;
display: inline;
font-weight: bold;
font-size: 0.9em;
float: left;
border-right: 1px solid #CCCCCC;
height: 100%;
}
<div id="container">
<div id="top">
<div class="keepcenter">
<div id="logo">
<img src="http://lorempixel.com/40/40" alt="BBC" />
</div>
<div id="signin">
<img src="http://lorempixel.com/g/10/10" alt="" />
<p>Sign In</p>
</div>
<div id="menutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</div>
The list is floating though, which means that its baseline is not necessarily the same as the #signin div. In my snippet, the img in the div is small enough to not have an effect, but depending on its size, the baseline of the div (and therefore the position of the p) will move down. You may have to compensate for that in the ul.

CSS Margin auto center for <li> tag

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<style>
body,html,aside,article,header,nav,footer,ul,section,div,li,ul{
padding:0;
margin:0;
}
aside,article,header,nav,footer,section,div,ul {
display:block;
margin:0;
padding:0;
}
html {
background:#F1C4F2;
}
body {
width:1000px;
background:#FF53A9;
margin: 0 auto;
font-size:12px;
}
#header{
width:98%;
background-color:#F081F3;
padding:1%;
color:white;
font-size:1.2em;
}
#nav {
width:98%;
background-color:#C043AA;
font-size:1.1em;
padding:1%;
}
ul{
margin:0 auto;
width:100%
}
li {
list-style:none;
float:left;
margin-right:8%;
color:white;
}
OR
/*
li {
list-style:none;
display:inline-block;
margin-right:8%;
color:white;
}
*/
</style>
<body>
<div id="header">
some.com
</div><!--HEADER-->
<div id="nav">
<ul>
<li>Home</li>
<li>Bio</li>
<li>Gallery</li>
<li>Upcoming Projects</li>
<li>Videos</li>
</ul>
</div><!--NAVIGATION-->
<div id="footer"> </div> <!--FOOTER-->
</body>
</html>
I have 'UL' tag inside a 'NAV' <DIV>,for my navigation i have created a 'LI' items and floated it and when i apply ""margin:0 auto"" it doesn't apply.
Even when I use ""display:inline-block""(this section is commented out) to 'LI'.Js
Fiddle link: jsfiddle
Try to add text-align:center for your <ul> and remove float:left from <li> and use display:inline-block; Demo
ul {
margin:0 auto;
width:100%;
text-align:center;
}
li {
list-style:none;
display:inline-block;
margin-right:8%;
color:white;
}
This will center your ul and i've also added overflow:hidden so that the floats are contained (the li).
ul {
margin: 0 auto;
width: 50%;
overflow: hidden;
}
You were applying margin:0px auto to a 100% width element which wont work.
The result: fixed
Firstly, the ul is centered but it's 100% wide so I am assuming that, in fact. you want the list items centered in the ul.
So, remove any floats, set text-align:center on the ul and make the li display as inline-block
* {
padding: 0;
margin: 0;
}
html {
background: #F1C4F2;
}
body {
width: 1000px;
background: #FF53A9;
margin: 0 auto;
font-size: 12px;
}
#header {
width: 98%;
background-color: #F081F3;
padding: 1%;
color: white;
font-size: 1.2em;
}
#nav {
width: 98%;
background-color: #C043AA;
font-size: 1.1em;
padding: 1%;
text-align: center;
}
ul {
background: blue;
}
li {
list-style: none;
display: inline-block;
color: white;
margin: 0 2%;
}
<body>
<div id="header">
some.com
</div>
<!--HEADER-->
<div id="nav">
<ul>
<li>Home</li>
<li>Bio</li>
<li>Gallery</li>
<li>Upcoming Projects</li>
<li>Videos</li>
</ul>
</div>
<!--NAVIGATION-->
<div id="footer"></div>
<!--FOOTER-->

How to fixate this div into this other div? It's a nav bar and it won't align vertically

Sorry for the n00b questions but here goes:
As seen in the screenshot, I can't align the text list items to the nav bar. Refer to the code so you can see what i'm talking about. It's a bit of a mess but what I basically have is a master div that holds the other divs in attempts to keep them "organized"
If anyone can help, it'd be great. thanks!
Screenshot here: http://imgur.com/dL1eMXR
HTML
<div class="masterwrappernav">
<div class="abovenav">
<div class="logowrappers">
<div id="logo">
<img src="img/logo.png">
</div>
<div id="slogan">
<img src="img/1pyramid.png">
</div>
</div>
</div>
<div class="headernav">
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Articles</li>
<li>Devotions</li>
<li>Bible Study</li>
<li>Schedule</li>
<li>Merchandise</li>
<li>Contact Us</li>
<li>Donations</li>
</ul>
</div>
</div>
</div>
CSS
.masterwrappernav {
background-color:#11120D;
width:100%;
height:180px;
margin:0 auto;
}
.abovenav {
background-image:url('/img/wtmot.png');
background-color:#f7f7f7;
width:100%;
height:140px;
margin:0 auto;
box-shadow: 1px 1px 18px #D6D6D6;
}
.headernav {
position:absolute;
background-image:url('/img/grad.png');
background-color:#f7f7f7;
height:40px;
width:100%;
box-shadow: 1px 1px 10px #212121;
text-align:center;
}
.nav {
position:relative;
margin: 0 auto;
}
.nav ul li {
display:inline;
font-family:'Roboto', sans-serif;
font-size:19px;
}
.nav ul li a:link {
border-left:1px solid;
padding:9px 1%;
background-image:url('/img/grad.png');
background-color:#f7f7f7;
color:#454443;
text-decoration:none;
}
Thanks in Advanced
You have a fixed height of 40px on your .headernav. Auto height can fix the alignment problem.
.headernav {
height: auto;
}
Otherwise, if you want exact 40px height for .headernav you can use this snippet below-
.nav ul {
margin-top: 5px;
}
.nav ul li a:link {
padding-top: 0;
padding-bottom: 0;
}
you're messing around with "position: absolute;" without any need IMHO and your UL/LI get some auto-assigned margin/padding - use a RESET!
Look at this jsfiddle for a possible way to a solution.
CSS:
.masterwrappernav
{
background-color:#11120D;
height:180px;
margin:0 auto;
}
.abovenav
{
background-color:#f7f7f7;
height:140px;
margin:0 auto;
box-shadow: 1px 1px 18px #D6D6D6;
}
.headernav
{
background-color:#f7f7f7;
height:40px;
width:100%;
box-shadow: 1px 1px 10px #212121;
text-align:center;
}
.nav
{
margin: 0 auto;
}
.nav ul { margin: 0; padding: 0; }
.nav li { margin: 0; padding: 0; }
.nav ul li
{
display:inline;
font-family: sans-serif;
font-size:19px;
height: 40px;
line-height: 40px;
}
.nav ul li a:link
{
border-left:1px solid;
padding:9px 1%;
background-color:#f7f7f7;
color:#454443;
text-decoration:none;
}
HTML:
<div class="masterwrappernav">
<div class="abovenav">
<div class="logowrappers">
<div id="logo"><!--<img src="img/logo.png" alt="LOGO">--></div>
<div id="slogan"><!--<img src="img/1pyramid.png" alt="PYRAMID">--></div>
</div>
</div>
<div class="headernav">
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Articles</li>
<li>Devotions</li><li>Bible Study</li>
<li>Schedule</li>
<li>Merchandise</li>
<li>Contact Us</li>
<li>Donations</li>
</ul>
</div>
</div>
</div>

CSS - How to center a DIV menu

As like the title, here is my case.
The header part is ok for me, i manage to center it, but the menu part, i just cant figure it.
This is the HTML Part:
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<div id="menu">
<div id="menu_button">
HOME
</div>
<div id="menu_button">
PRODUCTS
</div>
<div id="menu_button">
GALLERY
</div>
<div id="menu_button">
INFO
</div>
<div id="menu_button">
ABOUT US
</div>
</div>
</div>
Here is the CSS part:
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
float:left;
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu #menu_button{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu #menu_button a:link, #container #menu #menu_button a:visited{
text-decoration:none;
color:inherit;
}
#container #menu #menu_button:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
Looking forward to your reply, thanks.
it is semantically better not to use div for menu (instead use followed by
it's wrong to repeat many times an id (instead use classes, or combine css selectors - for your html #menu-button is the same as #menu div).
Here the html + css corrected with the centered menu
<html>
<head>
<style>
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu li{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu li a:link, #container #menu li a:visited{
text-decoration:none;
color:inherit;
}
#container #menu li:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
/*centered menu */
nav ul{
margin: 10px auto;
width: 755px;
}
</style>
</head>
<body
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<nav id="menu">
<ul>
<li>
HOME
</li>
<li>
PRODUCTS
</li>
<li>
GALLERY
</li>
<li>
INFO
</li>
<li>
ABOUT US
</li>
</ul>
</nav>
</div>
</body>
</html>
The centering is obtained giving a specific width to the ul (it could have also been a div or whatever) and giving it an "auto" margin for right and left.
well floating something will mean its taken out of the flow (somewhat) and just, as the title suggests, floating left.
try and remove it:
float:left;
So:
#container #menu {
background: none repeat scroll 0 0 #FFC341;
float: left;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
#container #menu #menu_button {
background: none repeat scroll 0 0 #FFC341;
border-right: thin solid #FF9900;
color: #000000;
display: inline-block;
float: left;
font-size: 18px;
margin: 0;
position: relative;
text-align: center;
text-decoration: none;
width: 150px;
}
Since the width for #menu is set as 100%, it takes up the whole width of the parent element, i.e #container, whose width is auto, i.e the width of the window.
So, you need to set the width of #menu and align it to the center, by getting rid of the float and the following changes :
#container #menu {
width: 755px; /* 151px x 5 elements */
margin:0 auto; /* Instead of padding */
position:relative;
overflow:hidden;
}
and for the yellow background, just wrap your #menu around with a #menuWrapper div, and also as Italy specified, id should be unique on a page. Use class instead.
HTML :
<div id="menuWrapper">
<div id="menu">
<div class="menu_button">
HOME
</div>
<div class="menu_button">
PRODUCTS
</div>
<div class="menu_button">
GALLERY
</div>
<div class="menu_button">
INFO
</div>
<div class="menu_button">
ABOUT US
</div>
</div>
</div>
CSS :
#menuWrapper {
background:#ffc341;
}
Also, it's better to use ul-li elements for the menu items instead of div
Full HTML + CSS : JSFiddle
You may try to modify the container menu in the css part
#container #menu
{
margin:auto;
width:85%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
Try this and comment here for any issues..