• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2290
  • Last Modified:

CSS Menu Left Padding

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
jset_expert
Asked:
jset_expert
  • 3
  • 3
1 Solution
 
B_DorseyCommented:

add "margin-left:0px" to "#navlist li"
0
 
jset_expertAuthor Commented:
Tried that already....doesn't seem to work???

I also tried "margin-left:-30px" but it puts all links 30px to the left.
0
 
B_DorseyCommented:
get rid of width:100px?
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
jset_expertAuthor Commented:
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
 
B_DorseyCommented:
try changing #navlist ul to just #navlist
0
 
jset_expertAuthor Commented:
hey, that did the trick!

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now