Hey bros

**Irish** · 01-07-07, 12:41 AM

dI started to learn how to make a website about 2 weeks ago and since then I've managed to basically do it all, with just one lasting problem, bastard frames. I used frames because the content was likely to change, and rather than manually update each page with the new navigation links, if I used frames I'd just have to edit that and all the rest would update automatically.

A created a "top" frame and a "content" frame, top being present on every page and content changing for each page. I used css to define some properties but also some javascript to make the backgound image of the navigation change when I scrolled over it. (I used text over the top, so I could have a standard navigation button, as opposed to have a seperate image for every navigation eg. home/roster/forum etc.)

"top"

->Open Spoiler<-

With html of;

->Open Spoiler<-

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />

<!-- Start of logo -->
<img src="images/logo2.png" width="100%" height="150" alt="#BringIT| Logo">
<!-- End of logo -->

<!-- Start Navigation Definition -->
<script type="text/javascript">
<!-- Hide.

if (document.images) {
navblue = new Image(); navblue.src = "images/navblue.png";
navred = new Image(); navred.src = "images/navred.png";
}

function turn_off(cell) {
if (document.images != null) {
cell.style.backgroundImage = "url('" + navblue.src + "')";
}
}

function turn_on(cell) {
if (document.images != null) {
cell.style.backgroundImage = "url('" + navred.src + "')";
}
}
// End  Hide -->
</script>
<!-- End  Navigation Definition -->

</HEAD>

<BODY>

<!-- Start of banner -->
<div id="banner">
Welcome to our site, we hope you enjoy your stay.
<br>
<marquee>www.XXX.com</marquee>
<!-- End of banner -->


<!-- Start of Navigation Definition -->
<table class="navbar" cellspacing="0" cellpadding="0">
<tr>
<td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="http://www.xxx.com "target="_content">Home</a></td>
<td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="http://www.xxx.com/roster.html "target="_content">Roster</a></td>
<td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="http://www.xxx.com/forum "target="_content">Forum</a></td>
<td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="http://www.xxx.com/server.html "target="_content">Server</a></td>
<td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="http://www.xxx.com/screenshots.html "target="_content">Screens</a></td>
<td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="http://www.xxx.com/news.html "target="_content">News</a></td>
<td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="mailto:xxx@xxx.com" target="_content">Contact Us</a></td>
</tr>
<tr>
<td><img src="images/navblue.png" width=14.25%></td>
<td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="http://www.xxx.com/map.html" target="_content">Map</a></td>
<td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="http://www.xxx.com/chat.html" target="_blank">Chat</a></td>
<td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="http://www.xxx.com/arcade.html" target="_content">Arcade</a></td>
<td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="http://www.xxx.com/wars.html" target="_content">Wars</a></td>
<td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="http://www.xxx.com/archive.html" target="_content">Archive</a></td>
<td><img src="images/navblue.png" width=14.25%></td>
</tr>
</table>
<!-- End  Navigation Definition -->

</BODY>
</HTML>

Anyway, that was all good and dandy. I then made some frames;

->Open Spoiler<-

ALthought that worked within itself, two problems arised;
First, my contents became longer than the page, so they required a scroll bar.

->Open Spoiler<-

Second, the top frame takes up a bit of space, and when viewing large images you can only see part of it at a time, which without frames you'd be able to see in your full sized browser window.

->Open Spoiler<-

I don't want to use frame borders/allowing resize becaues that looks shit, nor do I want to scale the images down so they're tiny, because that looks shite too.

What I really want is to make it so;
1. I have the "top" information on every page.
2. Have it so I can edit the "top" information at a single point and it will automatically update it for the rest of the pages.
3. Make it so there is just one scroll bar, for the whole page.

I tried puting my "top" and "content" rows in a frame coloum, with * length and auto scrolling but that didn't work. I also tried creating another html frame file, with just one column, and making the frame file (with "top" and "content") the colum with auto scroll but that didn't work either. I then though about css but does javascript owrk in css and also, I couldn't make an actual table within it could I? I know I could adjust the properties, but not the actual content? Oh, I also tried referencing "top.html" as a background image in the css file and the using the <div id> function in a html (I knew that wouldn't work but is there another reference I could use that'd work?).

As a last resort I could copy the navigaton table into every page manually, that'd work but then I'd have to edit them all manually again if I wanted to change the navigation in anyway. Is what I want to do actually possible?

**the1chaos** · 01-07-07, 05:57 AM

Does your server have php installed? If so, make the files a .php and use <?php include("path/to/toppage.php"); ?>. Also, I advise using CSS' Hover instead of a javascript. That should fix quite some things. I'll drop in some code later.

**Revenge** · 01-07-07, 08:59 AM

Frames are an obsolete method of making web pages. It's a lot easier and a lot more standards-compliant to use a server-side scripting language like PHP to 'include' files within other files. That way, you still only need to update one file to change a section on every page.

So if you wanted a table to be shown at the top of every page, you would do something like this on every page:

PHP Code:


<html>
<head>
   <title>Test</title>

   <meta name="keywords" content="test,test1,test2" />
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

   <link rel="stylesheet" src="style.css" media="screen" type="text/css" />
</head>
<body>

<?php include('header.html'); ?>
<!-- page-specific content goes below -->

</body>
</html>

**Irish** · 01-07-07, 10:47 AM

the1chaos: I used javascript because I wanted to change the background image whilst having text that also changed on mouseover, over the top of the background image. I didn't know how to do that via css.

Anyway, after fixing a few typos I managed to get it to work using .php files, that was indeed a lot easier than I thought it'd be. Thanks to both of you for helping.

**the1chaos** · 01-07-07, 11:06 AM

Background-image: url(path/to/file.png);

Glad it's working now, though. Be sure to knock if you have any trouble further.

**Adretheon** · 06-07-07, 10:56 AM

Hey guys,

I decided that since I'm always playin on the server that I should go ahead and be apart of the community. Thanks for the fun times.

Adretheon