PDA

View Full Version : I need help: One Scroll bar for two frames



makaomelhor
Jul 13th, 2010, 03:31 AM
Hey,

I'm working on a website that is divided into two frames a Header frame and a main frame. This website has multiple pages and I want the header to be be on every page. I was wondering if there is anyway of me controlling both frames with a single scroll bar?

thanks,

Lucas

Kor
Jul 13th, 2010, 12:51 PM
Usually, this kind of job is done with server-side includes, not with frames. Frames are obsolete. And will be overlooked by the search engines.

makaomelhor
Jul 14th, 2010, 03:34 AM
Usually, this kind of job is done with server-side includes, not with frames. Frames are obsolete. And will be overlooked by the search engines.

Hey,

thanks for the reply...I've been trying to figure this out for a while...Im new to website building and i was wondering if you could explain a little further.
Im not sure what a server side includes are. Also what do you mean by frames being overlooked?

thanks

Apostropartheid
Jul 14th, 2010, 04:11 AM
Your curiosity about server-side includes will be fulfilled by a simple Google search (:

Frames are considered obsolete due to their horrible usability. Search engines may or may not penalize you for using them.

makaomelhor
Jul 14th, 2010, 05:28 AM
Your curiosity about server-side includes will be fulfilled by a simple Google search (:

Frames are considered obsolete due to their horrible usability. Search engines may or may not penalize you for using them.

Hey!

So do you know what the best alternative for frames would be?
this is the coding i have.

<HTML>
<head>
<title> China National Resource Recycling Association 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>

<frameset rows="155,*" frameborder="0" border="0" framespacing="0">
<frame src="header.html" name="menu" noresize scrolling=no>
<frame src="home.html" name="main" noresize scrolling=auto>
</frameset>

</html>

thanks

Kor
Jul 14th, 2010, 10:51 AM
Hey!
So do you know what the best alternative for frames would be?
Once again: server-side includes.
Here's an example on using PHP includes:

The code to be included in each page on top


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<?php
include 'head.inc.php';
?>

</head>
<body>
... rest of the HTML code
</body>
</html>

head.inc.php


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
... rest of the code for HEAD


It depends on what supports the server host. PHP is widely supported, but the same thing is to be done on using ASP, ASP.NET, Java, JSP, ... or whichever server-side language you may allowed to run on host.

mbaker
Jul 14th, 2010, 11:59 AM
what the best alternative for frames would be?
this is the coding i have.

<HTML>
<head>
<title> China National Resource Recycling Association 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>

<frameset rows="155,*" frameborder="0" border="0" framespacing="0">
<frame src="header.html" name="menu" noresize scrolling=no>
<frame src="home.html" name="main" noresize scrolling=auto>
</frameset>

</html>

What would be best depends on your knowledge and skills and on your access to resources. There is no objective "best" solution.

Here is a PHP alternative:


<!DOCTYPE html>
<html>
<head>
<title> China National Resource Recycling Association 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<?php

include 'header.inc.php';

?>

<p>... specific page content here ...</p>

</body>
</html>

Another alternative is to use a pre-processor such as PPWizard which you can run on your own computer before uploading pages to your website. It is available from http://dennisbareis.com/ppwizard.htm

Here is a PPWizard alternative:



<!DOCTYPE html>
<html>
<head>
<title> China National Resource Recycling Association 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>

#include header.ih

<p>... specific page content here ...</p>

</body>
</html>

mbaker
Jul 14th, 2010, 06:33 PM
Here is a version that uses floated divs instead of absolute positioning. I've left in (but commented out) some CSS that I used to figure out which div appears where on the page.

This still requires more work and there are certainly other, possibly better, ways of doing this.


<!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">
<head>
<base href="http://www.thefutureofhistory.co.uk/" /> <!-- delete this base tag from production pages -->
<link rel="icon"
type="image/png"
href="images/tfoh_favicon.png" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Future Of History</title>

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript">
</script>
<style type="text/css">
<!--
/* div {border:solid thin red;} */
body {
overflow-x: hidden;
background: url(images/tile1.gif) fixed;
}

/* #nav:before {content:"nav";} */
#nav {
width: 195px;
background:transparent;
color: #ffffff;
float:left;
}
/* #navlinks:before {content:"navlinks";} */
#navlinks {
height: 475px;
width: 175px;
background-color: #000000;
color: #ffffff;
margin:10px;
}
/* .frame:before {content:"frame";} */
.frame {
background-color: #000000;
color: #ffffff;
margin-bottom:20px;
}

