Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Template

Status
Not open for further replies.
Bebe56

Bebe56

MIS
Jan 21, 2006
16
US
Hi
i just finish this header/footer template, can you guys give it a try (i've test it in IE, FF and Opera) and see if any bugs ?
Thx!


<html>
<head>

<title>Template</title>
<style type="text/css">
html,body {height:100%;margin:0;padding:0;}
body {overflow:hidden;}
#holder{top:0px;height:100%;}
#header {margin:0;padding:0;background-color:#fafafa;}
#heading{margin:0;padding:0;background-color:#c0c0c0;}
#content{overflow:auto;margin:1px 0 0 0;padding:0 3px 0 3px;}
#content p {margin:0;}
#footer {position:absolute;bottom:0;width:100%;margin:0;padding:0;background:#ccc;}
</style>

<script type="text/javascript">
<!-- Get "content" div height
function contentheight() {
var th, f, c, h, x;
th = document.body.offsetHeight, tw = document.body.offsetWidth;
f = document.getElementById('footer').offsetHeight;
c = document.getElementById('content').offsetTop;
h = th - (f + c);
if (navigator.appName=="Microsoft Internet Explorer"){x = 6}else{x = 3}
document.getElementById('content').style.height = h - x + "px";
}
onresize = contentheight;
//-->
</script>
</head>

<body onload="contentheight();">
<div id="holder">

<div id="header">Company header (logo)</div>
<div id="heading">Page headings</div>

<div id="content" onfocus="contentheight()">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><br/>

<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit‡ de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><br/>

text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
text text text text text text <br/>
</div>

<div id="footer">footer</div></div>
</body>
</html>
 
Sort by date Sort by votes
Nice job, Bebe<
I tried it with addition of some dynamic html - worked nicely as expected.
I get it, but didn't want to take words out of your mouth - Can you give a 2 second explanation of the javascript.

My guess is that you can set this up for holding boxes stationary at any location on the page...especially when you implement the offset width capability.

Cheers,
George
 
Upvote 0 Downvote
first of all, you dont need the 'onfocus' in '<div id="content" onfocus="contentheight()">' (i forgot to take it out)

I've tried to set content's height using a % but it didnt work that good - that's why the js.

The script is pretty simple: get the total page height (th), footer height (f) and the distance from top to content div (c) - so content's height (h) will be page height - (footer + distance from top to content)
IE and FF seem to disagree on 'th' or 'c', that's why the 'x'
Also, if P (in 'container') has margins, IE messes up the whole thing, i couldnt figure out why.
I dont have a Mac to test it, but i hope it works..
 
Upvote 0 Downvote
On looking more at this - any reason not to go with straight CSS and position:fixed rather than the javascript?

George
 
Upvote 0 Downvote
Yes - some browsers don't support position:fixed. However, depending on the use of position:fixed, you can code around that "limitation" using pure CSS without JavaScript.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
i tried fixed, i didnt want js either. However, i couldnt make it work nicely in IE. Maybe i missed something ?
Bebe
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

madrik79
  • Locked
  • Question
email to link in html/css template
Replies
4
Views
57
ChrisHirst
ChrisHirst
1DMF
  • Locked
  • Question
How do you widgetise templated content and still use external CSS files? 1
Replies
5
Views
133
1DMF
1DMF
mrdecrypter
  • Locked
  • Question
Dynamic video loading template
Replies
4
Views
33
mrdecrypter
mrdecrypter
rhyno2k
  • Locked
  • Question
Trying to find the right template
Replies
1
Views
27
ChrisHirst
ChrisHirst
spewn
  • Locked
  • Question
can't seem to get this template to seat right...always moves on page..
Replies
1
Views
30
Vragabond
Vragabond

Part and Inventory Search

Sponsor

Back
Top