Grow your CSS skills. Land your dream job.

getting a div on top of a div that has a picture

  • # August 17, 2008 at 9:40 pm

    Hi,

    Please help! This is driving me crazy….

    I am fairly new to CSS and divs. I have built a whole index page using floating divs. The problem is, I need to get a div on top of a div that contains a picture. I have tried several things (insert after tag, insert after start of tag, z-index value of 5 px and -5 px) and it will insert the div, but throw the picture further down the page. I’ve also tried removing the pic from inside the first div, then creating the new div, then putting the pic back in. Doesn’t work.

    See, I have an image on the right hand side of the page (a big photo) and I want to place a small Login box in the top right corner over top (it has to be created with divs and not just an image because I have PHP coding for the Login.)

    Can anyone give me a step-by-step of how to make this happen? I can’t provide the code due to an agreement with my client. Can someone help anyway?

    thanks.

    # August 17, 2008 at 9:52 pm

    actually, will an AP div work, and what problems may it cause considering the other divs are floating? I just tried it quickly, and it SEEMS to work OK in IE7 and Firefox…..

    # August 18, 2008 at 1:22 am

    I think in your css, you can assign an id to that div and just use the background function.

    Code:
    #imagediv {background:url(imageurl.jpg)}

    Then you put the login information in a div nested in that imagediv.

    I think that is what you’re needing.

    # August 21, 2008 at 2:29 pm
    "cinderella34" wrote:
    actually, will an AP div work, and what problems may it cause considering the other divs are floating? I just tried it quickly, and it SEEMS to work OK in IE7 and Firefox…..

    Yes, absolute positioning is the way to go. That removes the div from the normal flow of the document, and then you can place it anywhere you like without it affecting the other divs.

    box
    # August 22, 2008 at 7:22 am

    What is the purpose of the image? If it is decoration, then it should be a background image to the div – then there’s no messing about with positioning, absolute or otherwise.

    # August 24, 2008 at 7:20 pm

    Just in case – z-index only works on positioned elements, using it on anything else is useless.

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

You must be logged in to reply to this topic.

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