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 8 of 8

Thread: Layering Photos

  1. #1
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post

    Layering Photos

    Hi,

    I am trying to layer or superimpose on photo in the corner of another, ideally with the first image providing a margin around the second image.

    Here is the code from my stylesheet:
    Code:
    div.banner
    	{
    	display:block; 
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:170;
    	z-index:0;
    	}
    div.header
    	{
    	display:block; 
    	position:absolute;
    	top:0;
    	left:85%;
    	width:100;
    	height:150;
    	z-index:1;
    	}
    And my code on my page:
    Code:
    echo '<div width="100%" height="170"><div class="banner"><img src="thumbs/BlogHeader.jpg" width="100%" height="170"></div><div class="header><img src="thumbs/' . $row['header'] . '" width="100" height="100"/></div></div>';
    And currently neither are showing.

    So not sure what I am doing wrong?

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Position:absolute will start from the position of the nearest enclosing element that has position:absolute or position:relative, and in the absence of these it'll position from the viewport. So that might be why you can't see them.

    I'd do it like this:

    Code:
    <div width="100%" height="170">
       <div class="banner">
          <img src="thumbs/BlogHeader.jpg" width="100%" height="170">
          <img class="header" src="thumbs/' . $row['header'] . '" width="100" height="100"/>
       </div>
    </div>
    with:

    Code:
    .banner{position:relative}
    .header{position:absolute;top:0;left:85%;}
    Then .banner is positioned normally rather than absolutely and just contains the blogHeader image, and .header is positioned absolutely with respect to .banner, which I think is what you want - adjust the top and left settings on .header to suit.

  • Users who have thanked SB65 for this post:

    Jenny Dithe (11-21-2010)

  • #3
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post
    Thank you.

    I tried it but I am getting no BlogHeader.jpg coming up and my $row['header'] is position to the left of the div?

    I tried making it div.banner, I have also tried margin-left instead of margin but that didn't work either.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Are you sure the path to your image is correct?

    Can you give a link to your page?

  • #5
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post
    OK, so I switched to testing in firefox, and you are absolutely right this works.

    But I get nothing in IE. !!! typical.

    My finished code is:
    Stylesheet
    Code:
    .banner{position:relative; z-index:1;}
    .header{position:absolute;top:10px;left:80%;z-index:2;}
    Page:
    Code:
    <div width="100%" height="170">
    <div class="banner">
    <img src="/thumbs/BlogHeader.jpg" width="100%" height="170">
    <img class="header" src="/thumbs/' . $row['header'] . '" width="150" height="150"/></div></div>
    All I get in IE is the compressed image box with an x in it.

    Any ideas on the fix?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello Jenny Dithe,
    The dreaded red X is usually a path issue. That's why SB65 is asking for a link to the page so we can see the image.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Jenny Dithe (11-21-2010)

  • #7
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    For this <img src="/thumbs/BlogHeader.jpg you can try either removing the first slash "thumbs/ or giving the full path with http://

  • Users who have thanked DrDOS for this post:

    Jenny Dithe (11-21-2010)

  • #8
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post
    Thank you for all your help.

    I tidied up the page generally - relating to a completely different section - and it suddenly started working in IE!

    So it is now solved.


  •  

    Posting Permissions

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