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.
<!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>
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.)
Thank you for your time and assistance.