Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Suckerfish menus need to be centered no matter the screen resolution

Status
Not open for further replies.
Gawain

Gawain

Technical User
Sep 17, 2004
6
US
I need some help. The title says it all. I have a page that has a Suckerfish drop down menu. I need the menu to be in the center of the browser regardless of the resolution of the monitor. Right now, I have it settings in my style to work with a resolution of 1024 by 768. What I want, and I know it's possible, is to have the menu centered to be used on any resolution monitor.

Here is the code for the frontpage.html:

__________________________________________________________

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "
<html xmlns=" xml:lang="en" >

<head>

<title><?php echo $title_page; ?></title>

<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="web.css" />

<link rel="Shortcut Icon" href="site_files/pictures/favicon.ico" />

<script>
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace (" over", "");
}
}
}
}
}
window.onload=startList;
</script>

</head>

<body>

<div id="header">
<p>NAVPACMETOCCEN San Diego Operational Home Page</p>
</div>

<div id="info">
<p>This page will be down at 1100 GMT on 20 June 2005. Click <a href="site_files/php/status.html">here</a> for more information.</p>
</div>


<div id="menu">
<ul id="nav">

<li><a href="index.php">Home Page</a></li>

<li>Support
<ul>
<li><a href="site_files/php/a.html">Ship Specific</a></li>
<li><a href="site_files/php/a.html">Unit Specific</a></li>
<li><a href="site_files/php/a.html">Detachment</a></li>
<li><a href="site_files/php/a.html">Mobile Env. Team</a></li>
<li><a href="site_files/php/a.html">Coast Guard</a></li>
</ul>
</li>

<li>Satellite
<ul>
<li><a href="site_files/php/a.html">Infrared</a></li>
<li><a href="site_files/php/a.html">Visual</a></li>
<li><a href="site_files/php/a.html">Water Vapor</a></li>
<li><a href="site_files/php/a.html">Lightning</a></li>
<li><a href="site_files/php/a.html">Analysis</a></li>
</ul>
</li>

<li>Products
<ul>
<li><a href="site_files/php/a.html">Warnings</a></li>
<li><a href="site_files/php/a.html">Forecasts</a></li>
</ul>
</li>

<li>Aviation
<ul>
<li><a href="site_files/php/a.html">Products</a></li>
<li><a href="site_files/php/a.html">Contact Info.</a></li>
<li><a href="site_files/php/a.html">OBS/TAFS</a></li>
<li><a href="site_files/php/a.html">Aviation Links</a></li>
</ul>
</li>

<li><a href="site_files/php/links.html">Links</a></li>

</ul>
</div>

<div id="leftside">

<p class="leftmenu"><a href=" Jobs</a></p>

<p class="leftmenu"><a href=" Fear Act</a></p>

<p class="leftmenu"><a href=" Navy Website</a></p>

<p class="leftmenu"><a href="html/privacy.html">Privacy Policy</a></p>

<p class="leftmenu"><a href="site_files/disclaimer.html">DoD Disclaimer</a></p>

</div>

</body>

</html>
_____________________________________________________________

Here is the style sheet "web.css"

_____________________________________________________________
/* This part tells us how the hyperlinks will be handled by the browsers, and also what the background will be */


a:link { /* This is the link standard color*/
color: #000000; /*black*/
}
a:visited { /* This is the color of an already visited link*/
color: #800080;/*purple*/
}

a:hover {/* This is the color your link will take when you move your mouse over it*/
color: #FF0000;/*red*/
text-decoration: none;
}

a:active {/* This is the color and effect when you physically click on the link*/
color: #008080; /*teal*/
}

a { /*This tells the browser not to underline any links */
text-decoration: none;
}


/* This begins the header and the information notice portion */

#header {
margin: -14px -8px 0px -8px;
padding: 10px;
height: auto;
background: #000060;
}

