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

    Join Date
    May 2008
    Posts
    7
    Rep Power
    0

    Help aligning menu for different resolution screens


    Hi, Ive been asked to create a webpage for a website, the page must be 99% identical to the current website but the problem is I had to build the new page from scratch because a problem with joomla.

    While creating the page I ran into a big problem aligning the menu bar. Right now the menu bar lines up exactly how it should on my desktop, but on my laptop which has a much larger screen the menu bar is slide way over to the left.

    here's the website Im making a copy for
    http://www.curacao.vatcar.org/home/

    and here's the page I've made so far
    http://brandynstestserver.zymichost.com/flight/downloads.html

    I know it still needs alot of tweaking but I just want to solve the menu problem

    Heres the HTML, please ignore the comments those are just for the current webmaster (who doesn't know much) until they find another one. Also I just noticed a now unneeded <div id="banner"> tag ignore that too.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Virtual Curacao FIR Downloads</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    
    <script type="text/javascript">
    var timeout         = 50;
    var closetimer		= 0;
    var ddmenuitem      = 0;
    
    function mopen(id)
    {	
    	mcancelclosetime();
    
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    
    	ddmenuitem = document.getElementById(id);
    	ddmenuitem.style.visibility = 'visible';
    
    }
    function mclose()
    {
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    }
    
    function mclosetime()
    {
    	closetimer = window.setTimeout(mclose, timeout);
    }
    
    function mcancelclosetime()
    {
    	if(closetimer)
    	{
    		window.clearTimeout(closetimer);
    		closetimer = null;
    	}
    }
    
    document.onclick = mclose; 
    </script>
    
    <body>
    <div id="page-background"><img src="images/bg.JPG" width="100%" height="100%" alt="Smile"></div> 
    <div id="content"><div id="banner"><center><img src="images/banner.png"/></center></div>
    <ul id="sddm">
    	<li><a href="http://www.curacao.vatcar.org" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Home</center></a>
    		
    		
    		
    	</li>
    	<li><a href="http://www.vatcar.org/website/index.php?option=com_content&view=article&id=5&Itemid=40" onmouseover="mopen('m2')" onmouseout="mclosetime()"><center>Roster</center></a>
    </li>
    
    		        <li><a href="http://www.vatcar.org/forum/index.php?board=6.0&Itemid=54" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Forum</center></a>
    		
    		
    	</li>
        <li><a href="http://www.curacao.vatcar.org/home/index.php?option=com_jobline&Itemid=61" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Career Opportunities</center></a>
    		
    		
    	</li>
        <li><a href="http://www.curacao.vatcar.org/home/index.php?option=com_content&view=article&id=56&Itemid=66" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Contact Us</center></a>
    	</li>	
    		
    			<img src="images/menuspacer.jpg" /></ul>
                
      <table width="982" border="0" cellspacing="0" cellpadding="0" background="images/body.jpg" align="center">
      <tr>
        <td>&nbsp;</td>
        <td><h2>Downloads</h2></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>
        <!--Downloads will go under this comment, dont edit anything above this-->
        
        
        
        
        <h2><center>Charts</center></h2><!-- this little piece of code it just a centered heading, hence the <h2> and <center> tags around the words you want to be the heading-->
        
        <!-- use this format to add downloads, type <a href="LINK TO DOWNLOAD HERE">Name of the download</a> and thats it. That code will display text saying what ever you typed in the "Name of the donwload" section and when you click on the words it will download the file that is located in the "LINK TO DOWNLOAD HERE" section. Heres a few working downloads below for you go go off of-->
        
        <center><a href="downloads/charts/TNCA/TNCACharts.zip">TNCA Charts package</a><br /> <!-- The <br /> is just a line break-->
        
        <a href="downloads/charts/TNCB/TNCBCharts.zip">TNCC Charts package</a><br />
        
        <a href="downloads/charts/TNCC/TNCCCharts.zip">TNCB Charts package</a><br /></center>
        
        <h2><center>ATC</center></h2>
        
        <center><a href="downloads/ATC/Training Files.zip">Training package</a><br />
        
        <a href="downloads/ATC/TNCF Control.zip">TNCF Control package</a><br /></center>
    
        
        
        
        
        
        
        <!-- Dont edit anything below this comment-->
        
        </td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="3"><img src="images/bottom.jpg"/></td>
         </tr>
    </table>
    
    
    </div>
    </body>
    </html>
    Heres the CSS
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    html, body {height:100%; margin:0; padding:0; font-family: Arial, sans-serif, Verdana, Helvetica; }
    
    #page-background {position: fixed; top:0; left:0; width:100%; height:100%;}
    
    #content {position:relative; z-index:1; padding:10px;}
    
    
    #sddm
    {	margin:0 0 0px .6em;
    	padding: 0;
    	z-index: 30
    	}
    
    #sddm li
    {	margin:0 auto;
    	padding: 0;
    	text-align: left;
    	list-style:none;
    	float: left;
    	font: bold 15px sans-serif}
    
    #sddm li a
    {
    	display:block;
    	margin-left: auto;
    	margin-right: auto;
    	padding: 8px 5px;
    	background: url(images/mainmenu.jpg) repeat-x left top;
    	color: #FFF;
    	text-decoration: none
    }
    
    #sddm li a:hover
    {
    	background: #000;
    	width:auto;
    	font-size: 15px;
    }
    Thank you in advance for the help!
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Are you aware that your page contains XHTML errors? The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/ (for future use)

    The menu isn't centered like the rest of the page because it's not in a <center> element nor has an align attribute been used on it. Neither should be used anyway. Use CSS instead:
    Four ways to Center Elements with CSS

    Remove the spacer <img> from the <ul> and use this CSS rule:
    Code:
    #sddm {
        background: url(images/menuspacer.jpg) repeat-x;
        margin: 0 auto;
        overflow: hidden;
        padding: 0;
        width: 982px;
        list-style-type: none;
    }
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2008
    Posts
    7
    Rep Power
    0
    problem solved, thank you very much!

IMN logo majestic logo threadwatch logo seochat tools logo