•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 426,575 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 1,658 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 7629 | Replies: 7
 |
•
•
Join Date: May 2005
Posts: 215
Reputation: 
Rep Power: 4
Solved Threads: 0
Posting Whiz in Training
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> In a perfect world exceptions would not be needed.
•
•
Join Date: Sep 2006
Posts: 9
Reputation:
Rep Power: 0
Solved Threads: 1
Newbie Poster
Re: css to make navigation bar •
•
•
•
Originally Posted by shanenin 
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; 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>
<!-- set ul margin to 0 -->
•
•
Join Date: May 2005
Posts: 215
Reputation:
Rep Power: 4
Solved Threads: 0
Posting Whiz in Training
I tried that, but does not seem to have any effect. I still am about 6 characters from the left margin.
In a perfect world exceptions would not be needed.
•
•
Join Date: Dec 2004
Posts: 1,590
Reputation:
Rep Power: 7
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.
•
•
Join Date: Sep 2006
Posts: 2
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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.
•
•
Join Date: May 2005
Posts: 215
Reputation:
Rep Power: 4
Solved Threads: 0
Posting Whiz in Training
Thanks for the help. I did not even think to check the padding property.
In a perfect world exceptions would not be needed.
•
•
Join Date: Oct 2006
Location: India
Posts: 1,289
Reputation:
Rep Power: 5
Solved Threads: 32
be careful with margin and padding property and try with different browsers.
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- Photoshop: create a tabbed navigation bar (Web Design Tutorials)
- 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...
