...

View Full Version : Image hiding underneath another



SteveH
08-06-2009, 08:45 AM
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:


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:


<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

noneforit
08-06-2009, 12:45 PM
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?

SteveH
08-06-2009, 01:01 PM
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

noneforit
08-06-2009, 05:43 PM
Could use a top and left margin instead of absolute positioning.

mite work:


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

SteveH
08-07-2009, 11:46 AM
Hello Laurie

Thanks again for your post.

If I use my original positioning which is:


<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:


<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

Fisher
08-07-2009, 04:35 PM
You need to validate your code: errors (http://validator.w3.org/check?uri=http%3A%2F%2Fstevehigham59.7host.com%2Fcover%2Findex.html&charset=(detect+automatically)&doctype=Inline&group=0)

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.

SteveH
08-10-2009, 01:27 PM
Hello Fisher

Thank you for your post.

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


.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

Fisher
08-10-2009, 02:39 PM
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.

.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;
}

SteveH
08-10-2009, 04:03 PM
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:


.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
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

Fisher
08-10-2009, 05:06 PM
.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.

SteveH
08-10-2009, 05:31 PM
Hello Fisher

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

Very many thanks indeed! It looks fine.

Steve



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum