Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 22388

Sep 22nd, 2006

css to make navigation bar

Expand Post »

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

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>

Similar Threads

Photoshop: create a tabbed navigation bar in Graphics and Multimedia
Navigation Bar that extends the length of the page in HTML and CSS

shanenin

Reputation Points: 10

Solved Threads: 17

Posting Whiz in Training

Offline

217 posts
since May 2005

Permalink

Sep 23rd, 2006

Re: css to make navigation bar

Click to Expand / Collapse Quote 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
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>

narsto

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

9 posts
since Sep 2006

Permalink

Sep 23rd, 2006

Re: css to make navigation bar

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

shanenin

Reputation Points: 10

Solved Threads: 17

Posting Whiz in Training

Offline

217 posts
since May 2005

Permalink

Sep 23rd, 2006

Re: css to make navigation bar

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.

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

Permalink

Sep 23rd, 2006

Re: css to make navigation bar

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.

azoapes

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

2 posts
since Sep 2006

Permalink

Sep 23rd, 2006

Re: css to make navigation bar

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

shanenin

Reputation Points: 10

Solved Threads: 17

Posting Whiz in Training

Offline

217 posts
since May 2005

Permalink

Oct 14th, 2006

Re: css to make navigation bar

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

vishesh

Reputation Points: 85

Solved Threads: 42

Nearly a Posting Virtuoso

Offline

1,362 posts
since Oct 2006

Permalink

Oct 16th, 2006

Re: css to make navigation bar

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.

FC Jamison

Team Colleague

Reputation Points: 92

Solved Threads: 21

Posting Pro in Training

Offline

436 posts
since Jun 2004

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Need help with table problem, urgent.

Next Thread in HTML and CSS Forum Timeline: HTML - Clickable Regions - help needed...

DaniWeb Message

Cancel Changes

User Name
Password