0

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

3
Contributors
3
Replies
4
Views
7 Years
Discussion Span
Last Post by riverbay_media
0

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: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.