PDA

View Full Version : Centering Navigation Menu


pacmanny
12-08-2009, 01:16 PM
Hi guys, i am having a play with this nav menu and i am wanting to center this everytime regardless of the screen resolution. it looks centered in 1024, 1152, 1280 but as you go higher like at 1920 this looks not centered at all at first glance. i've been messing about but still no joy.

How do i center this even in higher resolution? Thanks for any help.



<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 7;
//menu constructor
function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = allitems;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
}
//menu methods
function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
var shutdiv =eval( "menuitem"+i+".thediv");
shutdiv.style.visibility="hidden";
}
theobj.thediv.style.visibility="visible";
}
function closesubnav(event){
if ((event.clientY < 80)||(event.clientY > 200)){ // the space wherein the mouseover and visibility is being triggered.
for (var i=1; i<= numofitems; i++){
var shutdiv =eval('menuitem'+i+'.thediv');
shutdiv.style.visibility='hidden';
}
}
}
// -->
</script>
<style>
#masthead{
position: absolute;
left: 32%;
margin-left: -260px;
}
#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}

#content{
padding: 0px 10px 0px 0px;
margin:0px 0px 0px 178px;
border-left: 1px solid #ccd2d2;
}
/************* globalNav styles ****************/
#globalNav{
position: relative;
width: 930px;
min-width: 930px;/* 640 orig */
height: 31px;
color: #cccccc;
padding: 0px;
margin: 0px;
left: -1px;
top: 88px;
}
#globalLink{
position: absolute;
top: 4px;
height: 20px;
min-width: 930px;
padding: 0px;
margin: 0px;
left: 8px;
z-index: 100;
width: 930px;
}

a.glink:hover{
background-image: url(/images/bgbg.jpg);
text-decoration: none;
color: #ffffff;
}
/************ subglobalNav styles **************/
.subglobalNav{
position: absolute;
top: 123px;/* this is the Y-axis of the secondary navigation */
left: 7px;
/*width: 100%;*/
min-width: 875px;
height: 27px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #999999;
width: 875px;
}
.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #0066cc;/* color of the sub nav text */
}

.subglobalNav a:hover{
color: #0066cc;
text-decoration:underline
}
</style>

</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onmousemove="closesubnav(event);" bgcolor="#CCCCCC">
<div id="masthead">
<div id="globalNav"> <!--start globalLinks-->
<div id="globalLink"> <a href="home.php" id="gl1" class="glink" onMouseOver="ehandler(event,menuitem1);">Home</a> | </font><a href="laaagss.html" id="gl2" class="glink" onMouseOver="ehandler(event,menuitem2);"> Laags Tbibd Abedile1e </a> | </font><a href="kalass.html" id="gl3" class="glink" onMouseOver="ehandler(event,menuitem3);"> Kalass1 Delbxeua </a> | </font><a href="duldul.html" id="gl4" class="glink" onMouseOver="ehandler(event,menuitem4);">Du1d1gaa/Balieiaw/Deke betkxeya </a> | </font><a href="DK.HTML" id="gl5" class="glink" onMouseOver="ehandler(event,menuitem5);">Dk1weex Dera</a> | </font><a href="dunks.html" id="gl6" class="glink" onMouseOver="ehandler(event,menuitem6);">Dunks 10 Othak Gada1laz</a> | </font><a href="dunnts.html" id="gl7" class="glink" onMouseOver="ehandler(event,menuitem7);">Dunnnantz</a> </div>
<!--end globalLinks-->
</div>
<!-- end globalNav -->

<div id="subglobal1" class="subglobalNav"></div><div id="subglobal6" class="subglobalNav"></div> <div id="subglobal7" class="subglobalNav"></div>


