Grow your CSS skills. Land your dream job.

Help on positioning and visibility

  • # October 14, 2008 at 6:04 am

    Hi All
    I would like to position an image div over the top of 2 other divs, I have done this using absolute positioning but the result is less than pleasing when the browser is resized. Here is a short piece of code which i hope explains what i am after.
    Thanking you in advance for your help…Regards Athestan

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Content for id “logobar” Goes Here
    Transparent .png image120px high…I would like this to be positioned on top of the "logobar" and "navbar" divs on the right hand side so that the content of the 2 divs show through the images transparency (image should drop below navbar)

     

     

    I have done this using absolute positioning but it looks awful if the browser size is changed ie. position of image moves left or right. Is there anyway of doing this so the image does not move?


    # October 14, 2008 at 8:08 pm

    You need to tell your container to have a position of relative, then absolutely positioned elements inside of it will position themselves off of it, and not the entire screen.

    Code:
    #container {
    width: 768px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    }
    #container #logobar {
    background-color: #FF0000;
    height: 60px;
    color: #FFFFFF;
    }
    #container #navbar {
    background-color: #0000FF;
    height: 40px;
    color: #FFFFFF;
    }
    .yourImage {
    position: absolute;
    right: 0;
    top: 10px;
    z-index: 10;
    }
    Code:
    Content for id “logobar” Goes Here

    Transparent .png image120px high…I would like this to be positioned on top of the "logobar" and "navbar" divs on the right hand side so that the content of the 2 divs show through the images transparency (image should drop below navbar)

     

     

    I have done this using absolute positioning but it looks awful if the browser size is changed ie. position of image moves left or right. Is there anyway of doing this so the image does not move?

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".