SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    style a particular page sidebar

    How do i get the sidebar on this homepage to be a fixed hight without the hight being fixed on any other of the pages?

    so far I've tried: .home page page-id-2.sidebar { height: 500px; } but that hasn't worked

    http://79.170.40.244/healthmeanswealth.co.uk/

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Give the home page a unique Id on the body tag and say #home #sidebar yada

  3. #3
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ok do I change the current id's the home page has or add another id? I notice some things have mulitple id's and classes is this ok then?

    oh and is the current id not unique?

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    You can just keep that one if its unique to its page. You can't have two ids on the same tag. You can have a id and a class. Or multiple classes.

  5. #5
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    so if I can use the one already there what's wrong withthe one i'm doing here:

    .home page page-id-2.sidebar { height: 500px; }

    have I done that wrone? I notice there's spaces between home page page-id should I only use one or is that all one class?

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Just use one. A id or a class. No need to specify both. #id #sidebar {...}

  7. #7
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    but if I only use #sidebar it will give a height to all of the sodebars in my site and if I only use #home page id it will not give a hight to the sidebar on the home page. I need to know how to correctly reference the sidebar on my home page only and using:

    .home page page-id-2.sidebar { height: 500px; } didn't work

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Lol. If the home page is the only one with let's say #home on the body tag then no, no other page will use this css rule...

    #home #sidebar {...}

    Yours example is not valid. The classes need a preseeding dot. If its two classes then it looks like .class1.class2 {...}

  9. #9
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PicnicTutorials View Post
    Lol. If the home page is the only one with let's say #home on the body tag then no, no other page will use this css rule...

    #home #sidebar {...}

    Yours example is not valid. The classes need a preseeding dot. If its two classes then it looks like .class1.class2 {...}
    the body tag is like this:

    <body class="home page page-id-2 page-template-default logged-in admin-bar customize-support" id="ls-global"

    so what should my css rule be? I'm still confused

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    #is-global #sidebar

  11. #11
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    yea that one worked, so would that one be used because it is the id rather than using the classes tjat come before it? I mean in future do I just look for the id that is above the class that I want to change?

    thanks for your help

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    <body class="home page page-id-2 page-template-default logged-in admin-bar customize-support" id="ls-global">

    hantaah,

    The body tag shown above has 7 classes and 1 ID. Which do you think would identify that page uniquely? It should be the ID. If other pages use that same ID (the name suggests that they could), then you will have to create a unique classname instead and add it to the list ("unique" meaning one that is not used on any other page). Uniqueness, one-of-a-kind, is the objective.

    The correct way to list a unique group of classes in css is to separate them with dots. For example, the above body tag might be identifiable by listing several of its classes:
    Code:
    .home.page.page-id-2.page-template-default.logged-in.admin-bar.customize-support {}
    (Note the absence of spaces in the css address.)

    This means that ALL of those classes must exist to target the tag that they belong to; in this case, the body tag.
    Last edited by ronpat; Jul 5, 2013 at 13:58. Reason: Added "how to list multiple classes in css"


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
  •