#header p {
margin: 0;
height: auto;
color: #FFFF1B;
text-align: center;
font: small-caps 24px verdana, san-serif, serif;
}

#info {
margin: -1px -8px 0px -8px;
padding: 1px;
height: auto;
}

#info p {
margin: 0;
height: auto;
color: #0000FF;
background: #FFFFFF;
text-align: center;
font: bold 12px arial, san-serif, serif;
}

/* This ends the header and the information notice portion */





/* This begins the Drop-down menu portion*/

#menu { /* Top-Right-Bottom-Left */
margin: 0 0 0 145px;
padding: 0;
width: auto;
font: small-caps bold 12px verdana, san-serif, serif;
}

ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}

li { /* all list items */
float: left;
position: relative;
width: 125px;
}

li ul { /* second-level lists */
display: none;
position: absolute;
top: 14px;
left: 0;
}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

/* This ends the drop-down menu portion */




/* This begins the left-side menu portion */

#leftside {
margin: 100px 0px 0px -8px;
width: 115px;
color: #000000;
font: small-caps 12px arial, san-serif, serif;
}

.leftmenu {
margin: 5px 0 2px 0;
height: 15px;
background: #DDEEFF;
}

#pkinotice {
margin: 0px 50px 0px 125px;
font: bold 12px arial, san-serif, serif;
}

.pki {
border: 2px solid #FF0000;
_____________________________________________________________


Can anyone help me with the centering issue? Yes, I am aware that it is XHTML version 1.1. The page renders just fine in Firefox, as well as IE 6. If it works in other browsers, great, if not, oh well. I know that this can be done, as the link below centers the Suckerfish menu system no matter the resolution.


Any help is appreciated.

Bryan
 
Sort by date Sort by votes
Try this

Code: 
#menu { 
    margin: 0 auto;  /* The proper way to do it */
    text-align:center;  /* The IE way to do it */
    padding: 0;
    width: auto;
    font: small-caps bold 12px verdana, san-serif, serif;
    }
I thikn that's right.. it's early here though!

"I'm making time
 
Upvote 0 Downvote
Foam,

This was the answer I got from another site. I want all of the menu centered on the page. I don't know if there is a confusion with how I am explaining it, so here is a graphical representation of what I want. You will need a powerpoint viewer...


I just wished I could figure this out. It's driving me nuts.

Bryan
 
Upvote 0 Downvote
I can't get your link to work.
But looking at the suckerfish link in your first post...
do you mean like this..?


If this is the case, the whole page is inside a "wrapper" div which is centered using the method I showed above.

Here's a snippet of the CSS from that page

Code: 
body {
	margin: 0px auto;
	padding: 10px 0;
	background: #f5f8e0;
	font: 12px/1.5  Georgia, serif;
	text-align: center;	/* centering for IE */
}


#content {
		background: #D7D9BB;
		margin: 0px auto;	/* centering for Mozilla/NS */
		text-align: left;	  
		padding: 0px;
		width: 740px;
		border-left:1px solid #9d9a89;
		border-right:1px solid #9d9a89;
		/* ie win fudge begins (IE5 + IE6 in quirks mode)*/
		voice-family: "\"}\"";
		voice-family:inherit;
		width: 750px;
	}

#left {
		margin:0;
		padding: 5px 5px 2px 5px;
		/*width:750px;*/
		clear:both;
		color: #D7D9BB;
		background: url(images/topMenuBGGreen.gif) bottom left repeat-x #758365;
		font-weight:bold;
		font-size:10px;
		height: 20px;
		
	}

#left is actually the menu (it's a test for a new layout, the original had the menu on the left and I didn't name it sensibly).

body has a text-align:center to cater for IE.
#content is the "wrapper" div. The whole page sits within it and the margin:0 auto; causes it to center horizontally in compliant browsers.

"I'm making time
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
767
bdwilcox
bdwilcox
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
231
lmcate
lmcate
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
821
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top