How to achieve frames-like modular setup with CSS ?

Hello all, this is my first post on these forums. Please bare with me through this slightly long post. I hope I am not offending any rules.

I have recieved the task of making a simple website for a sports team. What I intend to do is a basic design where there's a horizontal banner on top, then followed by two columns below that. One narrow column will be a list of navigation links, and the other wider column will be the main web page content. What I have in mind is very similiar to this page: www.ringette.ualberta.ca

What I was first going to do was use a basic tables layout using pure HTML. However, the problem with that is that the upkeep/maintainence of the page will be very difficult. Everytime another page is to be added, then I would have to add a navigation link into the navigation column of every single existing page. What a pain!

This is probably a good time to say that I am using just a plain text editor to make the website. No fancy programs to help me automate anything.

So my second plan was to use frames. This way, I can split up the page into modules where the navigation column (or frame) would be it's own "navigation.html" frame so that when I add a page, then I would only have to change this one .html file. This sort of solves my problem, however, frames are not very pleasing. Most people don't like them. I don't like how the scrolling will have to look if I used frames. That's why I looked further.

Now comes the CSS. After a few hours of research online, (I know nothing about CSS before today) CSS seems like a very efficient and clean way of defining the styles on your page. There was also promise that it would allow me to make the page modular (with 3 sections: top_banner, navigation, main_content) just like how it would work with frames. I picked up a CSS for dummies book and to my surprise, it says nothing about how to make it "modular." so that if i was to add a link to the navigation section, then that new link would appear on all my pages.

My question is, is it possible to achieve this frame-like modular setup with CSS? If not, what do you recommend me doing? Can someone please point me in the right direction.

The other question is, if this CSS thing will not work, then does that mean I will have to get a web design program? What's a simple web design program that would be appropriate for my task? Are there free ones that are good enough?


Thanks a bunch,

Weiyang

Do not use frames.
Do you know if you host supports PHP or ASP?
There is a much better way.

Yeah, Frames are as old as my great-grandfather!
Use CSS instead. You can have your page layout like THIS
Play around with the column or you might throw away the "rightcontent" div to get the layout the way you wanted.

Hi there Weiyang, first of all, welcome to Webforumz! You're certainly not offending any rules there

You're definitely doing the right thing using CSS for layout instead of tables or frames, and also the fact that you're using a text editor instead of a web design program is good news. I understand what you're asking and someone else asked a similar question a while back - I'll try and find the thread a bit later for the solution; someone else might give you the reply first though, it which case, great! Stick around though, either way we'll get your answer for you

check out http://www.cssplay.co.uk . There's some frame emulation layouts using XHTML / CSS.

Here is a link to a simple two column layout. View source to see the code.

As for the navigation. I would use a php include. Here is a nice tutorial on that.

You are on the right track for sure! Frames are not good. They are terrible for Search Engines so avoid those for sure.

Good luck!

I think his problem is updating would mean changing every single file.
To solve this use PHP/ASP includes if your server supports them.

Ah yes PHP includes, I knew someone would come up with it...

Hmmm .. yeah ... first of all CSS is only presentational. It has nothing to do with the "frame-like modular setup" of a page.

The things like header, navigation, content, etc... are just sections that define the site. Separations in the mark-up.

What you are looking for is includes so see the link Lchad gave you just a few posts above this one.

Faux Frames etc could be used. There are plenty of great examples around.

__________________

Good morning and thank you all so much for the quick replies.

I took on this small project thinking of doing it just in classic html.
Yesterday, I realized, to keep it elegant, I'll probably have to learn some CSS.
Today, I realized, on top of CSS, I'll need php as well... yikes!

I guess the next step is to see if the "server" I'll be hosting on will support php.
What I intended on doing was just registering for a domain (already done) and have that forward to my university student webspace and just mask the url to just show the domain. I wonder if my student webspace supports php.

Weiyang

Good News!
I just spoke with the network IT guys and it looks like my university webspace does support php. He showed me a simple home page he was making using php and it looks like it's a lot closer to an actual programming language than html or CSS. Reminded me a lot of java scripts. Is my first impressions correct?

It seems to be able to select what you need and output that into the browser so that the source that's visible to the browser is only the output of the php code and not the whole thing. So my next question is, can php be used in conjunction with CSS? I'm gonna guess it can be. The network IT guy told me to google up some php scripts.

Weiyang

PHP's main function is to output html. This can then be styled with CSS.

Yes, PHP can be used in conjunction since PHP outputs HTML. HTML and CSS go hand in hand.

__________________
Marc
Staff Manager - Webforumz.com

Want to be a moderator? PM me.

I think that the focus of this thread has shifted and people are not answering the initial question.

What I think the OP wants to know is 'how do I avoid hard coding the navigation into each page?'

Frames *used* to be an acceptable answer (somewhere around 1997 or so), but for a thousand reasons I won't go into here, they are not.

The most simple answer is to use a SSI (server-side include) file for common page elements, like common navigation, headers and footers.

All you have to do is create a file that containes the snippet of code and 'include' it in as many pages as you like.

For instance, if I wanted a link that to CNN.com in my page (in the header, footer or nav) then I would create an 'include' file and save it either as a text (.txt) file or as a snippet of html (.htm)

A short example would be to save this:

Code: Select all

<a href="http://cnn.com">Get the latest news</a>

as in a directory called 'includes' (you could name it either newsLink.txt or newsLink.htm)

Then I can include it anywhere I like by using:

Code: Select all

 
<!--#include virtual="/includes/newsLink.txt"-->
or
<<!--#include virtual="/includes/newsLink.htm"-->

Then in your page you would include the file where you like and when someone clicks the 'Get the latest news' link they will be taken to CNN.com.

Later, if you wanted to send your users to MSNBC.com instead of CNN, then all you would have to to is change the URL in your newsLink.txt (or newsLink.htm) file and the change would be global throught the entire site.

You can even use multiple includes for your entire navigation, copyright info, search forms, font resizing...and on and on without having to learn another language.

I hope this helps.