HTML and CSS

css to make navigation bar

Please support our HTML and CSS advertiser: 50% Off 6 Months Web Hosting from 1&1. The World's #1 Host!

•

Join Date: May 2005

Posts: 215

Reputation: shanenin is an unknown quantity at this point

Solved Threads: 17

shanenin

Offline

Posting Whiz in Training

css to make navigation bar

Sep 22nd, 2006

I am trying to make a navigation bar using a list. Since a list is indented by default, I can't seem to get my list all the way to the left. I have looked at examples of this, but am not sure how they are doing it. Below is what I have

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<html>
  <head>
	<title>test4</title>
	<style type="text/css">
	  ul { list-style-type: none;
		   float: left; }
 
	  li { display: inline;
		   padding: 2px;
		   border-style: solid;
		   border-left-width: 0px;
		   border-top-width: 1px;
		   border-bottom-width: 1px;
		   border-right-width: 1px;}
 
	   li.first { border-left-width: 1px; }
 
	</style>
  </head>
  <body>
  <ul>
	<li class="first">first</li><li>second</li><li>third</li><li>fourth</li>
  </ul>
  </body>
</html>
<html>
  <head>
	<title>test4</title>
	<style type="text/css">
	  ul { list-style-type: none;
		   float: left; }
	
	  li { display: inline;
		   padding: 2px;
		   border-style: solid;
		   border-left-width: 0px;
		   border-top-width: 1px;
		   border-bottom-width: 1px;
		   border-right-width: 1px;}
		   
	   li.first { border-left-width: 1px; }
	
	</style>
  </head>
  <body>
  <ul>
	<li class="first">first</li><li>second</li><li>third</li><li>fourth</li>
  </ul>
  </body>
</html>

In a perfect world exceptions would not be needed.

•

Join Date: Sep 2006

Posts: 9

Reputation: narsto is an unknown quantity at this point

Solved Threads: 1

narsto

Offline

Newbie Poster

Re: css to make navigation bar

Sep 22nd, 2006

•

Originally Posted by shanenin

I am trying to make a navigation bar using a list. Since a list is indented by default, I can't seem to get my list all the way to the left. I have looked at examples of this, but am not sure how they are doing it. Below is what I have
Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)
<html>
  <head>
    <title>test4</title>
    <style type="text/css">
      ul { list-style-type: none; margin: 0;
           float: left; }
 
      li { display: inline;
           padding: 2px;
           border-style: solid;
           border-left-width: 0px;
           border-top-width: 1px;
           border-bottom-width: 1px;
           border-right-width: 1px;}
 
       li.first { border-left-width: 1px; }
 
    </style>
  </head>
  <body>
  <ul>
    <li class="first">first</li><li>second</li><li>third</li><li>fourth</li>
  </ul>
  </body>
</html>
<html> <head> <title>test4</title> <style type="text/css"> ul { list-style-type: none; margin: 0; float: left; } li { display: inline; padding: 2px; border-style: solid; border-left-width: 0px; border-top-width: 1px; border-bottom-width: 1px; border-right-width: 1px;} li.first { border-left-width: 1px; } </style> </head> <body> <ul> <li class="first">first</li><li>second</li><li>third</li><li>fourth</li> </ul> </body> </html>

•

Join Date: May 2005

Posts: 215

Reputation: shanenin is an unknown quantity at this point

Solved Threads: 17

shanenin

Offline

Posting Whiz in Training

Re: css to make navigation bar

Sep 22nd, 2006

I tried that, but does not seem to have any effect. I still am about 6 characters from the left margin.

In a perfect world exceptions would not be needed.

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: css to make navigation bar

Sep 23rd, 2006

When dealing with "spacing" issues in CSS, always check to ensure that both the margin and the padding properties are properly set for all elements, including all parent/container objects and so on all the way up the tree. In fact, it's best to set margin and padding both to "0" to establish a baseline or "natural" position for everything, and then adjust as needed.

•

Join Date: Sep 2006

Posts: 2

Reputation: azoapes is an unknown quantity at this point

Solved Threads: 0

azoapes

Offline

Newbie Poster

Re: css to make navigation bar

Sep 23rd, 2006

You can always set margin-left for the UL to a negative value... around -40 does it for FireFox. Use JavaScript to vary the margin-left when a user runs IE/FF and that actually makes a solution.

•

Join Date: May 2005

Posts: 215

Reputation: shanenin is an unknown quantity at this point

Solved Threads: 17

shanenin

Offline

Posting Whiz in Training

Re: css to make navigation bar

Sep 23rd, 2006

Thanks for the help. I did not even think to check the padding property.

In a perfect world exceptions would not be needed.

•

Join Date: Oct 2006

Posts: 1,337

Reputation: vishesh is on a distinguished road

Solved Threads: 39

vishesh

Offline

Nearly a Posting Virtuoso

Re: css to make navigation bar

Oct 14th, 2006

be careful with margin and padding property and try with different browsers.

•

Join Date: Jun 2004

Posts: 436

Reputation: FC Jamison is on a distinguished road

Solved Threads: 20

FC Jamison FC Jamison is offline

Offline

Posting Pro in Training

Re: css to make navigation bar

Oct 16th, 2006

Take a look at my dropdown tutorial in the tutorials ssection of this site.

It uses list items and contains comments which will tell you what each CSS entry does.