SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with adding a class with a id tag

    I'm building a site where the displayed page title sits in a div tag that constrains the size and includes a background image. In the subpages, I want to change the background image and shorten the height of the div area. I'm using a class tag to make this change in the subpages. The problem I'm having is that the browsers (Safari and Firefox) seem to be ignoring the class tag. I cleared the cache for both, so the problem seems to be the way I coded it. Here's the code as it stands now:

    #contenthead {
    width:100%;
    background:#fff url(../graphics/back_top.jpg) no-repeat;
    padding:0;
    margin:0 0 10px 0;
    height:300px;
    }

    URL to view it in action: http://watermanfilters.com/toppage.htm

    here is how I added the class:

    #contenthead .opps {
    background:#fff url(../images/oppback.jpg) no-repeat;
    height:200px;
    }

    URL that isn't working the way I want it to:
    http://watermanfilters.com/opportunities.htm

  2. #2
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi whiteboxer,

    The correct code should be...

    Code:
    #contenthead.opps {
    background:#fff url(../images/oppback.jpg) no-repeat;
    height:200px;
    }
    Remove the space between 'contenthead' and '.opps'.

    With your previous statement you were saying "Anything within div#contenthead that has the class of 'opps' do...." what you want to say is "Anything with the id #contenthead AND the class of 'opps' do..."

    Andy

  3. #3
    SitePoint Enthusiast ComputerGuru247's Avatar
    Join Date
    Jul 2006
    Location
    Wisconsin
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yuck, dirty code.

    Preferred Code:
    Code:
    #contenthead.opps 
    {
     background:#ffffff;
     background-image:url(../images/oppback.jpg);
     background-repeat:no-repeat;
     height:200px;
    }
    This code is much cleaner and easier to read
    Bryan

    Breakpoint Designs - Web Design, Logos, and more!

  4. #4
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Each to their own

    I prefer the short hand version - wouldn't consider it dirty... if anything it's quicker to type!
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.


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
  •