Grow your CSS skills. Land your dream job.

css changes depending on file name???

  • # February 5, 2010 at 3:12 pm

    ok so here is my problem…. i am using wordpress as my cms, and on my home page I need the div id header’s position to be absolute, however on the rest of my pages I need the position to be relevant. I am not sure how i would go about doing that though. PHP maybe… but i am no expect on that. any ideas?????? :)

    # February 5, 2010 at 3:48 pm

    Give the html of your home page an id tag and then you can target the home page header without targeting the rest of the headers

    <html id="home-page">

    html#home-page div#header { position:absolute;}

    div#header { position:relative:}

    # February 5, 2010 at 3:54 pm

    It’s actually much more common to simply throw a class onto the body.

    You mention you’re using WordPress, which might mean that your <body> tag is in your header.php file, so you can’t simply add a hardcoded class to it.

    Fortunately, WP provides you with a function to put a class on the <body> tag!
    <body <?php body_class(); ?>>

    On each page it will spit out specific class names (in your case you’ll want to look for the page-id).

    # February 5, 2010 at 8:10 pm

    ok I did as you said… however for some reason its making the body class of blog… not sure why when its the home page…. anyways, that doesnt seem to be working, unless im doing something wrong. Its breaking my page wrap and leave as big hunk of white space at the top. heres the url http://27pixels.com the logo and nav are suppose to be floating on top of the slider. if you look at the about page http://27pixels.com/about/ it does as i want after following your direction. the text has moved down. am i doing something worng??

    # February 5, 2010 at 8:19 pm

    If you are talking about the large white gap of white between the slider (which I thought looked really nice by the way. Did you make that?) and the ‘pixels’ then that is because your ‘nav has a height of 160px and is pushing it down.

    # February 5, 2010 at 8:31 pm

    yes i did make it… i edit an existing jquery slider to make it larger. but the idea I am going for is to have the logo and nav on top of the slider. which is fine, until you run into the other pages… because then all the content seems to float over logo and nav… unless i make those relevant.

    # February 6, 2010 at 2:39 am

    got it working :) thanks

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".