Member Avatar for riverbay_media

I am having a problem coding my web site, Please see attached screenshot for a visual.

Here is the css and HTML code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#nav_bar {
	height: 50px;
	width: 350px;
	margin: 0px;
	padding: 0px;
}
#nav_bar li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	display: inline;
	text-align: center;
	float: left;
	height: 50px;
}
#nav_bar a {
	display: block;
	height: 50px;
}
#nav_bar a:hover {
	background-color: #CCC;
}
-->
</style>
</head>

<body>
<div id="nav_bar">
<ul>
<li id="home"><a href="#">Home</a></li>
<li id="about"><a href="#">About Us</a></li>
<li id="gallery"><a href="#">Gallery</a></li>
<li id="contact"><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>

If you can see by the pic the boxes are not lining up and are throwing the whole navigation system off..... Any help would be appreciated...


Tim

coding_exp.bmp (105.39 KB)
  • 3 Contributors
  • 3 Replies
  • 79 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by riverbay_media

Recommended Answers

All 3 Replies

Member Avatar for kidwon

This should help

ul{display:block; height: 50px; margin: 0px; padding: 0px;}

The problem is that your list element ul is the only one with no exact size so he plays on different rules :)
There are different approaches when styling but mixing ways leads to unwanted results.


Also I see that you're applying same code for parent and children elements which makes it obvious that you are not quite familiar with the css behaviour.
Here are some sites for you:

http://css.maxdesign.com.au/listamatic/
http://css-tricks.com/video-screencasts-2/

Just explore the behavior of the different values when applying and don't rush adding more more code makes it difficult to separate behaviors :)

Edited by kidwon because: n/a
Member Avatar for riverbay_media

I used the method and it worked great.. Thanks for the help..

Tim

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.