css to act like a simple 2 frame setup? yes or no

S

S Kalynuik

Is there a way to allow css to act like a simple 2 frame setup.

I want a fixed navigation header on all pages, website itself has 100+
pages, each is multi paged with sub pages.

So what I could do in frame is have 2 frames and clicking in the header
frame would load a seperate html page in the main frame, therefore not
having to repeat the header code 100+ times, can this be done using css?

I know css can use a float or fixed header position, even using margins to
trick ie into making a header section fixed. But this still seems like I
would have to repeat the header css on each page, it would just be more
fluid if the header always stayed loaded as it does using frames.
Or is this scenario not going to work in css YET?

BTW each page is header on top, fixed height and width, and main body is
scrollable up/down.

TIA (Thank-you In Advance)

If this is not possible is there a way to use the navigation html as say a
call and place that on everypage, like a css or javascript call:
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script language="javascript" src="js/rollover.js"></script>

I know the above loads a reference type file then applies those standards
in the case of a css link rel, but the javascript call actually places code
in the page, could this be done using html common to all pages, ie
navigation html segment?

THank-you
 
C

Carolyn Marenger

S said:
I want a fixed navigation header on all pages, website itself has 100+
pages, each is multi paged with sub pages.

So what I could do in frame is have 2 frames and clicking in the header
frame would load a seperate html page in the main frame, therefore not
having to repeat the header code 100+ times, can this be done using css?
Click to expand...

I don't think it can be done in CSS, however SSI will handle it quite
nicely.

If you move the html code for the header frame to a separate file,
ssi/headerframe.html and insert the SSI code <!--#include
virtual="ssi/copyright.html" --> in the file in its place. Finally rename
the file index.shtml from index.html and you should be laughing. I have
only ever user apache servers, so I don't know if this will work if your
server is M$.

Carolyn
 
S

S Kalynuik

Is there a way to allow css to act like a simple 2 frame setup.

I want a fixed navigation header on all pages, website itself has 100+
pages, each is multi paged with sub pages.

So what I could do in frame is have 2 frames and clicking in the header
frame would load a seperate html page in the main frame, therefore not
having to repeat the header code 100+ times, can this be done using css?

I know css can use a float or fixed header position, even using margins to
trick ie into making a header section fixed. But this still seems like I
would have to repeat the header css on each page, it would just be more
fluid if the header always stayed loaded as it does using frames.
Or is this scenario not going to work in css YET?

BTW each page is header on top, fixed height and width, and main body is
scrollable up/down.

TIA (Thank-you In Advance)

If this is not possible is there a way to use the navigation html as say a
call and place that on everypage, like a css or javascript call:
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script language="javascript" src="js/rollover.js"></script>

I know the above loads a reference type file then applies those standards
in the case of a css link rel, but the javascript call actually places code
in the page, could this be done using html common to all pages, ie
navigation html segment?

THank-you
Click to expand...

ok I looked in alot of places and now almost have what I want to work:
the html file:
**************

<?xml version="1.0" encoding="UTF-8"? /?>
<!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">

<!-- Generated by AceHTML Freeware http://freeware.acehtml.com -->
<!-- Creation date: 3/8/2006 -->

<head>
<meta name="author" content="Steve Kalynuik" />
<meta name="email" content="(e-mail address removed)" />
<title>Kingtut's Place - The Game Section</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script language="javascript" src="js/rollover.js"></script>
<style>
<!--
div.c2 {text-align: center}
-->
</style>
</head>

<body onload="rollover()">

<script language="javascript" type="text/javascript"
src="ktptgs-head.js"></script>

</body>
</html>

**************
the js file:
**************

