Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts

    CSS coding issue

    I am working on a site for my school project and I am having some issues with the navigation bar and links.
    *For some reason the nav bar does not stretch the full page.
    *I can't seem to get the main links to work, only the sub links work.
    *Also when you roll over the main links the drop down menu does not appear, you have to mouseover right below it.

    There is no live version of the site.

    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>Riordan Manufacturing</title>
    
    <link href="main.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body>
    <div id="top-bar"> 
      <div id="logo">  </div>
    </div>
    <div id="nav-bar">
    	<div id="navigation">
            <ul>
                <li>
                <a href="#">Contact Us</a>
                    <ul> <li><a href="#">sub menu item 1</a></li> <li>sub menu item 2</li> <li>sub menu item 3</li> <li>sub menu item 4</li> </ul>
                </li>
    
                <li>
                <a href="#">FAQ</a>
                    <ul> <li>sub menu item 1</li> <li>sub menu item 2</li> <li>sub menu item 3</li> <li>sub menu item 4</li> </ul> 
                </li>
    
                <li>
                <a href="#">Product Catalog</a>
                    
                </li>
    
                <li>
                <a href="#">Plants</a>
                    <ul> <li><a href="#">San Jose, CA</a></li> <li><a href="#">Albany, GA</a></li> <li><a href="#">Pontiac, MI</a></li> <li><a href="#">Hangzhou, China</a></li> </ul>
                </li>
            </ul>
        </div>
    
    </div>
    
    <div id="navigation">
            
        </div>
    
    
    </body>
    
    </div>
    <div id="bottom"> 
      <div id="bottom-inner">One Riordan Plaze<br />San Jose, California 95112<br /> (408) 555-0157</div>
      <div id="bottom-copyright"> @2005, 2006, 2012 Apollo Group, Inc. All rights reserved.
      </div>
    </div>
    
    </div>
    </html>
    CSS
    Code:
    
    body {
    	background-image: url(images/back.jpg);
    	background-repeat: repeat-y;
    }
    
    #bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 999;
      width: 100%;
      height: 123px;
      background-image: url(images/footer.jpg);
    	background-repeat: repeat-x;
    }
    
    #bottom-inner {
      height: 40px;
      margin-left: 250px;
      margin-top: 20px;
      color: white;
      font: Tahoma, Geneva, sans-serif
    }
    
    #bottom-copyright {
    	text-align:center;
    	margin-top: 42px;
    	color: white;
    	font-size: 10px;
    }
    
    #top-bar {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      width: 100%;
      height: 99px;
      background-image: url(images/topbar.jpg);
    	background-repeat: repeat-x;
    }
    
    #nav-bar {
    	z-index: 999;
    	left: 0;
    	width: 100%;
    	height: 60px;
    	background-image: url(images/navbar.jpg);
    	  background-repeat: repeat-x;
    }
    #logo {
    	height: 51px;
    	margin-left: 250px;
    	margin-top: 20px;
    	background-image: url(images/name.jpg);
    	 background-repeat: no-repeat;
    }
    
    #navigation{
    	
    	
    	padding-top:45px;
    	width:100%;
    	height:0px;
    	margin-right:25;
    	background-image:url(images/navbar.jpg);
     	 background-repeat: repeat-x;
    
    }
    
    #navigation ul{
    	margin-right:185px; 
    	padding:0px;}
    
    #navigation ul li {
    	
    	display:inline;
    	height:30px;
    	float:right;
    	list-style:none;
    	margin-left:25px;
    	color:white;
    	position:relative;
    	margin-top:5px;
    }
    
    #navigation li a{
    	color:white; 
    	text-decoration:none;
    	margin-left:15px;
    }
    
    #navigation li a:hover {
    	text-decoration:underline;
    	color:#50aaf4;
    	}
    
    #navigation li ul
    {
    	margin:0px;
    	padding:0px;
    	display:none;
    	position:absolute;
    	left:0px;
    	top:17px;
    	background-color:#001629;
    }
    
    #navigation li:hover ul
    {
    	display:block;
    	width:160px;
    }
    
    #navigation li li
    {
    	list-style:none;
    	display:list-item;
    	width:100%;
    }
    
    #navigation li li a
    {
    	color:#fff; 
    	text-decoration:none;
    }
    
    #navigation li li a:hover
    {
    	text-decoration:underline;
    }
    
    </style>
    DropBox Link for Files

  • #2
    New Coder
    Join Date
    Oct 2008
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Any ideas?

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    837
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Might give you some ideas:

    See following sites for navigation menus:

    CSS Library Horizontal CSS Menus: http://www.dynamicdrive.com/style/cs...y/category/C1/
    http://www.dynamicdrive.com/dynamicindex1/
    http://www.cssplay.co.uk/menus/
    How to Style an Unordered List with CSS:http://www.webreference.com/programm...le2/index.html
    Sexy Drop Down Menu w/ jQuery & CSS: http://www.noupe.com/tutorial/drop-d...query-css.html

    http://efuse.com/Design/navigation.html
    Simple JQuery Accordion menu: http://www.i-marco.nl/weblog/jquery-accordion-menu/
    Drop-Down Menus, Horizontal Style: http://www.alistapart.com/articles/horizdropdowns/

    NavDock jQuery Plugin (Ver 1.5.1): http://plugins.jquery.com/project/NavDock
    Making CSS Rollover Buttons: http://www.elated.com/articles/css-rollover-buttons/
    How to spice up your menu with CSS3: http://tympanus.net/codrops/2012/01/...enu-with-css3/

    How To:

    http://www.w3.org/TR/WCAG10-HTML-TECHS/#links
    http://www.creativepro.com/article/d...vigation-links
    http://efuse.com/Design/navigation.html
    Simple JQuery Accordion menu: http://www.i-marco.nl/weblog/jquery-accordion-menu/
    Drop-Down Menus, Horizontal Style: http://www.alistapart.com/articles/horizdropdowns/

    The Right Way to Make a Dropdown Menu: http://www.sitepoint.com/blogs/2009/...dropdown-menu/
    ------------------------
    Rounded Corner Menus:

    How to Create an Interactive Rounded Navigation Menu with CSS: http://www.wikihow.com/Create-an-Int...-Menu-with-CSS
    CSS Rounded Corners Menus: http://www.virtuosimedia.com/dev/css...-corners-menus
    How To Make CSS Expanding Rounded Navigation Menus & Buttons: http://www.amberweinberg.com/how-to-...menus-buttons/
    ☠ ☠RON☠ ☠

  • #4
    New Coder
    Join Date
    Oct 2008
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks for the links. I will use those next time. But is there anyway you can tell me what is wrong with the code that I have?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •