| | |
css to make navigation bar
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
•
•
Join Date: May 2005
Posts: 215
Reputation:
Solved Threads: 16
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>
In a perfect world exceptions would not be needed.
•
•
Join Date: Sep 2006
Posts: 9
Reputation:
Solved Threads: 1
•
•
•
•
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>
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation:
Solved Threads: 35
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.
![]() |
Similar Threads
- Tutorial: Photoshop: create a tabbed navigation bar (Graphics and Multimedia)
- Navigation Bar that extends the length of the page (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: Need help with table problem, urgent.
- Next Thread: HTML - Clickable Regions - help needed...
| Thread Tools | Search this Thread |
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7






