Skip navigation
Currently Being Moderated

placing images on top of a div tag

Apr 10, 2013 10:55 PM

Hello Dreamweavers

 

Id like to know if how can I place an image in front,or should I say ontop of a div tag,for example

Ive made a div tag,and I would like an image of a logo to be in front of that div tag.

 

thank you.u2a.jpg

 
Replies
  • Currently Being Moderated
    Apr 10, 2013 11:35 PM   in reply to inquestflash

    You can. But I would think what the situation is first, before deploying a solution to use.

     

    What is going in the header <div> itself, apart from the logo?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 5:01 AM   in reply to inquestflash

    inquestflash wrote:

     

    Hi osgood.

     

    In the header i would have a background image of some sort. now you are going to tell me,why dont I place the logo on the banner

     

    No I was making sure there is no text in the header first.

     

    You can use an absolutely positioned <div>

     

    #header {

    position: relative;

    height: 220px; /*change height to the height of your bg image */

    }

     

    #logo {

    position: absolute;

    top: 10px;

    left: 30px;

    height: 200px; /*change height to the height of your logo image */

    width: 200px; /*change width to the width of your bg image */

    }

     

    Then just add the 'logo' <div> inside the 'header' <div> like below:

     

    <div id="header">

    <div id="logo">Logo goes here</div>

    </div><!-- end header -->

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 5:29 AM   in reply to inquestflash

    If you plan for some text, you could float the logo with suitable margins & padding.

     

    This would give you the result shown in picture below

     

    <style type="text/css">

    #header {

        background-color: #666;

        height: 150px;

        color: #fff;

        font-size: 18px;

        padding-top: 10px;

        padding-left: 20px;

    }

    .logofloat {

        float: right;

        margin-right: 20px;

        margin-top: 30px;

        margin-left: 50px;

    }

    </style>

    </head>

    <body>

    <div id="header">

    <img src="logo.gif" class="logofloat">

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    </div>

    </body>

    </html>

    tmp.jpg

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 11:24 PM   in reply to inquestflash

    inquestflash wrote:

     

    Hi osgood.

     

    I followed your instructions, here is how it turend out,is this correct?

     

    u2a23.jpg

    Yes, BUT you don't need the extra logo <div> in your code or 'logo goes here' text and you need to change the height and width of the logo <div> css to the same as your logo image.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 11:30 PM   in reply to inquestflash

    inquestflash wrote:

     

    Also what I would like to ask is, arent absolute positioned div forbiden,since they are mostly positioned in the left hand corner of a website?

     

    In this instance it is legitimate to use an absolutely positioned container as the logo is postioned in an area which can accommodate an absolutely positioned element without disrupting the construction. I would'nt recommend this method IF the design could not withstand it. But from what you have told me there will only be a background image in the header <div>

     

    I use ths method very very sparingly if I have a 'callout' box I need postioned over several other containers BUT here's the key it has to be used where it can accomodate any text enlargement in a users browser.

     

    The really correct way to do this is to use floats as Ken has suggested in his post BUT I make exceptions to the rules if they can be broken without incurring any problems.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points