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!
-
Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
format headers/footers using CSS 1
- Thread starter sfenx
- Start date
-
1
- #2
If you include them with SSI of PHP or some language then they will display everywhere, even when you print. You can format them the same as you would format the page itselfd; AND, you can put the style stuff in with the rest on the main page, not only the page being included.
Rick If I have helped you just click the first link below to let me know
Rick If I have helped you just click the first link below to let me know
- Thread starter
- #3
Well, here's what I'd do. You can't use frames because you want the headers and footers to scroll. So, there's one way that has never worked for me, but you can try and make it work:
<div style="include-source:URL(page.html);"></div>
for more info goto:
Otherwise, I'd recommend using Iframes:
<iframe src="header.html">I'm the header</iframe>
then the body, then
<iframe src="footer.html">I'm the footer</iframe>
It is usable from IE 3+ and NS 6+. It leaves out a couple browsers, but it's the best way I can think of if you can't use server side scripting.
Rick If I have helped you just click the first link below to let me know
<div style="include-source:URL(page.html);"></div>
for more info goto:
Otherwise, I'd recommend using Iframes:
<iframe src="header.html">I'm the header</iframe>
then the body, then
<iframe src="footer.html">I'm the footer</iframe>
It is usable from IE 3+ and NS 6+. It leaves out a couple browsers, but it's the best way I can think of if you can't use server side scripting.
Rick If I have helped you just click the first link below to let me know
- Thread starter
- #7
Can someone help me out with my code? I can't seem to stop the contents from overwriting the footer. Also my footer appears only once (on the first page). How can I make it appear on each page?
N4.7 shows the message "parameter is incorrect", in the footer.
thx, Sfenx
My testbrowsers: N4.7 and IE5.
N4.7 shows the message "parameter is incorrect", in the footer.
thx, Sfenx
My testbrowsers: N4.7 and IE5.
Code:
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" media="screen, print" href="/styles/BriefStijl.css">
<script language="JavaScript">
<!--
function reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.pgW=innerWidth; document.pgH=innerHeight; onresize=reloadPage; }}
else if (innerWidth!=document.pgW || innerHeight!=document.pgH) location.reload();
}
reloadPage(true);
// -->
</script>
</head>
<BODY>
<DIV class="header" style="z-index=0">
<TABLE width="100%" border="0">
<TR>
<TD>This is my header</td>
</tr>
</table>
</div>
<DIV class="Footer" style="include-source:url("somedoc.html");z-index=2"></div>
<DIV class="Contents" style="z-index=1">
This is the contents
</div>
</body>
</html>
**********/BriefStijl.css
.Contents {
position: absolute;
left: 1.6cm;
right: 1.5cm;
top: 3.5cm;
text-align: justify;
color: blue;
font-family: tahoma, arial, sans-serif ! important;
font-size: 10.5pt;
}
.Header {
position: absolute;
left: 1.5cm;
right: 1.5cm;
top: 0cm;
bottom: 0cm;
}
.Footer {
position: absolute;
left: 1.5cm;
right: 1.5cm;
top: 25cm;
bottom: 0cm;
}
**********/somedoc.html
<TABLE width="100%" border="1">
<TR>
<TD>This is my footer</td>
</tr>
</table>Hi sfenx,
My reference say that the include-source is only Netscape.
If it's your goal then maybe the double quotes occurs the problem
Try single quotes for the url:
style="include-source:url('somedoc.html');z-index=2"
But why don't you just do it the sam like the header:
<BODY>
<DIV class="header" style="z-index=0">
<TABLE width="100%" border="0">
<TR>
<TD>This is my header</td>
</tr>
</table>
</div>
<DIV class="Footer" style="z-index=2">
<TABLE width="100%" border="0">
<TR>
<TD>This is my footer !!</td>
</tr>
</table>
</div>
<DIV class="Contents" style="z-index=1">
This is the contents
</div>
</body>
Hope this helps,
Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
My reference say that the include-source is only Netscape.
If it's your goal then maybe the double quotes occurs the problem
Try single quotes for the url:
style="include-source:url('somedoc.html');z-index=2"
But why don't you just do it the sam like the header:
<BODY>
<DIV class="header" style="z-index=0">
<TABLE width="100%" border="0">
<TR>
<TD>This is my header</td>
</tr>
</table>
</div>
<DIV class="Footer" style="z-index=2">
<TABLE width="100%" border="0">
<TR>
<TD>This is my footer !!</td>
</tr>
</table>
</div>
<DIV class="Contents" style="z-index=1">
This is the contents
</div>
</body>
Hope this helps,
Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
- Thread starter
- #10
gph1,
your javascript idea for headers en footers is great, but you still have to enter the code manually every time you need it.
Boomerang,
The include-source doesn't seem to be the problem. Even with single quotes, the result is the same and only Netscape return a 'invalid parameter' message in the footer.
The problem isn't realy the include-source (I can write the code directly in the footer-div) but the fact that the contents (when it's more than one page) overwrites my footer and that the footer isn't repeated on the other pages. A small example of what I have in mind:
-Header (top of page)
-Contents (page1 | from 3.5cm to 24cm on paper)
-Footer (at 25cm on paper)
-Contents (page2 | from 3.5cm to 24cm on paper)
-Footer (at 25cm on paper)
-Contents (page3 | from 3.5cm to 24cm on paper)
-Footer (at 25cm on paper)
... something like the Word interface.
I don't know if this is possible, but any suggestions are welcome.
Sfenx
your javascript idea for headers en footers is great, but you still have to enter the code manually every time you need it.
Boomerang,
The include-source doesn't seem to be the problem. Even with single quotes, the result is the same and only Netscape return a 'invalid parameter' message in the footer.
The problem isn't realy the include-source (I can write the code directly in the footer-div) but the fact that the contents (when it's more than one page) overwrites my footer and that the footer isn't repeated on the other pages. A small example of what I have in mind:
-Header (top of page)
-Contents (page1 | from 3.5cm to 24cm on paper)
-Footer (at 25cm on paper)
-Contents (page2 | from 3.5cm to 24cm on paper)
-Footer (at 25cm on paper)
-Contents (page3 | from 3.5cm to 24cm on paper)
-Footer (at 25cm on paper)
... something like the Word interface.
I don't know if this is possible, but any suggestions are welcome.
Sfenx
- Thread starter
- #11
![[thumbsup2]](/data/assets/smilies/thumbsup2.gif "[thumbsup2] [thumbsup2]")
- Status