Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorhayds
    • CommentTimeJan 24th 2006
     permalink
    hi there

    Is there a way to get different header images to display when you are in different sections of your website. Basically what you see in PIXELDEN’s site. Without making a new stylesheet for every subdirectory?

    Thank you for any help.
    •  
      CommentAuthornifkin
    • CommentTimeJan 24th 2006
     permalink
    if you're using CSS to apply the header images you can apply a class or id to the body of your html page.

    <body class="contactus">
    <div class="header"> </div>


    ...

    body.contactus div.header { background-image:url(whatever); }
    body.hotmonkeypr0n div.header { background-image:url(whatever2); }
  1.  permalink
    My thoughts exactly; although I would suggest an ID rather than a Class since the page type would most likely only be specified once.
    •  
      CommentAuthorJJenZz
    • CommentTimeJan 24th 2006 edited
     permalink
    <div class="header contact"> </div>
    ...
    body div.header { /* properties for all headers */ }
    body div.contact { /* properties unique to contact header */ }


    would work too
    • CommentAuthormatthewv
    • CommentTimeJan 24th 2006
     permalink
    I would have each header like this

    <div id="header" class="home></div>

    and then change the class for each page.. so you would have all the size/placement etc styles applied to #header

    and change the background for each class..

    makes cleaner css code that way as well.. and you wont be repeating code
    • CommentAuthorspyyddir
    • CommentTimeJan 24th 2006
     permalink
    +1 vote for id applied to body
    • CommentAuthorhayds
    • CommentTimeJan 25th 2006
     permalink
    Thanks so much!
    • CommentAuthorDunk Ra
    • CommentTimeJan 25th 2006
     permalink
    I'd use the <body id="ThisSection"> technique, but they would all do the job.

    Which makes the most sense / is the most efficient though??
    • CommentAuthordanburzo
    • CommentTimeJan 28th 2006 edited
     permalink
    in terms of efficiency, and id or class applied to the page body is the most appropriate. If you were to also change the picture for the footer on every page, then you would not have to modify the html code, as you could address different elements from css like so:

    #mypage #header
    #mypage #footer
    ...


    whereas if you were to apply the class/id directly to the header, you would have to write additional code to style the footer.

    There are no real differences in using id or class to adress the page body. Thinking about semantics, i'd go with class because most of the time you need it to denote a certain type of page (article page, contact page, category page etc) rather than a specific page.
  2.  permalink
    Um, guys, what do you think header elements are for?

    <div class/id="header" /> is stupid. They don't look any different than regular text, unstyled, and you're abusing divisions. You even named the class/id header so you realize that they're headers.

    Nifkin, don't put blank values (or spaces in your case) inside header elements just because you're going to image-replace it. Screen readers and people with styles off won't see anything.
    JJenZz and matthewv, using divisions is incorrect and using classes and ids is redundant.
    Applying a body ID is redundant as you still need to apply a class/id on the division the way you have it setup.

    The correct way, is,

    <h2 id="about">About Me</h2>
    <h2 id="projects">Projects</h2>

    Then apply some method of sIFR, or FIR.
    •  
      CommentAuthornifkin
    • CommentTimeJan 30th 2006
     permalink
    Nifkin, don't put blank values (or spaces in your case) inside header elements just because you're going to image-replace it. Screen readers and people with styles off won't see anything.

    I'm being called out over 6 seconds worth of sample code used on a forum. Right. I'm not retarded, thanks.
  3.  permalink
    It was simply a suggestion. I can only work with what you give me.
    • CommentAuthorspyyddir
    • CommentTimeJan 31st 2006
     permalink
    Nick: We get it, we don't write the most semantic code. Maybe you should make a topic about your take on it. Its just getting a little annoying that you constantly berate everybody.

    I definatly apprecriate the input, semantics is important, but you may taking it a little too far.
    • CommentAuthorSlaker
    • CommentTimeFeb 2nd 2006 edited
     permalink
    If you have pages like: "http://www.example.com/?id=blah" you can do something like this:

    <?php
    $page = $_GET['id'];
    if($page=="blah"){
    echo '<img src="specific_image.jpg" />';
    }else{
    echo '<img src="other_image.jpg" />';
    }
    ?>

    Just a thought, but if you don't want to use php or if you don't understand it, that's okay.
Add your comments
    Username Password
  • Format comments as (Help)