Two Images in Header Div

  • 4evrblu

    (@4evrblu)


    19 years, 4 months ago

    at http://totalphysiqueonline.com/ I have one image in the div id called HEADER. It is called header.jpg and resides under the control of my CSS sheet. It is located bottom right of the Div and the css style is :

    #header {
    background:#000000 url(“images/header.jpg”) bottom right no-repeat;
    height:191px;
    font-family: Trebuchet MS, verdana, arial, sans-serif; color:#fee;
    }
    I would like a second image to appear within the same DIV tag, but I do not know how to do it. The second image is sistine-chapel2.jpg and I want it to reside behind the title and discription. Is there a way to do this?

    The code in header.php that currently controls that area is this:

    <div id=”header”><h1>“><?php bloginfo(‘name’); ?></h1><span><?php bloginfo(‘description’); ?></span></div>

    Any solution to this?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter 4evrblu

    (@4evrblu)

    19 years, 4 months ago

    Update:

    I created a new id in my styles called headermain

    #headermain {
    background:#000000 url(“images/sistine-chapel2.jpg”) bottom left no-repeat;
    height:191px;
    font-family: Trebuchet MS, verdana, arial, sans-serif;
    color:#fee;
    }

    #header {
    background:#000000 url(“images/header.jpg”) bottom right no-repeat;
    height:191px;
    font-family: Trebuchet MS, verdana, arial, sans-serif;
    color:#fee;
    }

    Then I created this:

    <div id=”headermain”>
    <div id=”header”><h1>“><?php bloginfo(‘name’); ?></h1><span><?php bloginfo(‘description’); ?></span></div>
    </div>

    This did not break the code, and it still validates, but headermain appears to be inert, It does nothing. Have I nested it wrong?

    undertypo

    (@undertypo)

    19 years, 4 months ago

    I think make some background for the h1.
    Put the </h1> after the </span>

    Then declare the H1 background in css like this

    #header h1 { background:url(image location) no-repeat center; }

    Is it ok?

    Thread Starter 4evrblu

    (@4evrblu)

    19 years, 4 months ago

    I will try it

    Thread Starter 4evrblu

    (@4evrblu)

    19 years, 4 months ago

    Innerwestink results.

    I added some changes to my CSS like so:

    #header h1 {
    padding:0 0 0 0;
    margin: 0 0 0 5%;
    background:url(“images/sistine-chapel2.jpg”) bottom left no-repeat;
    position:relative;
    left:0px;
    top:0px;
    width:315px;
    height:150px;
    }

    In Safari, the new image displays, but not in FIrefox or Opera.

    Well, for some reason the jpg was not showing up in FF or Opera. I have no idea why. So, I made it a GIF, which i hate, but at least its there:)

    http://totalphysiqueonline.com/ see for yourself

    My Description is now out of whack though. I want to slide over to the left side of the picture (sistine) so it clears the two buttons there.

    In Safari, I use Margins:

    #header span {
    font-size:1em;
    margin: 5px 0 0 20%; float: left;
    }

    seems to work for Safari,

    but not for FF and Opera. What value or parameter could I use in CSS that would be control placement of description?

    Thread Starter 4evrblu

    (@4evrblu)

    19 years, 4 months ago

    OK, here is a final report for anyone who wants to know how I did this.

    Undertypo was good to suggest a background image for the H1 tag. So I took that route. That was great advice.

    I edited and added the following tags to my css file:

    #header {
    background:#000000 url(“images/header.jpg”) bottom right no-repeat;
    height:191px;
    font-family: Trebuchet MS, verdana, arial, sans-serif;
    color:#fee;
    }

    #header h1 {
    padding:0 0 0 0;
    margin: 0 0 0 5%;
    background:url(“images/sistine-chapel2.jpg”) bottom left no-repeat;
    position:relative;
    left:0px;
    top:5px;
    width:315px;
    height:150px;
    }

    #header span {
    font-size:1em;
    margin: 5px 0 0 170px; float: left;
    }

    The span USE to say :

    #header span {
    font-size:1em;
    margin: 5px 0 0 18%; float: left;
    }

    But Firefox did not like the margins in non-integers. So I changed it to

    #header span {
    font-size:1em;
    margin: 5px 0 0 170px; float: left;
    }

    Now FF and Opera display the discription where I want it, and I also re-made the image into a jpg and resaved and uploaded it. I just hate GIF format.

    So the result is good I think.

    What do you peeps think?

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

The topic ‘Two Images in Header Div’ is closed to new replies.

Tags