Recommended Posts

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>

Link to post
Share on other sites

 ul { float: left;
list-style-type: none;
margin-left: 0;
padding-left: 0;
}

Incidentally, I highly recommend using the Firefox/Mozilla DOM Inspector. The 'computed style' display is great for tracking down issues like this. If you inspect your example you should see that Firefox sets padding-left: 40px for ul by default. (It doesn't touch the margin but margin-left: 40px is used in the W3C sample CSS for HTML. Better safe than sorry.)

Edited by jcl
Link to post
Share on other sites

The more I do this the more I realize, I am overwelmed. I have been just practicing making a site for my wifes salon. I learn best by doing. I would like to be able to add a fixed width of 152px to each link in the nav bar. No matter where I add a width property, it does not seem to have any effect. I have looked at other examples where the added the width property to the "a" element, but that is not working for me.

here is the site

http://brighteyedcomputer.com/websites/test.html

edit added later//

the sight(logo) will not render properly in IE becuase of transparancy. This is more of just a learring exercise.

Edited by shanenin
Link to post
Share on other sites

you say inline elements can't have a width property set. My understaning is the "a"(anchor) is an inline element. Then why does the width property work with this example?

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type: none;
}
a
{
float:left;
width: 152px;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:blue}
li {display:inline;}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<p>
In the example above, we let the ul element and the a element float to the left.
The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
</p>

</body>
</html

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...