shanenin Posted September 23, 2006 Report Share Posted September 23, 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<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> Quote Link to post Share on other sites
jcl Posted September 23, 2006 Report Share Posted September 23, 2006 (edited) 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 September 23, 2006 by jcl Quote Link to post Share on other sites
shanenin Posted September 23, 2006 Author Report Share Posted September 23, 2006 Thanks, so much to learn. Quote Link to post Share on other sites
shanenin Posted September 24, 2006 Author Report Share Posted September 24, 2006 (edited) 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 sitehttp://brighteyedcomputer.com/websites/test.htmledit added later//the sight(logo) will not render properly in IE becuase of transparancy. This is more of just a learring exercise. Edited September 24, 2006 by shanenin Quote Link to post Share on other sites
jcl Posted September 24, 2006 Report Share Posted September 24, 2006 width doesn't apply to inline elements. I don't have any suggestions but I'll think about it. Quote Link to post Share on other sites
shanenin Posted September 24, 2006 Author Report Share Posted September 24, 2006 Ah, now i don't have to go insane not getting why it was not working. Thanks :-) Quote Link to post Share on other sites
shanenin Posted September 24, 2006 Author Report Share Posted September 24, 2006 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 Quote Link to post Share on other sites
jcl Posted September 24, 2006 Report Share Posted September 24, 2006 (edited) Floating an inline element transforms it into a block element. Edited September 24, 2006 by jcl Quote Link to post Share on other sites
shanenin Posted September 24, 2006 Author Report Share Posted September 24, 2006 Thanks. i will experiment with this new found information. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.