So, I'm pretty new to CSS, and have a couple questions. (Ok, I'll be honest... This is the first time I've actually tried writing my own CSS page. )
First off, I currently have two divs (more might be added later). The main one, I would like to have centered, for the main content of the page. The second one is for the navigation, which I would like to keep at the left of the page. Now, this may be a bad idea (I'm not sure if it will work out good or not), but I would like to know if there is a way to keep the navagation on the screen as the user scrolls through the page.
My second question is also related to the navigation. I'm using a seperate image for each button, and cannot figure out how to do a rollover for each button in CSS. Is this possible in CSS, or would I need to use JS?
Last question for now: My current code is included below in it's entirety (minus the actual page text, because that's "confidential" right now). Should I be using a seperate CSS file, rather than keeping it all in one file? Each page will require some different CSS due to layout differences.
I'm sure it's probably less than perfect, but I'm working on it. (That, and some formatting was apperently lost when I copied it.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cartennes Nations - Home</title>
/* Begin Content Classes */
font-family:"Courier New", Courier, monospace;
/* End Content Classes */
/* Begin Navigation Classes */
border:2px solid #CC6600;
font-family: Courier New, Courier, monospace;
/* End Navigation Classes */
<!-- Begin banner map -->
<div id="banner"><img src="images/NavBanner1.png" alt="Banner Image" width="750" height="180" border="0" usemap="#Map" />
<area shape="poly" coords="96,151" href="#">
<area shape="poly" coords="97,152,153,152,138,173,81,173" href="index.html" target="_self">
<area shape="poly" coords="165,152,224,152,206,172,147,173" href="about.html" target="_self">
<area shape="poly" coords="235,152,292,152,275,173,217,174" href="contact.html" target="_self">
<area shape="poly" coords="304,152,362,152,345,173,286,172" href="rules.html" target="_self">
<!-- End banner map -->
<!-- Begin site content -->
<div id="content">Welcome to Cartennes Nations!
<br /> -snipped for a reason- </div>
Thank you for your time and assistance.