SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Quick Question

  1. #1
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,369
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Quick Question

    Quick panicky CSS question. How do I get the same CSS code to do different things on different pages.
    I have a copyright notice that I want positioned differently on different pages on the same website. I have the .csstag on the same css page for all the different pages.
    I think I need to make it #thecss tag like this for it to do different thing... but this is where I get confused.

    Okay, I need help.
    Thanks
    PAGE HERE

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    You can put a different class on the body element of each page. So, for example, on the About page you could do this:

    <body class="about">

    Then, in your CSS, instead of something like this:

    Code:
    .notice {position: abc}
    you could have this:

    Code:
    .about .notice {position: xyz}
    
    .contact .notice {position: ijk}
    
    .home .notice {position: efg}

  3. #3
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,369
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You can put a different class on the body element of each page. So, for example, on the About page you could do this:

    <body class="about">

    Then, in your CSS, instead of something like this:

    Code:
    .notice {position: abc}
    you could have this:

    Code:
    .about .notice {position: xyz}
    
    .contact .notice {position: ijk}
    
    .home .notice {position: efg}
    I think I get it. Thanks makes sense. So, if I have a .copyright div on the portfolio page and the contact us page, I can do .copyright_portfolio and .copyright_contact us. Is that what you're talking about?
    Thanks for your help.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Another Designer View Post
    So, if I have a .copyright div on the portfolio page and the contact us page, I can do .copyright_portfolio and .copyright_contact us. Is that what you're talking about?
    You could do that, but it's not quite what I meant.

    Let's say you have a div on both pages with a class of .copyright. Even though you want those two divs to be slightly diffenrent on each page, presumably they have some characteristics in common. So you really just want one rule in your CSS for that. E.g.

    Code:
    .copyright {
      styles shared by all copyright boxes
    }
    But say that you want a different background color for the copyright box on the About page. What you can do is put a class of "about" on your body tag on that page:

    <body class="about">

    and then in your style sheet just specify a different background color for the copyright box on that page, by having a rule like this:

    Code:
    .about .copyright {
      background: red;
    }
    So you haven't repeated all of the common copyright styles, but just targeted the special styles for the .about page.

    Does that makes sense?


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
  •