Thread: Suckerfish woes

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    6
    Rep Power
    0

    Suckerfish woes


    I am trying to get my suckerfish dropdown menu to be centered on the page regardless of the resolution of the monitor. I know this is possible, but I just can't wrap my head around it. This is what I have so far:
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" 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="site_files/style/web.css" />
    		
    		<link rel="Shortcut Icon" href="site_files/pictures/favicon.ico" />
    		
    		<script type="text/javascript" src="site_files/ie_drop.js"></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="http://www.navy.com">Navy Jobs</a></p>
    			
    			<p class="leftmenu"><a href="http://www.donhr.navy.mil/NoFearAct.asp">No Fear Act</a></p>
    			
    			<p class="leftmenu"><a href="http://www.navy.mil">U.S. 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>
    And here is the style sheet:

    Code:
    /* 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;
    As you can see, I've just moved it over manually 145 px, and that centers it pretty well if you are viewing it at 1024x768, but at higher resolutions, the 145px is not sufficient for the centering.

    If anyone has an idea on how to fix it, I'd appreciate help. The solution must be able to validate, and work in both IE and a compliant browser (mozilla or firefox is what I use). Also, if the style sheet code can be cleaned up, or you see mistakes, don't hesitate to tell me. I've been learning CSS2.1 for about 3 months now, but I am not a whiz at it... I appreciate the help.



    Many thanks...

    Bryan
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    6
    Rep Power
    0
    You will need this code to work in IE: I called it ie_drop.js...

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

    Bryan
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Code:
    #menu {
    margin: 0 auto;
    text-align: center;
    }
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    6
    Rep Power
    0
    Kravvtiz,

    That looks nice, but I want the entire menu to be centered on the page, not just to center the menu heading and the lists underneath. Right now, everything is pushed up again the left margin.

    I know it can be done. When I looked at the pretty version of suckerfish menu from htmldog.com, they are centered in the middle of the page. Here is the example that I am looking for.

    http://www.htmldog.com/articles/suckerfish/example/

    I've looked at the style sheet and coding on and off for 2 weeks and I've still not figured it out.

    Sorry... Can anyone help?

    Bryan
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Please post a link to your page.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    6
    Rep Power
    0
    I'm sorry, but I'm running my AMP (Apache, MySql, PHP) web server on my laptop. I wanted to be able to configure my system to work without having to deal with outages, banners and crap added to my webpage. Plus, I can work on it regardless if I have an internet connection or not.

    I sent the files required for the site as an attachment to this message.

    save them both to your desktop, rename "frontpage.txt" to "frontpage.html" and rename "web.txt" to "web.css", and you should be able to view them by opening the frontpage.html in a browser to see what I see. If you don't want to do that, it's cool.

    Thanks
    Bryan
    Attached Files
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Why are you using XHTML 1.1?

    What do you mean by entire menu? Do you mean that you want all of the elements visible on the page to be inside a centered box?
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    6
    Rep Power
    0
    no, I just want the drop down menu to be centered in the middle of the page. Right now, the menu is only centered when the monitor viewing the page is set to 1024X768. But when viewing it at higher resolutions, it continues hugging the left instead of being centered on the page, like the example I provided. Hope that clears things up.

    Bryan

    P.S. I just want to be ahead of the game, so I use XHTML 1.1. Surely that's not the problem with the page...
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Well you went enough ahead to leave IE in the dust.

    If you want it centered in lower resolutions, you'll need to force it to wrap to the next line.
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    6
    Rep Power
    0
    no, this page renders in IE correctly. It also renders in Firefox as well.

    You mentioned wrapping it to another line... how would I do that? You kinda lost me. I'd like to keep it up as close to the top to allow for the most space to put products.

    Thanks for the help...

    Bryan
  20. #11
  21. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    IE renders it correctly because you are serving it as text/html instead of application/xml.

    It would need to wrap to a new line because when browsers aren't 1024 pixels wide the total width of all of those links in #menu might be greater than the width of the browser.

IMN logo majestic logo threadwatch logo seochat tools logo