SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Beijing
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry CSS:How to style the same elemet in different pages?

    As you'll see, I'm new to css. So,don't laugh.

    I have one question which hasnít been mentioned by anybody in internet:

    Thereís only one style sheet for a website, and an element will be used in different places of different pages. How would you master the style of this element? For example, thereís a picture. Itís on top-left in page 1, then on top-right in page 2, and it will change to be in the center in page 3. Would anybody suggest something to handle it?

    Thanks!

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are two different ways you can handle this.

    Method 1
    ---------

    Give the image a different class or id, depending on where it will be on the page. So on page 1 it will be <img class="topleft" src="pic.gif" />, on page 2 the clas will be "topright", and so on. Style each img.class differently in the CSS file.

    Method 2
    ---------

    Give the image a unique class or id that is consistent on all pages, but give different pages their own class (or id) to target images within that page. So on page 1, use <body class="topleft">; in the page, you would have your image <img class="pic" src="pic.gif" />. The CSS would therefore be body.topleft img.pic { style rules here; } You would simply give different classes (or ids) to each page, depending on where the image (or other elements) are to appear.



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
  •