CSS frames go from being very easy, to very hard, very quickly. This page is meant to explain most of the easy stuff. The links to your right and left, down the side of the page are valuable resources that can help you advance your CSS skills as well as show you how to use the XHTML Strict document type to structure page content in a logical manner and maximize the overall amount of users who will be able to even access your web pages.
The CSS frame effect being displayed on this page demonstrates how you CAN achieve the look and functionality of a traditional frame set using just CSS and XHTML. If you know anything about the search engines, then you know you do NOT want to use a regular old fashion frameset on a web site that you would like to see ranking for something, some day.
Css Frameset Explained by CSSZenGarden Web Design Gurus
What happens with normal old bad for Search engine marketing frames is that in order to create the framed page you would have to split the pages up into separate files that are then loaded into the screen using a "frame set file" that displays all of your files in the browser window at once, visually it would appear to be all part of the same page. But really there is no virtually no HTML on the "frameset file" page at all. Except for the links to the different files being displayed as the parts of the framed page. Old frames are one the worst things that you can do to your web site as far as the search engine spiders are concerned.
Using CSS frames however we can keep all of the content contained in one file, the way that the search engine spiders like it to be - BUT also get the look and functionality of using actual frames.
With the exception of being able to upload one of the external frame files that are being referenced by your frameset document and how it would updated that part of the page site-wide. There is a better way to automatically update selected areas of a web site, site wide, by up dating a single file, by using include files that get rendered into the pages each time a page is requested using a dynamic scripting language such as; ASP, PHP or ColdFusion.
But enough about OLD FRAMES - NEW CSS FRAMES ARE HERE TO SAVE THE DAY!
Lets get started then.
Making CSS frames is easy. It's getting them to work the same way in every browser, just like a traditional frame set that can become major pain in the butt.
First you will need to write a div tag in the spot where you want your CSS frame to be displayed in the body of your code, like this:
<body>
<div class="cssframe"></div>
</body>
Then put this CSS in this head of your code:
<head>
<!--
<style type="text/css">
.cssframe {
overflow: auto;
}
</style>
-->
</head>
CSS HTML Frames
Now set the size, and placement of your CSS frame using height, width, top,and left:
<style type="text/css">
.cssframe {
overflow: auto;
height: 400px;
width: 200px;
top: 0px;
left: 0px;
}
</style>
-->
Of course all the measurements are up to you, as well as the name of the custom class that I called "cssframe" in this example. Now you are ready to fill up your <div class="cssframe">tag with lots of content</div> (enough to surpass the height that you assign to your div) and There you have it: The spider friendly, CSS frame.
That Was Easy
Sure, but remember what I warned you about CSS frames getting very hard, very quickly? Well if you browse through the resources to the right you will find that I may have understated the issue. There are countless errors that occur implementing CSS frames that require browser specific hacks in the CSS. But as always when presented with huge obstacles the "code community", as I like to call us, responds with huge solutions. Unfortunately I don't yet understand enough about advanced CSS frames issues to talk intelligently about them. I can tell you however the general idea behind the solution seems to be browser specific CSS hacks used to trick some browsers into stopping at a certain point while others read on. If some one can explain this concept, and maybe some basic rules
to it, in simple terms please let me know and I will post it here, or link to the article, or what ever it takes! If you are confused a little bit, that's normal, but trust me you will regret it, if you let the complexity CSS frames scare you away before you examine the benefits. As people become much more comfortable and proficient using CSS, sooner or later everyone will realize the two big benefits:
One: The big frameset problem, solved!
Frames are cool and everybody knows it! The problem is that frames are known to cause trouble when search engine spider robots index your framed page. The reason being; that there is really no content on the frameset's page, the frames consists of just links to pages that do have content. By switching from traditional to CSS frames you can eliminate the one and only reason not to use frames. Giving you the framed effect without splitting the content into separate files! Which is the freaking spectacular for designers like me, who uncompromisingly want there site to look, feel and work a specific way. All the frames, none of the search engine issues, what more could you ask for?
Two: From a curse to a blessing.
As a result of being absolutely positioned, CSS frames allow you to put the main content area right after the body at the top of your code. The top of your body is what the search engine reads first, you want to make a good impression don't you? Then clean up your head and the top of your body! Spiders don't want to have to sift through your huge JavaScript navigation on every page. For example hostinghorse.com is a site I made using tables and JavaScript rollovers. Every page has allot of code in the body before my juicy content areas. If I were to re-create it using absolute positioning and place the the content area at the top of the body, I would probably rank better.
CSS frames are not always for the novice CSS writer. I know I have made them seem very easy, and if browsers were more standardized, they would be this easy. I wish I could explain more about why they get so complex but I am still struggling with them, so I don't want to confuse you or sound stupid. If you know my problem with finiteminds.com I would appreciate your comments. Enjoy your simple CSS frames and enjoy learning more about what makes CSS frames so complicated, yet rewarding.
CSS Frameset Resources
Alex has a great resource to pull code from. I especially like the interlocking and centered layouts.
