Navigation Help...

1 reply [Last post]

Tue, 2010-03-16 13:44

Danian

Offline

newbie

Timezone: GMT+1

Joined: 2010-03-16

Posts: 2

Points: 4

I am kinda new to css and need help with creating a navigation menu.

The menu is a dropdown menu that uses css and javascript (for the drop down)

I have uploaded the menu to: http://72.29.92.194/~icshyg//temp/nav

The image is how i want it to look and below is the working menu.

I have created the menu but having a few problems with it.

1.) It seems as if the menu is not evenly spaced, and i can not work out how to space it out correctly.
2.) After each tab I have a border-right solid 1px, which is all OK except the last tab where there should not be a border-right, but i can not work out how to remove this.
3.) I have also noticed that the dropdown tabs also have a border-right directly after the text, but should not have and again not sure how to remove this.
4.) Apart from this the menu seems fine in IE however in Firefox and Safari the menu is all over the place. How should I deal with this. How do other developers get around this issue?

CSS CODE

/* MENU STYLES */
.clear {	
	clear: both;
	overflow: hidden;
	height: 0;
}
 
#navbg {
	background-image: url(../_images/frame/nav_middle.gif); 
	background-repeat: repeat-x;
	width: 800px;
	}
 
#nav {
	position:relative;
	margin: 0 0 0 0;
	}
 
	#nav li {	
		position:relative;
		float: left;
		list-style: none;
		font: 13px Tahoma, Arial;
		/*font-weight: bold;*/
		border-right: 1px solid #FFFFFF;
		height: 41px;
	}
 
	#nav li a {
		display: block;
		padding-top: 10px;
		text-decoration: none;
		width: 110px;
		color: #FFFFFF;
		white-space: nowrap;
	}
 
	#nav li a:hover {	
		/*background: #49AFE4;*/
	}
 
		#nav li ul {	
			margin: 0;
			padding: 0;
			position: absolute;
			visibility: hidden;
			padding-top: 10px;
		}
 
			#nav li ul li {	
				float: none;
				display: inline;
			}
 
			#nav li ul li a {	
				width: auto;
				background: #1D47AC;
				color: #FFFFFF;
				text-align: left;
				padding: 5px 12px;
				/*border-style: none;*/
				border: 1px solid #1D47AC;
			}
 
			#nav li ul li a:hover {	
				background: #FFFFFF;
				color: #334587;
				font-size: 13px;
				font-weight: normal;
			}
/* /MENU STYLES */

HTML CODE:

