Jump to content

CSS Help with Scroll down


lopes_andre

Recommended Posts

Hi,

 

I'm not an expert in CSS, and I having some trouble with a template. The problem is in the scroll down. I can't put them correctly across all the template.

 

I have the full code of the template here. Just copy/paste and will work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method </title>
<style type="text/css" media="screen">
#printhead {display:none;}

html {
	height:100%; 
	max-height:100%; 
	padding:0; 
	margin:0; 
	border:0; 
	background:#fff; 
	font-size:80%; 
	font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
	/* hide overflow:hidden from IE5/Mac */ 
	/* \*/ 
	overflow: hidden; 
	/* */ 
}

body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}

#content {display:block; height:100%; max-height:100%; overflow:hidden; padding-left:0px; position:relative; z-index:3; word-wrap:break-word;}

#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; font-size:1em; z-index:5; color:#000; border-bottom:1px solid #000;}

#foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:25px; background:#fff; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;}

.pad1 {display:block; width:18px; height:50px; float:left;}

.pad2 {display:block; height:50px;}

.pad3 {display:block; height:500px;}

#content p {padding:5px;}

.bold {font-size:1.2em; font-weight:bold;}

.red {color:#c00; margin-left:5px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;}

h2 {margin-left:5px;}

h3 {margin-left:5px;}
</style>
</head>
<body>
<div id="head">
<div class="pad1"></div><h1>Header</h1>
</div>
<div id="content">
<div class="pad2"></div>
<IFRAME name="teste" src="http://www.yahoo.com" width="100%" height="100%" frameborder=0></IFRAME>
<!--<div class="pad3"></div>-->
</div>
<div id="foot">Footer</div>
</body>
</html>

 

Can some one give me some clues about what can I do to solve this?

 

Best Regards.

Link to comment
Share on other sites

I can't see the problem (or do not fully understand it?) - I pasted your code into a file and loaded it using my browsers (Opera, Safari, Firefox & Chrome on the Mac) and could scroll as i assume is expected, with a static header and footer at the top and bottom...

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.