• Locked
2 replies [Last post]
Sun, 2012-09-30 21:05
cafc
cafc's picture
Offline
newbie
Last seen: 10 years 17 weeks ago
Timezone: GMT+1
Joined: 2012-09-30
Posts: 2
Points: 3

hi,
I think this is a simple css problem, but i didn't yet figure out a solution to this problem. I need to center a picture that fits into heigth of screen and remains above the footer. the following picture shows the problem:

![The problem - the picture doesn't fit to footer][1]
[1]: http://i.stack.imgur.com/3c5r0.png

This picture shows, what I want (but without the scroll-bar):

![what i need][2]

[2]: http://i.stack.imgur.com/SE1Xt.png

my code:

   <?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
<head> 
<title>::: IMAGE :::</title> 
 
 
<style type="text/css" media="screen">
 
*
{
                margin:0;
                padding:0;
}
 
body,html{
  height:100%;
}
 
div#right{
  height:100%; 
 
  width:960px;
  margin:0 auto;
 
}
img { 
                height:100%;
                width:100%
}
 
/*footer*/
 
#footer {
 
                height: 126px;   
    margin-top: -126px; 
                background:#9F9;
                margin-left:auto;
                margin-right:auto;
                width:100%;
                text-align:center;
 
                font-size:20px;
                color:#CCC;
 
}
 
 
 
</style> 
</head>
 
<body> 
 
<div id="right">
 
<img src="http://www.handsonuniverse.org/get_images/images/20100718.M20.HSO.jpeg" />
 
 
</div>
 
 
<div id="footer" >
 
footer
 
</div>
</body> 
</html>

I really need this. Can anyone please help me.
Thanks in advance,
cafc

Top
Tags:
Sun, 2012-09-30 22:06
#1
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 2 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi cafc, Please don't double

Hi cafc,
Please don't double post, I removed the others .

First up the image in your code is not a background-image.
If you have it as a background you would be able to put content on top of it etc.
You may be able to use background-size.

A quick fix might be to add position:relative; to #footer, it give it some positioning content and a higher z-index, but it will cover some of the image.

Top
Mon, 2012-10-01 10:14
#2
cafc
cafc's picture
Offline
newbie
Last seen: 10 years 17 weeks ago
Timezone: GMT+1
Joined: 2012-09-30
Posts: 2
Points: 3

hi, i didn't double the

hi,

i didn't double the post... i tryed to delete them... but it didn't work...
i tryed your solution but it didn't done what I was expecting...
thanks anyway.
cafc

Top
  • Locked