<!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></title>
	<link href="_css/structure.css" rel="stylesheet" media="screen, print" type="text/css" title="Default Screen Style" />
	<link href="_css/navigation.css" rel="stylesheet" media="screen, print" type="text/css" title="Default Screen Style" />
 
	<script type="text/javascript" src="_js/jquery.js"></script>
 
	<script type="text/javascript" src="_js/jquery.min.js"></script>
 
	<script type="text/javascript">
		var timeout         = 500;
		var closetimer		= 0;
		var ddmenuitem      = 0;
 
		function nav_open()
		{	nav_canceltimer();
			nav_close();
			ddmenuitem = $(this).find('ul').eq(<img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" />.css('visibility', 'visible');}
 
		function nav_close()
		{	if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
 
		function nav_timer()
		{	closetimer = window.setTimeout(nav_close, timeout);}
 
		function nav_canceltimer()
		{	if(closetimer)
			{	window.clearTimeout(closetimer);
				closetimer = null;}}
 
		$(document).ready(function()
		{	$('#nav > li').bind('mouseover', nav_open);
			$('#nav > li').bind('mouseout',  nav_timer);});
 
		document.onclick = nav_close;
	</script>
 
 
</head>
 
<body>
	<div id="PageContainer">
 
		<table width="850" border="0" cellspacing="0" cellpadding="0">
			<tr height="101">
				<td width="15">&nbsp</td>
				<td width="241">&nbsp</td>
				<td width="9">&nbsp</td>
				<td width="1"><img src="_images/frame/header_divide.gif" width="1" border="0"></td>
				<td width="189" valign="top">
					<div class="dividecontent">
						<b>Contact:</b><br>
						0845 123 456<br>
						</p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%53%61%6c%65%73%40%64%6f%6d%61%69%6e%2e%63%6f%6d%22%3e%53%61%6c%65%73%40%64%6f%6d%61%69%6e%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p><br>
					<div>
				</td>
				<td width="1"><img src="_images/frame/header_divide.gif" width="1" border="0"></td>
				<td width="189" valign="top">
					<div class="dividecontent">
						<b>Country:</b><br>
						<div class="flags">
							<img src="_images/flags/gbr_l.gif" border="0">&nbsp;
							<img src="_images/flags/usa_s.gif" border="0">&nbsp;
							<img src="_images/flags/canada_s.gif" border="0">&nbsp;
						</div>
					<div>
				</td>
				<td width="1"><img src="_images/frame/header_divide.gif" width="1" border="0"></td>
				<td width="189" valign="top">
					<div class="dividecontent">
						<br><br>
						<input value="&nbsp;Search...">
					<div>
				</td>
				<td width="15">&nbsp</td>
			</tr>
		</table>
		<br><br>
		<table width="870" border="0" cellspacing="0" cellpadding="0" valign="top">
			<tr>
				<td width="35">&nbsp;</td>
				<td width="800" valign="top"><img src="_images/nav_example.gif" border="0"></td>
				<td width="35">&nbsp;</td>
			</tr>
		</table>
		<br><br>
		<table width="870" border="0" cellspacing="0" cellpadding="0" valign="top">
			<tr height="54">
				<td width="15">&nbsp;</td>
				<td width="10"><img src="_images/frame/nav_left.gif" width="10" border="0"></td>
				<td width="800" id="navbg" valign="top">
					<ul id="nav">
						<li><a href="#">Home</a>
							<ul>
								<li><a href="index.php">Home</a></li>
								<li><a href="#">Our Clients</a></li>
								<li><a href="#">The NHS 2011-14</a></li>
							</ul>
						</li>
							<div class="divide"></div>
						<li><a href="#">What We Do</a>
							<ul>
								<li><a href="#">Cloud Computing</a></li>
								<li><a href="#">Mobile Technology FAQ</a></li>
								<li><a href="#">Whats Next</a></li>
							</ul>
						</li>
							<div class="divide"></div>
						<li><a href="#">Products</a>
							<ul>
								<li><a href="#">Line in Flight</a></li>
								<li><a href="#">STOPrightnow</a></li>
								<li><a href="#">RireBurse</a></li>
							</ul>
						</li>
							<div class="divide"></div>
						<li><a href="#">Services</a>
							<ul>
								<li><a href="#">Using Our Products</a></li>
								<li><a href="#">Login Manager</a></li>
							</ul>
						</li>
							<div class="divide"></div>
						<li><a href="#">Partners</a>
							<ul>
								<li><a href="#">Our Clients</a></li>
								<li><a href="#">Apollo Inc Services</a></li>
							</ul>
						</li>
							<div class="divide"></div>
						<li><a href="#">Contact Us</a>
							<ul>
								<li><a href="#">Contact Us</a></li>
								<li><a href="#">Careers</a></li>
							</ul>
						</li>
							<div class="divide"></div>
						<li><a href="#">Login</a></li>
					</ul>
					<div class="clear"> </div>
				</td>
				<td width="10"><img src="_images/frame/nav_right.gif" width="10" border="0"></td>
				<td width="15">&nbsp;</td>
			</tr>
		</table>
	</div>
 
</body>
</html>

Thanks in advance for your help,
Danian

Tags:

Beginners CSS Questions

Tue, 2010-03-16 16:26

Deuce

Offline

Guru

Timezone: GMT-5

Joined: 2005-11-20

Posts: 4421

Points: 1840

I recommend starting here

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

I recommend starting here

New forum topics

User login

Navigation