SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member tekkie's Avatar
    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
    Attached Files Attached Files

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 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;
    }
    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
    Last edited by markbrown4; Sep 12, 2007 at 23:04.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •