Would anyone be able to help me with this navigation bar please?

This site is best viewed in a modern browser with JavaScript enabled.

Would anyone be able to help me with this navigation bar please?

Mrgrey

Hey sup guys, this is my first post on this forum since signing up a few weeks ago, I have ran into a bit of trouble and even though its probably something stupid I would like to ask for your assistance as I have no idea (New to web development)...

Basically I am trying to get my navigation bar to look like this:
http://imgur.com/tCJMLRB,wWZRgEC#1

And it looks like this...
http://imgur.com/tCJMLRB,wWZRgEC

Here is the source code.
#nav {position:absolute;right:0px;}
#nav ul {list-style:none;}
#nav li {float:left;}

Regards, MrGrey.

Mrgrey

Just to let you guys know aswell I previously had the navigation bar finished, however due to other difficulties I had to start over, here is the code for that but it doesn't seem to work now?

#nav {
	width: 100%;
	float: left;
	margin: 0 0 3em 0;
	padding: 0;
	list-style: none;
	background-color: #ffffff;
	position:relative;left:443px;top:-25px;
}
#nav li {
	float: left; 
	 border-right: 2px solid #eb332c;
}
#nav li a {
	display: block;
	padding: 8px 15px;
	text-decoration: none;
	font-weight: bold;
	color: #069;}

ShrineDesigns

<ul id="nav">
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
</ul>

#nav, #nav li, #nav a {
  display: inline-block;
  margin: 0;
  padding: 0;
}
#nav {
  list-style: none;
  background: #fff;
}
#nav li {
  border-left: 2px solid #000;
}
#nav > li:first-child {
  border: none;
}
#nav a {
  padding: 8px 15px;
  color: #069;
  text-decoration: none;
}

When using inline-block elements, be sure to remove white-space around them otherwise it influence how they are laid out.

drwebsitesuk

its very simple dear !!!
just give some margin and padding to the li and its will work surely

kred

ShrineDesigns;1331637 wrote:
<ul id="nav">
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
</ul>
#nav, #nav li, #nav a {
  display: inline-block;
  margin: 0;
  padding: 0;
}
#nav {
  list-style: none;
  background: #fff;
}
#nav li {
  border-left: 2px solid #000;
}
#nav > li:first-child {
  border: none;
}
#nav a {
  padding: 8px 15px;
  color: #069;
  text-decoration: none;
}
When using inline-block elements, be sure to remove white-space around them otherwise it influence how they are laid out.

I think that this is the perfect fix for the above problem. BTW on one of my websites i had a problem with separators between menu elements. It seems that the following code is crucial to have it properly formatted:

#nav > li:first-child {
  border: none;
}

Veeramanikandan

CSS Coding:

ul{background-color: #8F8F8F;
list-style-type: disc;
padding: 10px;}
li{display: inline;}
a{color: #FF0000;
text-decoration: none;}

HTML coding:

<ul>
<li>
<a href="#">Home</a>
</li>
|
<li >
<a href="#">About Us</a>
</li>
|
<li>
<a href="#">Contact Us</a>
</li>
<ul>