/* #logo:before {content:"logo";} */
#logo {
width:175px;
height:85px;
background-image: url(images/tfoh_logo175.gif);
margin:10px 10px 15px 10px;
}

/* #main:before {content:"main";} */
#main {
background-color: #000000;
color: #ffffff;
margin:0 210px;
}
/* #mainholder:before {content:"mainholder";} */
#mainholder {
background-color: #000000;
color: #ffffff;
margin:0 10px;
}
/* #saying:before {content:"saying";} */
#saying {
width: 195px;
background: transparent;
color: #ffffff;
float:right;
}
/* #sayinglogo:before {content:"sayinglogo";} */
#sayinglogo {
width:175px;
height:97px;
background-image: url(images/saying175.gif);
margin:10px;
}
/* #contact2:before {content:"";} */
#contact2 {
height: 475px;
width: 175px;
background-color: #000000;
color: #ffffff;
margin:10px;
}
/* #contactdetail:before {content:"contactdetail";} */
#contactdetail {
height: 50px;
background-color: #000000;
color: #ffffff;
}

.heading1 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFF00;
font-size: 24px;
font-weight: bold;
}

.heading2 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFF00;
font-size: 12px;
font-weight: bold;
}

.maintext {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
}

a.contactlinks {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
text-decoration: none;
}

a:hover.contactlinks {
color: #FFFFFF;
font-size: 12px;
text-decoration: underline;
}

a.navlinks {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 24px;
font-weight: bold;
line-height: 20px;
text-decoration: none;
}

a:hover.navlinks {
color: #FFFF00;
font-size: 24px;

}
a.navlinkpage {
font-family: Arial, Helvetica, sans-serif;
color: #FFFF00;
font-size: 24px;
font-weight: bold;
line-height: 20px;
text-decoration: none;
}

-->
</style>
</head>
<body>

<div id="nav">

<div class="frame">
<div id="logo"> </div> <!-- end of logo -->
</div> <!-- end of frame -->

<div class="frame">
<div id="navlinks">

<a href="index.html" class="navlinkpage">Latest</a><br/>
<a href="web.html" class="navlinks">Web</a><br/>
<a href="print.html" class="navlinks">Print</a><br/>
<a href="film.html" class="navlinks">Film</a><br/>
<a href="motion.html" class="navlinks">Motion</a><br/>
<a href="blog.html" class="navlinks">Blog</a><br/>
<a href="honesty.html" class="navlinks">Honesty</a><br/>
<a href="links.html" class="navlinks">Links</a><br/>
</div> <!-- end of navlinks -->
</div> <!-- end of frame -->
</div> <!-- end of nav -->

<div id="saying">
<div class="frame">
<div id="sayinglogo">
</div> <!-- end of sayinglogo -->
</div> <!-- end of frame -->

<div class="frame">
<div id="contact2">

<div id="contactdetail">

<span class="heading2">Email:</span><a href="mailto:[email protected]?subject=Enquiry" class="contactlinks"><br/>[email protected]</a><br/>
<span class="heading2">Phone:</span><span class="maintext"><br/>07770 855143</span><br/>
<span class="heading2">Portfolio:</span><a href="TimDarker_TFOH_portfolio_small.pdf.zip" class="contactlinks"><br/>download 3MB pdf</a><br/>
</div> <!-- end of contactdetail -->
</div> <!-- end of contact2 -->
</div> <!-- end of frame -->

</div> <!-- end of saying -->

<div id="main">
<div id="mainholder">

<p class="heading1">Main content here.</p>
<p class="maintext">.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/></p>

</div> <!-- end of mainholder -->
</div> <!-- end of main -->

</body>

<!-- End of code for body -->
</html>

makaomelhor
Jul 15th, 2010, 04:17 AM
Hey
thanks for all of you guy's help.
The thing is that my website has a header and i want it to be there all the time. And on the main part i have a series of links that opens other html pages and i have target it to open on the main part.
The site will be uploaded using bluehost.
Im not sure how to use php to divide the tables...and be able to upload other pages onto it

Apostropartheid
Jul 15th, 2010, 07:42 PM
Alright, look, here's what you do.

You get the bit that is your header, and you cut it out and put it in a different file. I'm going to use a template I have to show you how to do it.

Pretend this is your homepage (its file name must be something.php, by the way).

