Help With Multiple Attributes

Discussion in 'CSS' started by gobbly2100, Nov 9, 2007.

  1. #1
    Hey,

    I have some paragraphs in my main content and footer but I want them do have different values, this is what I have:

    #content p {
    	margin-bottom: 15px;
    	font-size: 13px;
    	color: #f5f5f5;
    }
    
    #footer p {
    	margin-bottom: 5px;
    	font-size: 13px;
    	color: #f5f5f5;
    }
    Code (markup):
    The problem is that it only seems to take the values of the content paragraphs, why is it not displaying different in the footer?

    Here is the site: Artist Management

    You can see the footer is using the 15px margin like the content is and I want them to be different.

    Thanks in advance!
     
    gobbly2100, Nov 9, 2007 IP
  2. le_gber

    le_gber Peon

    Messages:
    28
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I've simplified your stylesheet:

    I removed the line-height 80px in the footer, removed all the padding:0px and margin:0px as your first style does all this for you and simplified the margin-left:auto margin-right:auto into margin:0 auto; (0 for top and bottom and auto for left and right)

    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background-color: #600;
    	font-family: Tahoma, Geneva, sans-serif;
    }
    
    #wrapper {
    	width: 900px;
    	margin: 0 auto;
    
    }
    
    #header {
    	width: 900px;
    	height: 100px;
    	background-image: url(/images/header_bg.gif);
    	background-repeat: repeat-x;	
    }
    
    #content {
    	width: 890px;
    	background-color: #4e0a0a;
    	padding: 5px;
    }
    
    #footer {
    	width: 900px;
    	text-align: center;
            margin: 0 auto;
    	clear: both;
    }
    
    /* CSS Menu */
    ul#navigation {
    margin:0 auto;
    	background-color: #000;
    	color: #fff;
    	width: 900px;
    	height: 30px;
    	clear:both;
    }
    ul#navigation li { 
    	display: inline;
    }
    ul#navigation li a {
      padding: 4px 12px 6px 12px;
      color: #fff;
      background-color: #000;
      text-decoration: none;
      float: left;
    }
    
    ul#navigation li a:hover {
    	background-color: #930000;
    	color: #fff;
    	text-decoration: none;
    }
    
    /*HEADINGS*/
    h1 {
    	color: #e8e8e8;
    	font-size:20px;
    	margin-bottom: 10px;
    }
    
    #content p {
    	margin-bottom: 15px;
    	font-size: 13px;
    	color: #f5f5f5;
    }
    
    #footer p {
    	margin-bottom: 5px;
    	font-size: 13px;
    	color: #f5f5f5;
    }
    
    Code (markup):
     
    le_gber, Nov 10, 2007 IP
  3. gobbly2100

    gobbly2100 Banned

    Messages:
    906
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Oh awesome thank you, I see where my footer was messing up now, the line height.

    Thanks again!
     
    gobbly2100, Nov 10, 2007 IP
  4. le_gber

    le_gber Peon

    Messages:
    28
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi gobbly2100

    yes it was that's why I removed it :)
     
    le_gber, Nov 11, 2007 IP