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.
How do i center this even in higher resolution? Thanks for any help.
Code:
<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">Ew[URL unfurl="true"]www yydsdas[/URL] 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>