Forum Moderators: not2easy
I just tried converting a web page from tables to CSS and I've pretty much got it done except for one or two annoying quirks. I've tried for hours to fix them but nothing seems to work - hope an expert can help me!
PROBLEM: My navigation menu is supposed to be centered inside a div. However, even though I have set all my containers to "text-align: center;" the menu is pushed over to the left. This has been tested in Opera, Safari and Firefox and the problem is the same in all these browsers. It looks fine in IE7 and IE5.5. The menu is a javascript so I have included it in my source code below.
-----------------------------------------------
DOC TYPE: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-----------------------------------------------
VALIDATION: This page was validated by the W3C Validation service.
-----------------------------------------------
STYLE SHEET CODE:
<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color:#003366; text-align:center;}
#wrapper {margin:0 auto; width:760px; text-align:center; background-color: #dbc995;}
#footer {clear: both; width:748px; background-color:#dbc995; margin:0; border-top:2px #003366 solid;}
#branding {width:748px; background-color:#666666; height:100px; margin:0; border-bottom:2px #003366 solid;}
#contWrapper {width:748px; background: url(bg.gif) repeat-y 0% 0%; margin-left:auto; margin-right:auto; text-align:center;}
#rightColumn{float:right; width:534px; background: url(mainbg.gif) repeat-y 0% 0%; background-color:#e5e5e5; height:100%; text-align:center;}
#leftColumn {float:left; width: 213px; background: url(navbg.gif) repeat-y 0% 0%; background-color:#969a9e; text-align:center;}
#navBox {text-align:center; background-color:#969a9e; border-left: 2px solid #003366; width:210px;}
#navCont {margin:0 auto; text-align:center; background-color:#969a9e; width:200px;}
#contBox {text-align:center; background-color:#e5e5e5; width:532px; border-right:2px solid #003366;}
#contMain {margin:0 auto; text-align:justify; background-color:#e5e5e5; width:512px;}
a.nav:link {text-align:center; color:#003366; text-decoration:none; font-size:10pt; font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
a.nav:visited {text-align: center; color: #003366; text-decoration: none; font-size: 10pt; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
a.nav:hover {color: #000000; text-decoration: none; font-size: 10pt; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
a.nav:active {color: #000000; text-decoration: none; font-size: 10pt; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
.menuOut {cursor: pointer; margin: 2px; background-color: #DBC995; width: 160px; border: 2px solid #003366; padding:3px; text-align: center; color: #003366; text-decoration: none; font-size: 10pt; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
.menuOver {cursor: pointer; margin: 2px; background-color: #E5E5E5; width: 160px; border: 2px solid #003366; padding:3px; text-align: center; color: #000000; text-decoration: none; font-size: 10pt; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
.submenu {width: 169px; padding-left: 5px; text-align:left;}
.submenu a {color: #003366; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; text-align:left;}
.submenu a:hover {color: #E5E5E5; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; text-align:left;}
</style>
------------------------------------------------
HTML SOURCE CODE:
<html>
<body>
<div id="wrapper">
<div id="contWrapper"><div id="branding">branding</div>
<div id="leftColumn"><div id="navBox">
<!-- Menu start -->
<div id="navCont">
<p id="menu1" class="menuOut" onclick="SwitchMenu('sub1')" onmouseover="ChangeClass('menu1','menuOver')" onmouseout="ChangeClass('menu1','menuOut')"><a href="index.htm" target="_self" class="nav">HOME PAGE</a> </p>
<p id="menu2" class="menuOut" onclick="SwitchMenu('sub3')" onmouseover="ChangeClass('menu3','menuOver')" onmouseout="ChangeClass('menu3','menuOut')">FOR FGC MEMBERS </p>
<div class="submenu" id="sub3" style="display:none;">
• <a href="#" title="Member Login">Member Login</a><br/>
• <a href="#" title="Overview of Benefits">Overview of Benefits</a><br/>
• <a href="#" title="Register for Membership">Register for Membership</a><br/>
</div>
</div>
<!-- Menu end -->
</div></div>
<div id="rightColumn">
<div id="contBox">
<div id="contMain">MAIN CONTENT GOES HERE </div>
</div>
</div>
<div id="footer">footer</div>
</div>
</div>
</body>
</html>
----------------------------------------------------
JAVA SCRIPT SOURCE CODE (FOR MENU):
<script type="text/javascript">
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("navCont").getElementsByTagName("DIV");
if(el.style.display == "none"){
for (var i=0; i<ar.length; i++){
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function ChangeClass(menu, newClass) {
if (document.getElementById) {
document.getElementById(menu).className = newClass;
}
}
document.onselectstart = new Function("return true");
</script>
---------------------------------------------------
Thanks very much!
Debbie
[edited by: Robin_reala at 10:27 pm (utc) on Aug. 18, 2007]
[edit reason] Removed URLs as per TOS#13 [webmasterworld.com] [/edit]
Try adding this to the problem div
float: left;
then use a margin to push it away from left as far as you need it, example:
float: left;
margin-left: 5px;
see what happens.
geoffb