<!-- start of sub navigation -->
<div id="subglobal2" class="subglobalNav"> <a href="search.aspx">Domzaltemtz</a> | <a href="ffsdfsdfs.html">Kur Augg1leld</a> | <a href="sdfsfsd.html">Taabz genader jetadd</a> | <a href="asdasdasdas.html">GRES CSrefdfgdfgdfgf</font></a> | <a href="sdfsdfsd.html">Psdfsd4d dfdfgdff</a> | <a href="dfgdgdfgdf.html">Dererrr sdfsdfsd</a> </div>
<!-- end of sub navigation -->

<!-- start of sub navigation -->
<div id="subglobal3" class="subglobalNav"> <a href="xcvxcvxc.gtss">Tsdfsdf sdfsdf sdfsdf ddd</a> | <a href="dfgdfg5555.gerte">Ysdfsdfssdf sdfdd </a> | <a href="34223.html">Ewwww yydsdas YYdsd</a></div>
<!-- end of sub navigation -->

<!-- start of sub navigation -->
<div id="subglobal4" class="subglobalNav"> <a href="udfusdfsdfs.html">HHhsd sdhssssss</a> | <a href="sdasdsasdas.aspx">TTT TTTTT TTTTTTTTTT</a></div>
<!-- end of sub navigation for -->

<!-- start of sub navigation -->
<div id="subglobal5" class="subglobalNav"> <a href="yyyy.html">YYYYYY YYYYYY</a> | <a href="gggggg.aspx">GGGGGGGGGGGGGGG</a> | <a href="hhhhh.aspx" target="_blank">IMMMMMMM MMMMMMMM</a> | <a href="OOOOO.html">OOCCCCCCCCC CCCCCCC</a> | <a href="sdfsfdfsds.html">PPPPaaa CCCCCRRRRR</a> | <a href="sdfsdfsdfsds.html">Phhhhhh AAAAAAAA</a> | <a href="sdfsdfsdfsd">PASE</a></div>
<!-- end of sub navigation -->

<script type="text/javascript">
<!--
var menuitem1 = new menu(7,1,"hidden");
var menuitem2 = new menu(7,2,"hidden");
var menuitem3 = new menu(7,3,"hidden");
var menuitem4 = new menu(7,4,"hidden");
var menuitem5 = new menu(7,5,"hidden");
var menuitem6 = new menu(7,6,"hidden");
var menuitem7 = new menu(7,7,"hidden");

// -->
</script>

</div>
</body>
</html>

tux
12-12-2009, 12:23 PM
Hi, I have stripped out some of your code, not sure if you needed it, and have added a wrapper div. This is then centered on your page using this in your styles.....

#wrapper{
width: 930px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
border: solid 1px red;/*added so you can temp see the div*/
text-align: center;/*centers the text/links in the div*/
}

Have a look through it and see if you understand.

Here is your full changed code, hope it helps, regards Paul

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 7;
//menu constructor
function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = allitems;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
}
//menu methods
function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
var shutdiv =eval( "menuitem"+i+".thediv");
shutdiv.style.visibility="hidden";
}
theobj.thediv.style.visibility="visible";
}
function closesubnav(event){
if ((event.clientY < 80)||(event.clientY > 200)){ // the space wherein the mouseover and visibility is being triggered.
for (var i=1; i<= numofitems; i++){
var shutdiv =eval('menuitem'+i+'.thediv');
shutdiv.style.visibility='hidden';
}
}
}
// -->
</script>
<style>
#wrapper{
width: 930px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
border: solid 1px red;
text-align: center;
}
#pageNav{
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}

/************* globalNav styles ****************/
#globalNav{
width: auto;
min-width: 930px;/* 640 orig */
height: 31px;
color: #cccccc;
padding: 0px;
margin: 0px;
}
#globalLink{
height: 20px;
padding: 0px;
margin: 0px;
}
/************ subglobalNav styles **************/
.subglobalNav{
height: 27px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #999999;
}
.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #0066cc;/* color of the sub nav text */
}

.subglobalNav a:hover{
color: #0066cc;
text-decoration:underline
}
</style>

