Solved

CSS Menu Left Padding

Posted on 2007-11-28
6
2,270 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
  • 3
  • 3
6 Comments
 
LVL 14

Expert Comment

by:B_Dorsey
Comment Utility

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

Author Comment

by:jset_expert
Comment Utility
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
Comment Utility
get rid of width:100px?
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 1

Author Comment

by:jset_expert
Comment Utility
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
Comment Utility
try changing #navlist ul to just #navlist
0
 
LVL 1

Author Comment

by:jset_expert
Comment Utility
hey, that did the trick!

0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …

728 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now