WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Header with two different images side by side. How to do it? (6 posts)

  1. giovanealex
    Member
    Posted 7 years ago #

    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!

  2. vkaryl
    Member
    Posted 7 years ago #

    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....

  3. giovanealex
    Member
    Posted 7 years ago #

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

  4. giovanealex
    Member
    Posted 7 years ago #

    Hey! I´ve got it!
    Thanks very very much!!! ;)

  5. vkaryl
    Member
    Posted 7 years ago #

    Glad to hear it's sorted. Happy holidays!

  6. Podchef
    Member
    Posted 7 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic