Just a little more help on getting rid of tables

[tekkie]

Just having a little trouble getting the margins just right now that I've taken out the tables and used just CSS.
http://www.techsuitesolutions.com/dev/money/
I'd like to get a little padding around the text in the main white content area but when I try to add padding to id=main, the main area sticks out too far on the right side. I'd also like to put some space around "Shell Tain, Professional Certified Coach" andbring the list of nav items over to the left a bit. I've attached the style sheet (as a txt file).

Thanks!
Becky

[markbrown4]

Hi Becky,

Your doing very well for someone new to CSS, a couple of things:

- All you need to do to center an element with CSS is to give it a width and set it's margin-left and margin-right to 'auto'.
The first selector in the CSS below is called the universal selector - It selects every element. That rule removes all default margin and padding on every element to give you a solid place to start.
You don't need to use <br> to space things out - can you remove all these the #nav and well space things out with margin / padding instead.
Also remove all of those empty paragraphs around your menu items, it's invalid
You shouldn't use px for font-size, IE6< users cannot resize the text in the browser if it's in pixels, use em's or percentages instead.
The things I have changed have different indenting.

* {
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, p {
  padding-bottom: .5em;
  line-height: 1.4em
}
body {
  background: #CCC;
  font-size: 100%;
}
#wrapper {
	color: black;
  width: 780px;
  margin: 0 auto;
}
#header {
	background-color: #543d83;
	padding-bottom: 20px;
}
.byline {  
	font-family: 'Century Gothic', Tahoma, san-serif; 
  font-size: 1em; 
	font-weight: bold; 
	color: #FFFFFF;
	padding-left:200px;
}
#nav  {
	background-color: #d2c1a2;
	width: 180px;
	float: right;
  margin: -60px 30px 20px 20px;
	font-family: Tahoma, Verdana, san-serif;
  font-size: .9em;
	font-weight: bold;
	font: italic;
	color: #543d83;
	text-align: left;
  padding-bottom: 20px;
}
#nav li {
  padding: 1em 0 0 1em;
}
a:link	{
	color: #ffffff;
	text-decoration:none;
}
a:visited {
	color: #ffffff;
	text-decoration:none;
}
a:hover	{
	color: #ffffff;
	text-decoration:underline;
}
ul li a:link {
	color: #543d83;
	text-decoration: none;
}
ul li a:visited {
	color: #543d83;
	text-decoration: none;
}
ul li a:hover {
	color: #ffffff;
	text-decoration: underline;
}
#main {
	background-color: #FFFFFF;
  padding: 20px;
	font-family: 'Century Gothic', Tahoma, san-serif; 
  font-size: .8em; 
	color: #666666;
	
}
#footer {
	background-color: #543d83;
	padding: 5px 0;
	font-family: Tahoma, Verdana, san-serif;
  font-size: .7em;
	color: #FFFFFF;
	text-align: center;
}
hr  {
    color: #543d83;
}
.title {  
	font-family: 'Century Gothic', Tahoma, san-serif; 
  font-size: .8em; 
	font-weight: bold; 
	color: #543d83;
}

ul {
    list-style-type: none;
}

Because all the margin / padding is reset - you may need to put it back on some elements, like I have done for the headings and paragraphs near the top of the CSS.

I would also recommend using a image replacement technique for you main heading.
http://www.pmob.co.uk/temp/headerreplacement3.htm

Hope it helps