WordPress.org

Support

Support » Themes and Templates » [Resolved] Header with two different images side by side. How to do it?

[Resolved] Header with two different images side by side. How to do it?

  • Hi!

    I´m testing a new theme on my blog. The header of the theme was originally only one, but I wanna put two images side by side: the first one with the logo and the second one with a random image (using image rotator script).
    The problem is that I´ve already messed through the stylesheet and I simply did not find a way to put them side by side. They usually stay like that (see the screenshot, please):

    http://img368.imageshack.us/img368/893/header01vz0.jpg

    The code is the following:

    #headerpic01
    {
    position: relative;
    width: 193px;
    height: 200px;
    background: #fff url(images/bg_01.gif) no-repeat;
    margin-bottom: 2px;
    }

    #headerpic02
    {
    margin-left: 193px;
    position: relative;
    height: 200px;
    background: #fff url(images/headers/rotator.php) no-repeat;
    margin-bottom: 2px;
    }
    Can someone help me, please?

    Thanks a lot!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Well, offhand I can think of one way to do it: you can make an overall header div which is the full height and width of the combined images; then you include within the header div a div for headerlogo which is positioned 0% 0% (that is, left top); and a div for headerrotate which is positioned 100% 0% (that is, right top).

    Now, I haven’t tried this, but in theory it should work. You might have to do some “display:inline” stuff in the css….

    Thanks a lot for the reply, but I did not figure how to do that exactly. Can someone be more specific?

    Hey! I´ve got it!
    Thanks very very much!!! 😉

    Glad to hear it’s sorted. Happy holidays!

    Hey. . .Wait. . .I’m in this same boat, but clueless as to how to resolve it.
    I’ve got: #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%
    }

    and I need to add another image on the right–about a 400X200 one and I need to call it from the header.php:
    <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>
    </div>
    </div>

    Can anyone help me figure out where to fit in the second image and how to call it in the header? I’ve spent hours screwing around on this and it’s doing my head in. Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Resolved] Header with two different images side by side. How to do it?’ is closed to new replies.