...

View Full Version : CSS coding issue



t_arnold
05-29-2012, 02:27 PM
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.



<!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




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 (http://dl.dropbox.com/u/5378361/t_arnoldSite.zip)

t_arnold
05-30-2012, 12:21 PM
Any ideas?

Major Payne
05-30-2012, 02:44 PM
Might give you some ideas:

See following sites for navigation menus:

CSS Library Horizontal CSS Menus: http://www.dynamicdrive.com/style/csslibrary/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/programming/css_style2/index.html
Sexy Drop Down Menu w/ jQuery & CSS: http://www.noupe.com/tutorial/drop-down-menu-jquery-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/22/how-to-spice-up-your-menu-with-css3/

How To:

http://www.w3.org/TR/WCAG10-HTML-TECHS/#links
http://www.creativepro.com/article/dreamweaver-how-create-you-are-here-navigation-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/04/01/the-right-way-to-make-a-dropdown-menu/
------------------------
Rounded Corner Menus:

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

t_arnold
05-31-2012, 02:00 PM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum