Hi,
I’m a newbie with CSS. I’m surfing the web for a template that works with IFRAME’s, I found one that fit my needs by I have a problem, I have two scroll downs.
I attach the fully working template. Just Copy/paste.
<!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:auto; padding-left:200px; position:relative; z-index:3; word-wrap:break-word;}
#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:100px; background:#fff; font-size:4em; z-index:5; color:#000; border-bottom:1px solid #000;}
#foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:51px; 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:100px;}
#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>
<style type="text/css" media="print">
html {padding:0; margin:0; border:0; background:#fff; font-size:10pt; font-family: arial, sans-serif;}
body {padding:0; margin:0; border:0;}
#content {display:block; position:relative; z-index:3; word-wrap:break-word;}
#head {display:none;}
#printhead {height:100px; background:#fff; font-size:24pt; color:#000; border-bottom:1px solid #000;}
#printfoot {height:50px; background:#fff; color:#000; text-align:right; font-size:12pt; border-top:1px solid #000; margin-top:20px;}
#foot {display:none;}
</style>
</head>
<body>
<div id="printhead">www.s7u.co.uk - Cutting Edge CSS</div>
<div id="head"><div class="pad1"></div>Header</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="pad2"></div>
</div>
<div id="foot">Footer</div>
</body>
</html>
My question. It is possible to remove one scroll down? I need only CSS to do this?
Best Regards,
