Solved

CSS Menu Left Padding

Posted on 2007-11-28
6
2,275 Views
Last Modified: 2011-09-20
Hi,
I am using the List-o-Rama to get me started with CSS nav - which uses UL/LI -- however this makes the whole navigation indent in, a gap which I want to get rid of.

How can I get my UL/LI, or whole container, to left align?

Below is my code;
/* CSS Document */
 
#navlist ul
{
	border: 0;
	margin: 0;
  	padding: 0;
	list-style-type: none;
}
 
#navlist li
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-align: center;		
	text-decoration:none;
	display: inline;
	float:left;
	width: 100px;
	vertical-align:middle;
 	color: #999999;
	padding: 5px;
	
	background-color:#FF00FF;
}
 
#navlist a { 
	
}
 
#navlist a:link, #navlist a:visited
{
	color: #999999;
	text-decoration: none;
}
 
#navlist a:hover
{
	color: #99CCFF;
	text-decoration: none;
}
 
 
 
--------------------------------
//THIS IS THE HTML
--------------------------------
  <tr bgcolor="#EEEEEE">
    <td colspan="2">
     <div id="navcontainer2">
	<ul id="navlist">
		<li><a href="index.php" title="home">home</a></li>
		<li><a href="products.php" title="products">products</a></li>
		<li><a href="myAccount.php" title="my account">my account</a></li>
		<li><a href="about.php" title="about">about</a></li>
		<li><a href="contact.php" title="contact">contact</a></li>
	</ul>
     </div>
 
  </td>
  </tr>

Open in new window

0
Comment
Question by:jset_expert
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 14

Expert Comment

by:B_Dorsey
ID: 20369807

add "margin-left:0px" to "#navlist li"
0
 
LVL 1

Author Comment

by:jset_expert
ID: 20369853
Tried that already....doesn't seem to work???

I also tried "margin-left:-30px" but it puts all links 30px to the left.
0
 
LVL 14

Expert Comment

by:B_Dorsey
ID: 20370452
get rid of width:100px?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:jset_expert
ID: 20370483
No that won't work. The space to the left is in addition to the 100px.

As you can see from the code, I have see the background color of the button to pink. The space to the left is grey (background color of the cell).

I'm pretty sure it has something to do with using a bulleted list, but I not sure how to fix it!
0
 
LVL 14

Accepted Solution

by:
B_Dorsey earned 200 total points
ID: 20370596
try changing #navlist ul to just #navlist
0
 
LVL 1

Author Comment

by:jset_expert
ID: 20370704
hey, that did the trick!

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question