</head>
<body>
<div id="wrapper">
<div id="globalLink"> <a href="home.php" id="gl1" class="glink" onMouseOver="ehandler(event,menuitem1);">Home</a> | </font><a href="laaagss.html" id="gl2" class="glink" onMouseOver="ehandler(event,menuitem2);"> Laags Tbibd Abedile1e </a> | </font><a href="kalass.html" id="gl3" class="glink" onMouseOver="ehandler(event,menuitem3);"> Kalass1 Delbxeua </a> | </font><a href="duldul.html" id="gl4" class="glink" onMouseOver="ehandler(event,menuitem4);">Du1d1gaa/Balieiaw/Deke betkxeya </a> | </font><a href="DK.HTML" id="gl5" class="glink" onMouseOver="ehandler(event,menuitem5);">Dk1weex Dera</a> | </font><a href="dunks.html" id="gl6" class="glink" onMouseOver="ehandler(event,menuitem6);">Dunks 10 Othak Gada1laz</a> | </font><a href="dunnts.html" id="gl7" class="glink" onMouseOver="ehandler(event,menuitem7);">Dunnnantz</a> </div>
<!--end globalLinks-->
</div>
<!-- end globalNav -->

<div id="subglobal1" class="subglobalNav"></div><div id="subglobal6" class="subglobalNav"></div> <div id="subglobal7" class="subglobalNav"></div>


<!-- start of sub navigation -->
<div id="subglobal2" class="subglobalNav"> <a href="search.aspx">Domzaltemtz</a> | <a href="ffsdfsdfs.html">Kur Augg1leld</a> | <a href="sdfsfsd.html">Taabz genader jetadd</a> | <a href="asdasdasdas.html">GRES CSrefdfgdfgdfgf</font></a> | <a href="sdfsdfsd.html">Psdfsd4d dfdfgdff</a> | <a href="dfgdgdfgdf.html">Dererrr sdfsdfsd</a> </div>
<!-- end of sub navigation -->

<!-- start of sub navigation -->
<div id="subglobal3" class="subglobalNav"> <a href="xcvxcvxc.gtss">Tsdfsdf sdfsdf sdfsdf ddd</a> | <a href="dfgdfg5555.gerte">Ysdfsdfssdf sdfdd </a> | <a href="34223.html">Ewwww yydsdas YYdsd</a></div>
<!-- end of sub navigation -->

<!-- start of sub navigation -->
<div id="subglobal4" class="subglobalNav"> <a href="udfusdfsdfs.html">HHhsd sdhssssss</a> | <a href="sdasdsasdas.aspx">TTT TTTTT TTTTTTTTTT</a></div>
<!-- end of sub navigation for -->

<!-- start of sub navigation -->
<div id="subglobal5" class="subglobalNav"> <a href="yyyy.html">YYYYYY YYYYYY</a> | <a href="gggggg.aspx">GGGGGGGGGGGGGGG</a> | <a href="hhhhh.aspx" target="_blank">IMMMMMMM MMMMMMMM</a> | <a href="OOOOO.html">OOCCCCCCCCC CCCCCCC</a> | <a href="sdfsfdfsds.html">PPPPaaa CCCCCRRRRR</a> | <a href="sdfsdfsdfsds.html">Phhhhhh AAAAAAAA</a> | <a href="sdfsdfsdfsd">PASE</a></div>
<!-- end of sub navigation -->

<script type="text/javascript">
<!--
var menuitem1 = new menu(7,1,"hidden");
var menuitem2 = new menu(7,2,"hidden");
var menuitem3 = new menu(7,3,"hidden");
var menuitem4 = new menu(7,4,"hidden");
var menuitem5 = new menu(7,5,"hidden");
var menuitem6 = new menu(7,6,"hidden");
var menuitem7 = new menu(7,7,"hidden");

// -->
</script>


</div><!--end #wrapper-->
</body>
</html>