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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    Image hiding underneath another

    Hello

    I have two images at the top nd of my Web page. The first one is positioned at the top. In the <style> tag (in the <head> tags) I have the following:

    Code:
    body
    {background-image: url('halls_net_support_gif.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 265px 20px;
    }
    I have nothing else for this image.

    Then I have another image positioned as follows:

    Code:
    <IMG STYLE="position:absolute; TOP:130px; LEFT:400px; WIDTH:271px; HEIGHT:95px" SRC="support1_student.jpg">
    I am quite happy with where they are located on the page, but when I scroll down the page the second image (support1_student.jpg) is enveloped under the image right at the top.

    Why is that and how would I sort that out, please?

    Many thanks.

    Steve

  • #2
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    Im not 100% but i would think it has something to do with the fact the second image is absolutely positioned. Have you got a link to a live version of the site?

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello laurie

    Thanks for your reply.

    I am only working on the site on my desktop as these pages are meant for a CD and will never go online.

    I suspect you are right about the absolute positioning on the second image, but I'm unsure about correcting it.

    Cheers

    Steve

  • #4
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    Could use a top and left margin instead of absolute positioning.

    mite work:

    Code:
    <IMG STYLE="margin-top:130px; margin-left:400px; WIDTH:271px; HEIGHT:95px" SRC="support1_student.jpg">

  • #5
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Laurie

    Thanks again for your post.

    If I use my original positioning which is:

    Code:
    <IMG STYLE="position:absolute; TOP:130px; LEFT:400px; WIDTH:271px; HEIGHT:95px" SRC="support1_student.jpg" alt="Halls Support CD" title="Halls Support CD">
    I see this:

    http://stevehigham59.7host.com/cover/index.html

    If I use what you have (kindly) posted, that is:

    Code:
    <IMG STYLE="margin-top:130px; margin-left:400px; WIDTH:271px; HEIGHT:95px" SRC="support1_student.jpg">
    I see:

    http://stevehigham59.7host.com/cover/index1.html

    Cheers and thanks for the trouble you have taken.

    Steve

  • #6
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    You need to validate your code: errors

    The most obvious error is that your wrapper div is not closed (and not styled). Give it a width and center it with margin:auto. If you give it relative positioning, the absolutely positioned image will be contained within it and scroll with everything else.

    PS - tables for layout is a bad habit.

  • #7
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Fisher

    Thank you for your post.

    I have put this in to the <style> tags:

    Code:
    .wrapper { 
        min-height: 100%; 
        height: 100%; 
        margin: auto 
    }
    But as you can see from the updated link here:

    http://stevehigham59.7host.com/cover/index.html, that image 'Student Support CD' still continues to scroll under the image at the top of the page.

    Have I correctly made the amendment you suggested?

    Thanks again.

    Steve

  • #8
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    You still need to fix the errors that I linked to. In addition, put your background on your wrapper, not the body. Also, once you fix the errors, your page is going to be bunched together. Change the margin on the h5 tag to padding.
    Code:
    .wrapper {
    	min-height: 100%;
    	height: 100%;
    	margin: auto;
    	width:800px;
    	position:relative;
    	background:url(halls_net_support_gif.gif) no-repeat;
    	text-align:center;
            font-family: verdana;
    }
    
    h5 {
    	padding-top: 290px;
    }

  • #9
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Fisher

    Thanks again.

    Yes, I will check out the errors, but as these pages will not go 'live' so to speak I can take my time doing that.

    I did this, as you suggested:

    Code:
    .wrapper {
    	min-height: 100%;
    	height: 100%;
    	margin: auto;
    	width:800px;
    	position:relative;
    	background:url(halls_net_support_gif.gif) no-repeat;
    	text-align:center;
            font-family: verdana;
    }
    
    h5 {
    	padding-top: 290px;
    }
    but there was huge space between the the images, so I removed
    Code:
    h5 {
    	padding-top: 290px;
    }
    and the page now looks like this:

    http://stevehigham59.7host.com/cover/index.html

    the 'Student Support CD' image now no longer slides under the image at the top, so very many thanks to you for resolving the annoying problem!

    However, why would the image at the top now be aligned to the left and not, as it was, in the centre?

    Cheers again for all your intelligent help.

    Steve

  • #10
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Code:
    .wrapper {
    	min-height: 100%;
    	height: 100%;
    	margin: auto;
    	width:800px;
    	position:relative;
    	background:url(halls_net_support_gif.gif) top center no-repeat;
    	text-align:center;
    	font-family: verdana;
    }
    Add the part in red. I have a feeling you're viewing your site in IE(6). If you look at it in Firefox, you'll know what I meant by bunched up.

  • Users who have thanked Fisher for this post:

    SteveH (08-10-2009)

  • #11
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Fisher

    Didn't even know that existed, but wow! It has done the trick!

    Very many thanks indeed! It looks fine.

    Steve


  •  

    Posting Permissions

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