DaniWeb IT Discussion Community - css to make navigation bar

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/)

- HTML and CSS (http://www.daniweb.com/forums/forum143.html)

- - css to make navigation bar (http://www.daniweb.com/forums/thread55932.html)

shanenin

Sep 22nd, 2006 9:51 pm

css to make navigation bar

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>

  <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>

narsto

Sep 22nd, 2006 11:08 pm

Re: css to make navigation bar

Quote:

Originally Posted by shanenin (Post 255607)

<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>

shanenin

Sep 22nd, 2006 11:38 pm

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.

tgreer

Sep 23rd, 2006 1:27 am

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.

azoapes

Sep 23rd, 2006 6:09 am

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.

shanenin

Sep 23rd, 2006 10:09 am

Re: css to make navigation bar

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

vishesh

Oct 14th, 2006 6:21 am

Re: css to make navigation bar

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

FC Jamison

Oct 16th, 2006 4:30 pm

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.

All times are GMT -4. The time now is 9:12 am.