CSS Repetition question

ASP Free Forums Sponsor:

October 11th, 2005, 07:09 PM

satyrid

Registered User

Join Date: Oct 2005

Posts: 9

Time spent in forums: 4 h 46 m 2 sec
Reputation Power: 0

CSS question - moved to Programming

This question has been moved to Programming forum, where it seems to be a better fit. Sorry for not picking the right one the first time!

***********************************

I am fairly new working with CSS and would be most grateful for an answer to a conceptual question. I am trying to combine a rather complex hover menu with other page elements, like a main div, footer and top banner.

I knew how to do this kind of thing with frames, where you could change the content in any frame while leaving everything else alone.

My question is, is there some way to accomplish that in CSS, or do I have to repeat all the code for every container on every page where I change content? I can't imagine having to do that, but I am confused as to how one simply refreshes a container with new content without affecting menus, header & footer. I don't know how you avoid "repainting" the entire window when you just want to change content in one container.

Any help or pointers on this would be very much appreciated! I have been stumped on this for a while and can't find a direct answer to this question in any tutorials or books I've looked at.

Here is code to illlustrate my question:

CSS:
#menu { width:5em; padding:0.3em;
background:#fff; color:#000;position: fixed; top: 171px;}
#main { position: absolute; top: 172px; left: 12em;
padding-bottom:0.5em; }
#menu hr { display: none; }
#menu ul { margin: 0 0 0 1em; padding: 0; }
#menu li { margin: 0; padding: 0; }

#topbanner {width:607px;
position:fixed;top: 0px;left: 12em;}

#footer {width: 100%; position: fixed; bottom: 2px; left: 12em;}

Here is the HTML for the main page:

<!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>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta>
<title>Title info</title>
<meta name="description" content="Example"></meta>

</head>

</body>
<div id="main">
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 
Main Content goes here; 

</div>
<div id="menu">
<hr>
<ul>
<li><a href="home.html" title="Homepage">Home</a>
<li><a href="about.html" title="About us">About</a>
...
</ul>
</div>

<div id="topbanner">
<img src="../images/header1.gif" alt="banner" name="banner" border="0" id="banner" />
</div>

<div id="footer">

Footer information goes here

</div>
</body>

Here is HTML for the "About" link in the menu:

<!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>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta>
<title>Title info for About</title>
<meta name="description" content="Example"></meta>

</head>

</body>
<div id="main">
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 
This is the ABOUT link! 

</div>

I made these long so I could test the fixed positioning of all windows except the main content pane.

Here is my question with reference to this specific example: When I click on one of the menu links, is there any way that I can retain the menu, header & footer information without explicitly restating it all in the file I hyperlink to? The way I have it now, if you click on menu list item "About" you will see the "About" content in the correct location in the window, but there is no menu, header, or footer. I am trying to make this work like frames does, so everything stays visible and I paint the hyperlink page in the "main" div container.

The way it looks to me right now, if I want to see content for all 4 containers, then I have to put all the relevant information in every page I link to.

I'm sorry if I'm missing something painfully obvious, but I don't get this.

Last edited by satyrid : October 11th, 2005 at 10:12 PM. Reason: Move to more appropriate forum --Programming

October 12th, 2005, 10:37 AM

elijathegold

Senior Fire Wizard

Join Date: Feb 2005

Location: Ashford, Kent. England

Posts: 5,651

Folding Points: 1656890 Folding Title: Super Ultimate Folder - Level 4

Time spent in forums: 2 Months 2 Weeks 2 Days 4 h 9 m 8 sec
Reputation Power: 301

You do have to refresh the entire page - that's what you do with frames.

What you can do is use Server Side Includes to have the common data in
one file which is then included into every page.

Here is a Tutorial

__________________
And he picked it all up... in his pick-up.

Friends of Shemzilla

October 12th, 2005, 07:12 PM

satyrid

Registered User

Join Date: Oct 2005

Posts: 9

Time spent in forums: 4 h 46 m 2 sec
Reputation Power: 0

PHP & SSI Includes vs IFrames

Thank you for your help!

I've been reading up on the Server side includes, along with other approaches, and wanted to ask some further questions, if you're willing to answer.

From what I can gather in the last day, there are three approaches to targeting my CSS /div so I don't have to physically encode every page with each container's data:

1. SSI includes
2. PHP includes
3. IFrames

A. Are Includes better to use than IFrames?

B. If my planned ISP supports both PHP and SSI, and I am not familiar with either one, which one is best to use, in terms of learning curve?

C. If I use SSI, I understand I can avoid renaming all files to .shtml by using XBitHack and a .htaccess file, right? I'll have to see if the tutorial you referred me to tells how to do that.

D. If I do SSI or PHP includes, how do I test and debug the results on my own PC before sending it up to the Server? (I am doing all my coding in Notepad, then testing in a browser.)

October 13th, 2005, 03:14 AM

elijathegold

Senior Fire Wizard

Join Date: Feb 2005

Location: Ashford, Kent. England

Posts: 5,651

Time spent in forums: 2 Months 2 Weeks 2 Days 4 h 9 m 8 sec
Reputation Power: 301

Quote:

Originally Posted by satyrid

A. Are Includes better to use than IFrames?

I think so. Others may differ

Quote:

Originally Posted by satyrid

B. If my planned ISP supports both PHP and SSI, and I am not familiar with either one, which one is best to use, in terms of learning curve?

SSI is easier to learn but PHP is far far better in the long term. If you have
the choice, have a go with PHP.

Quote:

Originally Posted by satyrid

C. If I use SSI, I understand I can avoid renaming all files to .shtml by using XBitHack and a .htaccess file, right? I'll have to see if the tutorial you referred me to tells how to do that.

That sounds suspiciously like Apache. So that is outside of my knowledge
area

Quote:

Originally Posted by satyrid

D. If I do SSI or PHP includes, how do I test and debug the results on my own PC before sending it up to the Server? (I am doing all my coding in Notepad, then testing in a browser.)

Make sure you have a webserver installed and if using PHP, make sure
you have PHP installed. Open the file in the browser using the
http://localhost/path/file.ext form

Hope this helps.

Comments on this post

satyrid agrees!

October 14th, 2005, 06:31 PM

satyrid

Registered User

Join Date: Oct 2005

Posts: 9

Time spent in forums: 4 h 46 m 2 sec
Reputation Power: 0

Thanks so much for your suggestions. If I go the PHP route, I found something called SOKKIT that looks to streamline installation and configuration of PHP. http://www.sokkit.net/

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: