Navigation Menu / Top Menu Expand

Discussion in 'Web Design and Development' started by AFPoster, Jan 13, 2012.

  1. AFPoster macrumors 65816

    Joined:
    Jul 14, 2008
    Location:
    Charlotte, NC
    #1
    I'm using Coda to alter the code to a Photoshop (.psd) layout.

    I've attached an image for guidance along with a few lines of code that you can hopefully help me with.

    I want to add a 6th menu on the list but it keeps scrunching up my page and pushing everything else down.

    Page:
    Code:
    <div id="container">
      <div id="main_panel">
        <div class="main_center">
          <div id="main_top_panel">
            <div id="main_top_logo_panel">
              <div class="logo">
                <h1><a href="#"><img src="images/PlanToolsLogocopy.jpg" alt="" border="0" /></a></h1>
              </div>
            </div>
            <div id="navigation_panel">
              <div id="topmenu">
                              <ul>
                    <li><a href="index.html"><span>Home</span> </a></li>
                    <li><a href="about.html" class="over"><span>About</span></a></li>
                    <li><a href="services.html"><span>Solutions</span></a></li>
                    <li><a href="support.html"><span>Alliance Partners</span></a></li>
                    <li><a href="News.html"> <span>News</span></a></li>
                    <li><a href="Resources.html"> <span>Resources</span></a></li>
                    <li style=" background:none;"><li><a href="contact-us.html"><span> Contact</span></a></li>
                 </ul>
                
                <div class="clear"></div>
              </div>
    CSS:
    Code:
    #main_panel {clear:both;}
    #main_top_panel { clear:both;}
    #main_top_panel { clear:both; height:65px; 	 } 
    #main_top_logo_panel {float:left; width:250px;}
    .logo {margin:0px; padding:10px 0px 0px 0px; float:left;}
    .logo h1{margin:0px; padding:0px; font-size:26px; font-weight:normal; color:#000;}
    
    
    #navigation_panel {float:right; width:530px;}
    #topmenu { margin:0px; padding:30px 0px 0px 0px; }
    #topmenu ul {margin:0px; padding:0px;}
    
    #topmenu ul li { display:block; float:left;  background:url(../images/nav_line.gif) right  no-repeat;	list-style:none;}
    
    #topmenu li a {
    	font:bold 12px Arial, Helvetica, sans-serif;
    	color:#9199a7;
    	text-decoration:none;
    	text-transform:capitalize;
    	display:block; 
    	float:left; 	
    	
    	padding:0px 1px 0px 2px;
    }
    
    #topmenu li a span {
    	display:block;
    	float:left;
    	padding:10px 20px 10px 20px; 
    	cursor:pointer;
    	
    }
     

    Attached Files:

  2. AFPoster thread starter macrumors 65816

    Joined:
    Jul 14, 2008
    Location:
    Charlotte, NC
    #2
    As you can see in the 2nd image everything is pushed down. So is their anyway to allow a 6,7 and 8th menu item without pushing anything down? Looking to make a clean bar all the way across.
     

Share This Page