<?php
$page = 'home';
?><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Lorem Ipsum</title>
<meta http-equiv="content-type" content="application/xml; charset=utf-8"/>
<style type="text/css">
* {
margin: 0;
padding: 0; /* universal reset */
}
body {
font: .825em/1.6 'lucida sans unicode', 'lucida grande', sans-serif;
}
#wrapper {
margin: 0 auto;
width: 800px;
}
h1 {
font-weight: normal;
font-size: 36px;
border-bottom: 1px #ddd solid;
padding: 20px;
}
p {
margin-bottom: 1.6em;
}
#header {
padding-bottom: 20px;
border-bottom: 1px #ddd solid;
}
#sidebar {
width: 209px;
float: left;
padding: 20px;
border-right: 1px #ddd solid; /* width: 209 + 20 + 20 + 1 */
}
#content {
width: 510px;
padding: 20px; /* width: 510 + 20 + 20 */
border-left: 1px #ddd solid;
margin-left: -1px; /* this makes the border extend all the way down the page despite whether the sidebar or content is longer. can be removed along with the border. */
float: right;
}
#footer {
clear: both; /* required to put underneath floats. */
border-top: 1px #ddd solid;
padding-top: 20px;
}
#navigation {
padding: 5px 0;
border-bottom: 1px #ddd solid;
}
#navigation li {
display: inline;
}
#navigation a {
text-decoration: none;
padding: 5px 10px;
}
a:link {
color: #39f;
}
a:hover {
color: #06c;
}
#selected {
color: #fff;
background: #39f;
}
label:after {
content: ":";
}
label {
font-weight: bold;
}
input[type="text"] {
display: block;
margin: 10px 0;
}
input[type="submit"] {
padding: 3px 5px;
}
fieldset {
padding: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Lorem Ipsum</h1>
<ul id="navigation">
<li><a <?php echo ($page == 'home') ? 'id="selected"' : 'href="/"'; ?>>Home</a></li>
<li><a <?php echo ($page == 'examples') ? 'id="selected"' : 'href="/examples"'; ?>>Examples</a></li>
<li><a <?php echo ($page == 'about') ? 'id="selected"' : 'href="/about"'; ?>>About</a></li>
<li><a <?php echo ($page == 'contact') ? 'id="selected"' : 'href="/contact"'; ?>>Contact</a></li>
</ul>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu orci velit. Nulla aliquam sem vitae leo interdum blandit. Integer mi ante, venenatis a rutrum ac, imperdiet eu nulla. Praesent pretium interdum vulputate. Suspendisse potenti. Phasellus bibendum mauris eu ipsum ornare a molestie felis vestibulum. Phasellus augue nibh, volutpat et bibendum lobortis, sodales eu sem. In sodales posuere mauris id consectetur.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<div id="content">
<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
<form action="http://example.com/" action="get">
<fieldset>
<legend>Setup</legend>
<label for="id">ID</label>
<input type="text" id="id" name="id"/>
<input id="insert" name="update" value="Insert" type="submit"/>
<input id="delete" name="delete" value="Delete" type="submit"/>
</fieldset>
</form>
</div>
<div id="footer">
<p>(c) copyright quelqu&rsquo;un.</p>
</div>
</div>
</body>
</html>

We need to find the piece of code which is the header. In my template, it is this snip of code:


<h1>Lorem Ipsum</h1>
<ul id="navigation">
<li><a <?php echo ($page == 'home') ? 'id="selected"' : 'href="/"'; ?>>Home</a></li>
<li><a <?php echo ($page == 'examples') ? 'id="selected"' : 'href="/examples"'; ?>>Examples</a></li>
<li><a <?php echo ($page == 'about') ? 'id="selected"' : 'href="/about"'; ?>>About</a></li>
<li><a <?php echo ($page == 'contact') ? 'id="selected"' : 'href="/contact"'; ?>>Contact</a></li>
</ul>

We cut this piece of code out of our home page and we save it in a different, new file with the filename "header.inc".

In its place in the home page, we put this:



<?php include(header.inc); ?>


This code includes, or "pulls", everything that is in the file header.inc, and sticks it in. When you update the header, all pages change accordingly.

This also has a very cool way of changing the navigation based on what you put in the variable $page at the top of the home page. Play around with it and see if you can work it out (if you can't, just delete it).

Also, did you know that tables for layout are bad (http://www.hotdesign.com/seybold/)?

Kor
Jul 15th, 2010, 08:09 PM
In other words, makaomelhor, these days, as a web developer, you must learn at least one server-side language and a DataBase query language and DB administration. Not necessarily at a high level, but at an average one. Even if you work with a specialized server-side programmer, you have to know the basis of that language. Usually (as it is a freeware combination), PHP/MySQL.