6 replies [Last post]
John_D
Offline
newbie
Last seen: 12 years 36 weeks ago
Joined: 2008-08-03
Posts: 7
Points: 0

Hey all,

I'm working on a webpage for a festival. They want a full browser flash website, but in the bottom a 15px height html footer for displaying Google Ads. I managed to do this, but not correct, I did it with percentages. I gave the div with the Flash a percentage of 95%. And for some reason, user can not click on the ads. You can view the example on http://www.moulinrougefestival.be/site2008/

HTML

<body>
<div id="container">
  <div id="flashcontent"> Here the Flash Content </div>
  <div id="push"></div>
</div>
<div id="footer">
  <div id="footer-content"> Here the Googla Ads </div>
</div>
</body>

CSS

* { 
	margin : 0; 
	padding : 0; 
}
 
html {
	height: 100%;
	overflow: auto;
}
 
body { 
	font : 76%/160% Tahoma, Verdana, Arial, sans-serif;
	height: 100%;
	background-color:#000000;
	color:#FFFFFF;
}
div#container { 
	position : relative;
 
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -20px;
}
#flashcontent {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 95%;
	width:  100%;
}
 
div#footer, div#push {
	height: 20px;	
}
div#footer{
	min-height:20px;
}
div#footer-content{
	width:800px;
	margin:0 auto;
	text-align:center;
}

Does anyone know how to accomplish this effect with an exact fixed footer of 15px? So without use of percentages? Thanks a lot in advance!!!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 30 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Give #footer position.

Give #footer position. Elements with position are drawn above elements that don't have position, which means your #container is being drawn above #footer. Position:relative should do.

You may find the flash object will also need to use correct properties to ensure page shows through (iirc, the property is wmode and the value transparent, but check this).

zaneTrance
zaneTrance's picture
Offline
Regular
Lost Vegas
Last seen: 12 years 37 weeks ago
Lost Vegas
Joined: 2008-07-29
Posts: 15
Points: 0

omig figured it out!!

heres my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mai rofl copter goes soi soi soi</title>
<style type="text/css">
 body{
  margin:0px;
  padding:20px 0px 15px 0px;
 }
 div#footer{
  position:absolute;
  bottom:0;
  left:0;
  z-index: 1000;
  width:100%;
  height: 15px;
 }
 @media screen{
  body>div#footer{
   position:fixed;
  }
 }
 * html body{
  overflow:hidden;
 } 
 
</style>
 
</head>
 
<body>
 
<div id="footer"> - footer -  - footer -  - footer -  - footer -  - footer -  - footer -  - footer -  - footer -  - footer -  - footer -  - footer -  - footer -  - footer -  - footer -  - footer -</div>
 
 
</body>
</html>

heres where i learned it for you xD
http://limpid.nl/lab/css/fixed/header-and-footer

zaneTrance
zaneTrance's picture
Offline
Regular
Lost Vegas
Last seen: 12 years 37 weeks ago
Lost Vegas
Joined: 2008-07-29
Posts: 15
Points: 0

omig nice site

Looks like youve figured it out already, now ima look at ur source... Nice flash site by the way

John_D
Offline
newbie
Last seen: 12 years 36 weeks ago
Joined: 2008-08-03
Posts: 7
Points: 0

Thanks a lot Chris, The

Thanks a lot Chris,

The first part of the solution works. The footer is now visible and the content is clickable, see http://www.moulinrougefestival.be/site2008/
Now the other part of the problem, I gave the flash content a height of 95%, this means that if the screen height is getting to small, the footer with the ads is not visible anymore. I just want it fixed with a height of 15 or 20px. Is there for this problem also a solution? Thanks a lot.

zaneTrance
zaneTrance's picture
Offline
Regular
Lost Vegas
Last seen: 12 years 37 weeks ago
Lost Vegas
Joined: 2008-07-29
Posts: 15
Points: 0

i think its possible john

check out the site from my other post bro, its a css hack which positions it fixed on the bottom of the screen, even if the content is scrolled through. this is insanely hard to do for some reason, even though it is so simple Sad the fix you have on ur site as of now works when you have a new screen res, but on a 800x600 or other old/small monitors, you cant see the footer. im thinkin this is just one of those things that annoys the hell out of you while using css. its simple to make a fixed header - why not footer?

John_D
Offline
newbie
Last seen: 12 years 36 weeks ago
Joined: 2008-08-03
Posts: 7
Points: 0

Thanks a lot again. I did

Thanks a lot again. I did not see your previous posts, probably posting around the same time. I'm gonna check that other solution.