Jsheffers Posted January 17, 2009 Report Share Posted January 17, 2009 I have a list I am trying to display inline. Here is the code. Frames By OSWM DOS By Richard O Robinson Gears Of War By Richard O Robinson The Greener Side By Shane Jeffers Moment of Zen By One|Te Productions Add To The Garden It should have two lines of text for each link, and I want it to be horizontal. Here is my css for it. #navlist a { color: green; } #navlist { list-style-type: none; } #navlist li{ display: inline; } Thanks for any help. Quote Link to comment Share on other sites More sharing options...
newseed Posted January 17, 2009 Report Share Posted January 17, 2009 Try this: The HTML: ></pre> <ul id="navlist"> Frames By OSWM DOS By Richard O Robinson Gears Of War By Richard O Robinson The Greener Side By Shane Jeffers Moment of Zen By One|Te Productions Add To The Garden The only thing I did to the above code is remove the tags. Don't need if you set the to display block because you are defining an for each line you want. The CSS: #navlist { list-style: none; } #navlist li { display: inline; float: left; } #navlist li a { color: green; display: block; padding: 3px 15px; margin: 0; } #navlist li a:hover { text-decoration: none; } Two important elements here is that I added float: left to the #navlist li and display: block to #navlist a. Of course I've added a bit of padding/margins to give it a nice look. Quote Link to comment Share on other sites More sharing options...
Jsheffers Posted January 18, 2009 Author Report Share Posted January 18, 2009 Try this: The HTML: ></pre> <ul> Frames By OSWM DOS By Richard O Robinson Gears Of War By Richard O Robinson The Greener Side By Shane Jeffers Moment of Zen By One|Te Productions Add To The Garden The only thing I did to the above code is remove the tags. Don't need if you set the to display block because you are defining an for each line you want. The CSS: #navlist { list-style: none; } #navlist li { display: inline; float: left; } #navlist li a { color: green; display: block; padding: 3px 15px; margin: 0; } #navlist li a:hover { text-decoration: none; } Two important elements here is that I added float: left to the #navlist li and display: block to #navlist a. Of course I've added a bit of padding/margins to give it a nice look. You are a life saver my friend. That also helps me understand CSS a little bit more. What exactly does display: block do? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 18, 2009 Report Share Posted January 18, 2009 This has a good description, just below the chart at the top of the page: http://www.quirksmode.org/css/display.html this might be useful as well: http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.3 Quote Link to comment Share on other sites More sharing options...
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.
Note: Your post will require moderator approval before it will be visible.