document.write ('<table border="0" cellspacing="0" cellpadding="0"
id="table1" class="c3">');
document.write (' <tr>');
document.write (' <td>');
document.write (' <img src="menu_images/mlt.gif" border="0" width="303"
height="28" alt="mlt" /><img src="menu_images/mp.gif" border="0" width="80"
height="28" alt="mp" /><img src="menu_images/mrt.gif" border="0"
width="303" height="28" alt="mrt" />');
document.write (' <br />');
document.write (' <img src="menu_images/mlb.gif" border="0" width="303"
height="97" alt="mlb" /><img src="menu_images/tutani.gif" border="0"
width="80" height="97" alt="tutani" /><img src="menu_images/mrb.gif"
border="0" width="303" height="97" alt="mrb" />');
document.write (' <\/td>');
document.write (' <\/tr>');
document.write ('<\/table>');
document.write ('<table border="1" cellspacing="0" cellpadding="0"
id="table2" class="c3">');
document.write (' <tr>');
document.write (' <td>');
document.write (' <img src="menu_images/menuleft.gif" width="4"
height="32" alt="menuleft" /><\/td>');
document.write (' <td colspan="2">');
document.write (' <!-- Main Menu-Buttons -->');
document.write (' <table align="center" cellpadding="0" cellspacing="0"
border="0" id="table3" class="c4">');
document.write (' <tr>');
document.write (' <td title="index" align=" center" class="c5">');
document.write (' <a href="index.html" target="_parent">');
document.write (' <img src="wbimg\imgn0.gif" rsrc="wbimg\imgo0.gif"
border="0" width="90" height="30" alt="Index" /><\/a><\/td>');
document.write (' <td title="creatures 1 &amp; 2" align=" center"
class="c5">');
document.write (' <a href="mc12.html" target="_parent">');
document.write (' <img src="wbimg\imgn1.gif" rsrc="wbimg\imgo1.gif"
border="0" width="90" height="30" alt="Creatures 1 &amp; 2"
/><\/a><\/td>');
document.write (' <td title="dragon warrior monsters" align=" center"
class="c5">');
document.write (' <a href="mdwm.html" target="_parent">');
document.write (' <img src="wbimg\imgn2.gif" rsrc="wbimg\imgo2.gif"
border="0" width="90" height="30" alt="Dragon Warrior Monsters"
/><\/a><\/td>');
document.write (' <td title="japanese pangya" align=" center"
class="c5">');
document.write (' <a href="mjp.html" target="_parent">');
document.write (' <img src="wbimg\imgn3.gif" rsrc="wbimg\imgo3.gif"
border="0" width="90" height="30" alt="Japanese Pangya" /><\/a><\/td>');
document.write (' <td title="ogre battle saga" align="center"
class="c5">');
document.write (' <a href="mobs-start.html" target="_parent">');
document.write (' <img src="wbimg\imgn4.gif" rsrc="wbimg\imgo4.gif"
border="0" width="90" height="30" alt="Ogre Battle Saga" /><\/a><\/td>');
document.write (' <td title="wizardry" align=" center" class="c5">');
document.write (' <a href="mw.html" target="_parent">');
document.write (' <img src="wbimg\imgn5.gif" rsrc="wbimg\imgo5.gif"
border="0" width="90" height="30" alt="Wizardry" /><\/a><\/td>');
document.write (' <td title="guestbook" align=" center" class="c5">');
document.write (' <a href="mgb.html" target="_parent">');
document.write (' <img src="wbimg\imgn6.gif" rsrc="wbimg\imgo6.gif"
border="0" width="90" height="30" alt="Guestbook" /><\/a><\/td>');
document.write (' <\/tr>');
document.write (' <\/table>');
document.write (' <script type="text/javascript" language="JavaScript1.1"
src="rotatingimagemain.txt"><\/script>');
document.write (' <!-- Main Menu-Buttons End --><\/td>');
document.write (' <td>');
document.write (' <img src="menu_images/menuright.gif" width="4"
height="32" alt="menuright" /><\/td>');
document.write (' <\/tr>');
document.write ('<\/table>');

**************
the problem is, the rollover images do not show, any ideas why not? THey do
if wriiten properly in the html document.

Thank-you
 
S

S Kalynuik

I found the problem using a HTML to Javascript converter, so the following
code wotks great and over 100 pages will save some 4600 lines of code:
I kept the same call line as before in each html file:
<script language="javascript" type="text/javascript"
src="ktptgs-head.js"></script>

but the js script file now contains only this:


<!--
function writeJS(){
var str='';
str+=' <table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"
id=\"table1\" class=\"c3\">';
str+=' <tr>';
str+=' <td>';
str+=' <img src=\"menu_images\/mlt.gif\" border=\"0\" width=\"303\"
height=\"28\" alt=\"mlt\" \/><img src=\"menu_images\/mp.gif\" border=\"0\"
width=\"80\" height=\"28\" alt=\"mp\" \/><img src=\"menu_images\/mrt.gif\"
border=\"0\" width=\"303\" height=\"28\" alt=\"mrt\" \/>';
str+=' <br \/>';
str+=' <img src=\"menu_images\/mlb.gif\" border=\"0\" width=\"303\"
height=\"97\" alt=\"mlb\" \/><img src=\"menu_images\/tutani.gif\"
border=\"0\" width=\"80\" height=\"97\" alt=\"tutani\" \/><img
src=\"menu_images\/mrb.gif\" border=\"0\" width=\"303\" height=\"97\"
alt=\"mrb\" \/>';
str+=' <\/td>';
str+=' <\/tr>';
str+=' <\/table>';
str+=' <table border=\"1\" cellspacing=\"0\" cellpadding=\"0\"
id=\"table2\" class=\"c3\">';
str+=' <tr>';
str+=' <td>';
str+=' <img src=\"menu_images\/menuleft.gif\" width=\"4\" height=\"32\"
alt=\"menuleft\" \/><\/td>';
str+=' <td colspan=\"2\">';
str+=' <!-- Main Menu-Buttons -->';
str+=' <table align=\"center\" cellpadding=\"0\" cellspacing=\"0\"
border=\"0\" id=\"table3\" class=\"c4\">';
str+=' <tr>';
str+=' <td title=\"index\" align=\" center\" class=\"c5\">';
str+=' <a href=\"index.html\" target=\"_parent\">';
str+=' <img src=\"wbimg\\imgn0.gif\" rsrc=\"wbimg\\imgo0.gif\"
border=\"0\" width=\"90\" height=\"30\" alt=\"Index\" \/><\/a><\/td>';
str+=' <td title=\"creatures 1 &amp; 2\" align=\" center\"
class=\"c5\">';
str+=' <a href=\"mc12.html\" target=\"_parent\">';
str+=' <img src=\"wbimg\\imgn1.gif\" rsrc=\"wbimg\\imgo1.gif\"
border=\"0\" width=\"90\" height=\"30\" alt=\"Creatures 1 &amp; 2\"
\/><\/a><\/td>';
str+=' <td title=\"dragon warrior monsters\" align=\" center\"
class=\"c5\">';
str+=' <a href=\"mdwm.html\" target=\"_parent\">';
str+=' <img src=\"wbimg\\imgn2.gif\" rsrc=\"wbimg\\imgo2.gif\"
border=\"0\" width=\"90\" height=\"30\" alt=\"Dragon Warrior Monsters\"
\/><\/a><\/td>';
str+=' <td title=\"japanese pangya\" align=\" center\" class=\"c5\">';
str+=' <a href=\"mjp.html\" target=\"_parent\">';
str+=' <img src=\"wbimg\\imgn3.gif\" rsrc=\"wbimg\\imgo3.gif\"
border=\"0\" width=\"90\" height=\"30\" alt=\"Japanese Pangya\"
\/><\/a><\/td>';
str+=' <td title=\"ogre battle saga\" align=\"center\" class=\"c5\">';
str+=' <a href=\"mobs-start.html\" target=\"_parent\">';
str+=' <img src=\"wbimg\\imgn4.gif\" rsrc=\"wbimg\\imgo4.gif\"
border=\"0\" width=\"90\" height=\"30\" alt=\"Ogre Battle Saga\"
\/><\/a><\/td>';
str+=' <td title=\"wizardry\" align=\" center\" class=\"c5\">';
str+=' <a href=\"mw.html\" target=\"_parent\">';
str+=' <img src=\"wbimg\\imgn5.gif\" rsrc=\"wbimg\\imgo5.gif\"
border=\"0\" width=\"90\" height=\"30\" alt=\"Wizardry\" \/><\/a><\/td>';
str+=' <td title=\"guestbook\" align=\" center\" class=\"c5\">';
str+=' <a href=\"mgb.html\" target=\"_parent\">';
str+=' <img src=\"wbimg\\imgn6.gif\" rsrc=\"wbimg\\imgo6.gif\"
border=\"0\" width=\"90\" height=\"30\" alt=\"Guestbook\" \/><\/a><\/td>';
str+=' <\/tr>';
str+=' <\/table>';
str+=' <script type=\"text\/javascript\" language=\"JavaScript1.1\"
src=\"rotatingimagemain.txt\"><\/script>';
str+=' <!-- Main Menu-Buttons End --><\/td>';
str+=' <td>';
str+=' <img src=\"menu_images\/menuright.gif\" width=\"4\" height=\"32\"
alt=\"menuright\" \/><\/td>';
str+=' <\/tr>';
str+=' <\/table>';
document.write(str);
}
writeJS();
//-->

Thank-you for those that helped, and thank-you to those that were in the
process of helping.

BTW to those interested here is the link I used to change HTML to
Javascript:
http://www.accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/
 
P

PeterMcC

S Kalynuik wrote in
ok I looked in alot of places and now almost have what I want to work:
the html file:
**************

<?xml version="1.0" encoding="UTF-8"? /?>
<!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">

<!-- Generated by AceHTML Freeware http://freeware.acehtml.com -->
<!-- Creation date: 3/8/2006 -->

<head>
<meta name="author" content="Steve Kalynuik" />
<meta name="email" content="(e-mail address removed)" />
<title>Kingtut's Place - The Game Section</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script language="javascript" src="js/rollover.js"></script>
<style>
<!--
div.c2 {text-align: center}
-->
</style>
</head>

<body onload="rollover()">

<script language="javascript" type="text/javascript"
src="ktptgs-head.js"></script>

</body>
</html>

**************
the js file:
**************

document.write ('<table border="0" cellspacing="0" cellpadding="0"
id="table1" class="c3">');
document.write (' <tr>');
document.write (' <td>');
document.write (' <img src="menu_images/mlt.gif" border="0"
width="303" height="28" alt="mlt" /><img src="menu_images/mp.gif"
border="0" width="80" height="28" alt="mp" /><img
src="menu_images/mrt.gif" border="0" width="303" height="28"
alt="mrt" />');
document.write (' <br />');
document.write (' <img src="menu_images/mlb.gif" border="0"
width="303" height="97" alt="mlb" /><img src="menu_images/tutani.gif"
border="0" width="80" height="97" alt="tutani" /><img
src="menu_images/mrb.gif" border="0" width="303" height="97"
alt="mrb" />');
document.write (' <\/td>');
document.write (' <\/tr>');
document.write ('<\/table>');
document.write ('<table border="1" cellspacing="0" cellpadding="0"
id="table2" class="c3">');
document.write (' <tr>');
document.write (' <td>');
document.write (' <img src="menu_images/menuleft.gif" width="4"
height="32" alt="menuleft" /><\/td>');
document.write (' <td colspan="2">');
document.write (' <!-- Main Menu-Buttons -->');
document.write (' <table align="center" cellpadding="0"
cellspacing="0" border="0" id="table3" class="c4">');
document.write (' <tr>');
document.write (' <td title="index" align=" center" class="c5">');
document.write (' <a href="index.html" target="_parent">');
document.write (' <img src="wbimg\imgn0.gif" rsrc="wbimg\imgo0.gif"
border="0" width="90" height="30" alt="Index" /><\/a><\/td>');
document.write (' <td title="creatures 1 &amp; 2" align=" center"
class="c5">');
document.write (' <a href="mc12.html" target="_parent">');
document.write (' <img src="wbimg\imgn1.gif" rsrc="wbimg\imgo1.gif"
border="0" width="90" height="30" alt="Creatures 1 &amp; 2"
/><\/a><\/td>');
document.write (' <td title="dragon warrior monsters" align=" center"
class="c5">');
document.write (' <a href="mdwm.html" target="_parent">');
document.write (' <img src="wbimg\imgn2.gif" rsrc="wbimg\imgo2.gif"
border="0" width="90" height="30" alt="Dragon Warrior Monsters"
/><\/a><\/td>');
document.write (' <td title="japanese pangya" align=" center"
class="c5">');
document.write (' <a href="mjp.html" target="_parent">');
document.write (' <img src="wbimg\imgn3.gif" rsrc="wbimg\imgo3.gif"
border="0" width="90" height="30" alt="Japanese Pangya"
/><\/a><\/td>'); document.write (' <td title="ogre battle saga"
align="center" class="c5">');
document.write (' <a href="mobs-start.html" target="_parent">');
document.write (' <img src="wbimg\imgn4.gif" rsrc="wbimg\imgo4.gif"
border="0" width="90" height="30" alt="Ogre Battle Saga"
/><\/a><\/td>'); document.write (' <td title="wizardry" align="
center" class="c5">'); document.write (' <a href="mw.html"
target="_parent">');
document.write (' <img src="wbimg\imgn5.gif" rsrc="wbimg\imgo5.gif"
border="0" width="90" height="30" alt="Wizardry" /><\/a><\/td>');
document.write (' <td title="guestbook" align=" center" class="c5">');
document.write (' <a href="mgb.html" target="_parent">');
document.write (' <img src="wbimg\imgn6.gif" rsrc="wbimg\imgo6.gif"
border="0" width="90" height="30" alt="Guestbook" /><\/a><\/td>');
document.write (' <\/tr>');
document.write (' <\/table>');
document.write (' <script type="text/javascript"
language="JavaScript1.1" src="rotatingimagemain.txt"><\/script>');
document.write (' <!-- Main Menu-Buttons End --><\/td>');
document.write (' <td>');
document.write (' <img src="menu_images/menuright.gif" width="4"
height="32" alt="menuright" /><\/td>');
document.write (' <\/tr>');
document.write ('<\/table>');

**************
the problem is, the rollover images do not show, any ideas why not?
THey do if wriiten properly in the html document.
Click to expand...

Whatever works for you but I find:
<!--#include file="menus.txt"-->
is rather easier to implement.
 
S

S Kalynuik

Thank-you again to all who helped.

I found a freeware tools to do the html to javascript conversion for me
from here,
http://www.easyhtools.com/ehsscreen.html

Works great, I paste the html code to the window, select convert to
javascript, save the converted script to a .js file, I remove the following
from the .js file:

<SCRIPT language="JavaScript" type="text/JavaScript">
</SCRIPT>

and then save, then I call the .js file to where I want it in the document
as follows:

<script language="javascript" type="text/javascript"
src="ktptgs-head.js"></script>

Thank-you agian to all.
BTW this method I am using above can be tested on a local machine as no asp
or php server is needed.
 
S

Steve Pugh

S Kalynuik said:
Thank-you again to all who helped.

I found a freeware tools to do the html to javascript conversion for me
from here,
http://www.easyhtools.com/ehsscreen.html

Works great, I paste the html code to the window, select convert to
javascript, save the converted script to a .js file, I remove the following
from the .js file:

<SCRIPT language="JavaScript" type="text/JavaScript">
</SCRIPT>

and then save, then I call the .js file to where I want it in the document
as follows:

<script language="javascript" type="text/javascript"
src="ktptgs-head.js"></script>

Thank-you agian to all.
BTW this method I am using above can be tested on a local machine as no asp
or php server is needed.
Click to expand...

And what happens when the user has JavaScript turned off? (And that
includes all search engines...)

Steve
 
S

S Kalynuik

And what happens when the user has JavaScript turned off? (And that
includes all search engines...)

Steve
Click to expand...

Well the simple answer, the user/visiter does not see the JavaScript parts,
I will be having a simple text navigation on non-JavaScript users (but why
have JavaScript turned off in this day and age), as to the Search Engines
not seeing those parts, thats fine its only the navigation and email parts
that use JavaScript that are repeated needing this method. But the plus
side using this method also stops Spam Robots from getting my email address
as I have the footer information of each page call'ed as above, therefore
no written email addy on any page, hence no spam to me.
 
W

Wÿrm

but why have JavaScript turned off in this day and age
Click to expand...

well, for a SECURITY (google for cross site vulnerablities etc.) reasons. In
my case it's because security reasons and that some websites try abuse
JavaScript to do things I dislike.
 
S

Stan McCann

Well the simple answer, the user/visiter does not see the JavaScript
parts, I will be having a simple text navigation on non-JavaScript
users (but why have JavaScript turned off in this day and age), as
Click to expand...

Because I don't know you or your programming skills? If I have a
reason to trust that you might know what you're doing, I *might* then
let you run a program on my computer.
to the Search Engines not seeing those parts, thats fine its only
the navigation and email parts that use JavaScript that are repeated
needing this method. But the plus side using this method also stops
Spam Robots from getting my email address as I have the footer
Click to expand...

That's only temporary. As more and more think this is going to protect
them from spam, the spammers will just come up with other ways so that
they can still harvest those addresses that can still be easily found
in the plain text of the page.
information of each page call'ed as above, therefore no written
email addy on any page, hence no spam to me.
Click to expand...

And no email from many of your visitors either I'd guess. Especially
that awful email complaining about your site. To really hide your
address, it must be done server side, not client side.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Simple web framework - improvements to makefile 0
How to discover a CSS Selector name? 8
CSS File does not really work? 1
Working on mobile css menu with plenty of frustration! 2
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
CSS: How can I stop overflow on the y-axis? 2
How to keep an a:hover effect with css like "onMouseOut()"? 2
Horizontal menu bar header 2

Members online

No members online now.
Total: 33 (members: 0, guests: 33)
Robots: 236

Forum statistics

Threads
473,763
Messages
2,569,563
Members
45,039
Latest member
CasimiraVa

Latest Threads

Top