java who?
Total CSS
This Dreamweaver Template utilizes CSS to it's fullest extent. As a matter of fact, I could safely say this is a next generation Template. Before we continue, you need to be absolutely prepared that in using this Template you will need to do your homework with CSS.
What's so special about this Template?
Well, notice when you scroll that the header and menu remain in a fixed position? Now, make sure you give the menu a go. Notice the menu tool tips right below the menu? Normally this would be done with the use of JavaScript and frames. The special secret with this template is that it uses NO Javascript and NO Frames. Instead I have utilized CSS to accomplish this.
If you are asking yourself:
- What is JavaScript?
- What is Frames?
- I don not get why this is so special?
Then you may want to visit this site:
http://www.w3schools.com
Where did the idea derive from?
I must admit, the exploration of JavaScript-less tool tips came from Eric
Meyer and his CSS/EDGE presentations.
http://www.meyerweb.com/eric/css/edge
The IE6 hack for fixed layer positioning was first created by Eric Bednarz.
Check out his site detailing how this was done:
http://devnull.tagsoup.com
All I did was merely merge the two idea's into one design, make a few modifications to make it all function together and compile the completed project into a Dreamweaver Template.
Browser compatibilities
Ahhh yes, you may be asking yourself how this is going to fare in the various browsers. From my testing, this Template works great in IE 5.5+, Netscape 7 and Mozilla.
Opera does fairly well with the Template, but does not display the menu tool tips and seems to mess up the pixel positioning, not enough to ruin the layout, but enough to notice.
Sadly, Netscape 6 really struggles with this layout, although I have not given up hope yet.
Ok, here is where I become bold and brave. This layout will default to Non-styled text in Netscape 4. To see what I mean, click here. This is because I decided to use the import method to link the style sheet. This was done to hide the style sheet from Netscape 4.
I highly recommend you download these browsers and find out for yourself. As insentive, here is a listing of the URL's where you can download all of the above mentioned browsers:
Internet Explorer : http://www.microsoft.com/windows/ie/downloads
Netscape 7 : http://channels.netscape.com/ns/browsers/download.jsp
Netscape 6 : http://wp.netscape.com/download/archive/client_archive62x.html
Netscape 4 : http://wp.netscape.com/download/archive/client_archive47x.html
Mozilla (Latest Build) : http://ftp.mozilla.org/pub/mozilla/releases
Opera 6 : http://www.opera.com/download
Some things to keep in mind
This Template could potentially be very dangerous to use. Here are a few tips to keep in mind while using this Template:
You will need to be very careful to NOT insert long strings of text that may cause horizontal scrolling. If this happens, IE6 users will simply not be able to scroll. This also goes for images that may cause horizontal scrolling.
You will need to keep the header at a minimal height. Remember the menu is in a fixed position The height of the header will determine the placement of the menu (making sure the menu sits below the header). If the menu sit's too low, the tool tips, or even the menu it's self may appear below the bottom of the browser. If this happens, your visitors will NOT be able to view the hidden portion.
For good reasons, the Dreamweaver Editable Region for the main content is wrapped outside of the main <div> content area. When inserting content, make sure you are selecting inside of the <div> tag and not outside of it.
<div class="container">
<!-- TemplateBeginEditable name="Main content" -->
Content does NOT go here
<div class="content">
Content does go here.
</div>
<!-- TemplateEndEditable -->
</div>Finishing notes
I hope you enjoy working with this Template. If you have been wanting to bump your CSS skills up a notch, then this is for you. I have fully commented the CSS to help you figure out how this works.
I will not give support for this Template if you have made major modifications, or are wanting to do so. If you are completely new to Dreamweaver or Web Design, then this Template is NOT for you, instead come and visit our forums and we'll be happy to help get you started!