Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts

    Exclamation making 1 div appear over another?

    Hi all,

    i am struggling with my divs at the moment i have a small image and next to it some text but if the text happens to go behind the image it goes behind, how do i set it so that it goes infront of the image

    see here the amazon top item title is partly under the image.

    here is my css for the two divs
    Code:
    .inditemheader {
    	font-size:14px;
    	height:30px;
    	width:178px;
    	float:left;
    	text-align:center;
    	margin-left:60px;
    	margin-bottom:15px;
    	z-index:2;
    
    .indtopitemimg {
    	position:absolute;
    	width:70px;
    	height:50px;
    	float:left;
    	z-index:1;
    	}
    	}
    i've tried changing the z-index around with no success, the inditemheader is the one i want on top.

    cheers
    Luke
    Last edited by LJackson; 02-26-2009 at 06:17 PM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Hi there. Why not make that image the background of your "recommends" div like this:
    Code:
    .recommends{
    background-image:url(../images/top.gif);
    background-repeat:no-repeat;
    border:1px solid #FF0000;
    float:left;
    font-family:Arial,Helvetica,sans-serif;
    font-size:15px;
    height:240px;
    margin:5px 5px 5px 2px;
    text-align:center;
    width:291px;}
    Then remove your image tag from the HTML? You could skip a div in the markup as well...

    Is this what you're looking for?
    Last edited by Rowsdower!; 02-26-2009 at 05:36 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    LJackson (02-26-2009)

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    cheers mate thats exactly what i wanted

    thanks
    Luke

  • #4
    New Coder
    Join Date
    Dec 2008
    Location
    Kennesaw, GA
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question I need a different solution....

    Hello, I also want a div to appear over another, but I cannot use the background solution previously offered.

    A test page is here: http://www.trinityvineyardworship.co...on-upton-faith

    You'll see a 'Slide In' link, I want that to slide in over the embedded pdf. I don't want the pdf to be down below.

    Excuse my rudimentary sketch, but I hope it helps you visualize my end desire.



    Thanks in advance!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •