Two images in header

  • I’m trying to get two images in a header, but can’t seem to get css and php to play well together.

    Can any one suggest a possible solution, in non-technical terms?

    If poss. I’d like one of the images to be able to rotate, either randomly or on a fixed schedual–like 4 seasons. . .But that is probably too much to ask and the risk of breaking the template i’m modding is probably too great.

    I’ve managed to solve most of the other probs with this setup i’m working on but the 2 images thing has me loosing sleep before the deadline.

    Here’s the site I’m working on: https://ourladyoftherock.com
    the second image wants to be on the right under the search bar.

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

  • PHP shouldn’t play a part of this.

    I would create structure something like
    <div id=”header”>
    <div id=”headerimg1″></div>
    <h1>Title</h1>
    <h2>tagLine</h2>
    <div id=”headerimg2>include search</div>
    </div>

    then float the headerimg1 to the left,
    and float the headerimg2 to the right.
    Just make sure the height of the second image is short enough for the search box.

    Then set the images as the backgrounds for each div.

    You may need to adjust the margin and padding for #header h1 and #header h2 to fit between the images.

    Thread Starter podchef

    (@podchef)

    That sounds great, and do-able, but I’m not quite sure how to make it fit in with this in the header:
    <div id="header">
    <div id="headerimg">
    <div id="searchdiv">
    <?php include (TEMPLATEPATH . '/searchform.php'); ?>
    </div>
    <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
    <div class="description"><?php bloginfo('description'); ?></div>

    Calling up this in the css:

    #headerimg {
    padding-left: 180px;
    margin: 3px;
    height: 250px;
    border-bottom: 1px solid #061506;
    font-family: verdana, arial, sans-serif;
    color: #fff;
    font-size:150%;
    font-weight:bold;
    background: #061506 url("images/icon.jpg") no-repeat left;
    background-position: 1%

    I tried to add an #headerimg02 to the css and call it in the header.php, but couldn’t swing it without wiping everything out. I’m seriously modding this template, so each thing I tinker with throws lots of stuff off.

    Thanks again for any help.

    I think you are going to have to scrap the existing header code and CSS, and create your own, thus my suggestion. Unfortunately, I don’t have to time to completely write it for you, you’ll need to do a little leg work yourself, but my framework *should* work….

    Thread Starter podchef

    (@podchef)

    Hey, thanks for the help.

    It took 4 hours of messing, but I finally implimented something along the lines of what you suggested. The search bar cuts into the image at the moment, but I might tweak with that.
    I actually had to call 3 images for the head to look the way it was–the icon left image; the black background; and the right photo. I even got a rotate script to change the second image on reload.

    Now I just have to get back my page links list, which I had to pull because it wouldn’t sit in the black area between the photos under the blog name. Any ideas?

    Thanks a million! Happy New Year!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Two images in header’ is closed to new replies.