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 menu bar with other page elements, like a main div, footer and top banner (4 sections).

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.

Without using PHP or SSI includes, is there a 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 main container with new content without affecting menus, header & footer-- i.e., 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 forums, 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:


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

</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:


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


</div>


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? (and without having to do PHP or SSI?) 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 simply paint the hyperlink page content 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 for each one in every page I link to.

I'm sorry if I'm missing something painfully obvious, but I don't get this. The only things I've seen say to use SSI and include PHP files. I understand you have to have support for those things via the ISP, and I'd like to avoid having to learn a bunch more complex stuff just to update my CSS DIV with menu selection content, like frames did easily. (Learning CSS has been hard enough!) THANK YOU for taking a moment to help, if you have a solution to this!

nope you can't

css is for styling things, not to build things
you still need the div codes on every page etc

you can't target div's either, for this you'll need to use an iframe inside that div

Love,
mirna

Thanks for the reply!

OK-- I've never used iFrames-- will have to study up on those.

Any comments on the best approach (in terms of ease of coding, maintenance, and performance) -- using iFrames for targeting new content in a CSS multi-container layout, vs using Server Side Includes to pull in the html file for each container?

(I take it those are my only two options for replacing a frame-based approach with CSS?)

Thank you!!!