Patrick Martin
asked on
Navigation bar not centering
Everything lines up correctly and looks good here:
http://rmdcra.org
For every other page on the site the navigation bar moves to the left and I can't find where or why. I am using a header file and the navigation bar is contained within the header.
I attached the header code and the CSS, let me know if you need to see anything else.
Thank you!
http://rmdcra.org
For every other page on the site the navigation bar moves to the left and I can't find where or why. I am using a header file and the navigation bar is contained within the header.
I attached the header code and the CSS, let me know if you need to see anything else.
Thank you!
Header:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link type="text/css" href="includes/menu.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="menu.js"></script>
<STYLE type="text/css">body {background-image: url('images/bg1.png'); background-repeat: no-repeat; background-size: 100%; text-align: center;}</STYLE>
<title>RMDCRA</title>
</head>
<body>
<img src="/images/Pan.jpg"/>
<div id="menu">
<ul class="menu">
<li><a href="/index.php"><span>Home</span></a></li>
<li><a href="/files/2009rules.pdf"><span>Rules</span></a></li>
<li><a href="/Schedule.php"><span>Schedule</span></a></li>
<li><a href="/Results.php"><span>Results</span></a></li>
<li><a href="/Points.php"><span>Points</span></a></li>
<li><a href="/Roster.php"><span>Roster</span></a></li>
<li><a href="http://www.facebook.com/pages/RMDCRA-Rocky-Mountain-Dwarf-Car-Racing-Association/210760217243?v=photos&ref=ts"><span>Pictures</span></a></li>
<li><a href="/Links.php"><span>Links</span></a></li>
<li><a href="http://rmdcra.proboards.com/index.cgi?board=general"><span>Forum</span></a></li>
<li><a href="http://rmdcra.proboards.com/index.cgi?board=classifieds"><span>Classifieds</span></a></li>
<li><a href="/Tech.php"><span>Tech</span></a></li>
<li><a href="/Contacts.php"><span>Contacts</span></a></li>
<li class="last"><a href="/admin/index.php"><span>Login</span></a></li>
</ul>
</div>
<body>
---------------------------Menu.css---------------------------------
/* menu::base */
div#menu {
height:55px;
background:url(/includes/images/nav-bg.png) repeat-x;
_background:url(/includes/images/nav-bg.gif) repeat-x;
width: 930px;
}
div#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
div#menu ul.menu {
padding-left: 7px;
}
div#menu li {
position: relative;
z-index: 9;
margin: 0;
padding: 0;
display: block;
float: left;
}
div#menu li:hover>ul {
left: -2px;
}
div#menu li div {
list-style: none;
float: left;
position: absolute;
top: 50px;
left: 0;
width: 208px;
z-index: 11;
visibility: hidden;
padding: 0 0 9px 7px;
_padding: 0 0 9px 3px;
background: url(/includes/images/submenu-bottom.png) no-repeat 7px bottom;
_background-image: url(/includes/images/submenu-bottom.gif);
margin: 0 0 0 -9px;
}
div#menu li:hover>div {
visibility: visible;
}
div#menu li.current a {}
/* menu::level1 */
div#menu a {
position: relative;
z-index: 10;
height: 55px;
display: block;
float: left;
padding: 0 9px 0 9px;
line-height: 55px;
text-decoration: none;
}
div#menu span {
font: normal 12px 'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif;
padding-top: 18px;
color: #787878;
font-weight:bold;
text-transform:uppercase;
display: block;
cursor: pointer;
background-repeat: no-repeat;
}
div#menu ul a:hover span {
color: #FFFFFF;
}
div#menu li { background: url(/includes/images/nav_separator.png) top left no-repeat; }
div#menu li.last span{
background: url(/includes/images/nav_separator.png) top right no-repeat;
padding: 18px 10px 16px 0;
}
/* menu::level2 */
div#menu ul ul li {
background: url(/includes/images/nav_dropdown_sep.gif) left bottom repeat-x;
padding: 4px 0;
z-index: 9;
}
div#menu ul ul {
z-index: 12;
padding: 0;
background: rgb(32,32,32) url(/includes/images/nav_dropdown_grad.png) right top no-repeat;
margin-top:0px;
margin-left:4px;
margin-right:5px;
}
div#menu ul ul a {
width: 184px;
padding: 0px 7px 3px 8px;
height: auto;
float: none;
display: block;
background:none;
margin-bottom: 2px;
z-index: -1;
}
div#menu ul ul a span {
padding: 0 10px 0px 10px;
line-height: 20px;
color: #787878;
font-weight:normal;
text-transform: none;
background:none;
}
div#menu ul ul a:hover {
background: url(/includes/images/submenu-selected-bottom.gif) no-repeat 8px bottom;
}
div#menu ul ul a:hover span {
background: url(/includes/images/submenu-selected-top.gif) no-repeat 0px 0px;
color: #fff;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
width: 100%;
}
/* menu::level3 */
div#menu ul ul div {
width: 208px;
margin: -50px 0 0 190px !important;
height: auto;
_padding: 0 0 9px 3px;
}
div#menu ul ul ul {
_padding-right:1px;
}
/* lava lamp */
div#menu li.back {
}
div#menu li.back .left {
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
@elvin66 add
margin-left: auto;
margin-right: auto;
using firebug and you'll see problem solved. :-)
margin-left: auto;
margin-right: auto;
using firebug and you'll see problem solved. :-)
Try putting a <center> tag like this:
<body>
<center>
<img src="/images/Pan.jpg"/>
<div id="menu">
<body>
<center>
<img src="/images/Pan.jpg"/>
<div id="menu">
Ok fair enough! Well done
Why you should add a html tag to center layout when we are using css?
Ooops we are speaking one over the other ;-)
ASKER
Thank you very much:
margin-left: auto;
margin-right: auto;
Worked perfectly!
margin-left: auto;
margin-right: auto;
Worked perfectly!
Hope this helps