SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
-
Sep 12, 2007, 18:37 #1
- Join Date
- Mar 2001
- Location
- Portland, OR
- Posts
- 21
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Just a little more help on getting rid of tables
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
-
Sep 12, 2007, 20:05 #2
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
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.
Code:* { 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; }
I would also recommend using a image replacement technique for you main heading.
http://www.pmob.co.uk/temp/headerreplacement3.htm
Hope it helpsLast edited by markbrown4; Sep 12, 2007 at 23:04.
Bookmarks