...
PDA

A few CSS questions

Aceramic
10-19-2007, 06:26 PM
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Cartennes Nations - Home</title>
<style type="text/css">

<!--

/* Begin Content Classes */

* {
margin:0;
padding:0;
}

body {
background-color:#000000;
background-image:url(images/starfield1024_2.jpg);
background-repeat:no-repeat;
}

.background {
background-image:url(images/background.png);
background-repeat:repeat;
border-color:#CC6600;
border-style:solid;
border-width:2px;
width:750px;
height:auto;
position:absolute;
top:185px;
left:215px;
}

#banner {
background:none;
width:750;
height:180;
position:absolute;
left:215px;
}

#content {
font-family:"Courier New", Courier, monospace;
font-size:18px;
color:#990000;
}

/* End Content Classes */

/* Begin Navigation Classes */

#nav {
background-image:url(images/background.png);
background-repeat:repeat;
float:left;
width:150px;
height:600px;
position:fixed;
top:185px;
left:0px;
border:2px solid #CC6600;
}

a {
font-family: Courier New, Courier, monospace;
font-size: 12px;
color: #CC6600;
}

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
color: #990000;
}

a:hover {
text-decoration: underline;
color: #990000;
}

a:active {
text-decoration: none;
color: #CC6600;
}

/* End Navigation Classes */

-->

</style>
</head>

<body>

<!-- Begin banner map -->
<div id="banner"><img src="images/NavBanner1.png" alt="Banner Image" width="750" height="180" border="0" usemap="#Map" />
<map name="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">
</map>
</div>

<!-- End banner map -->

<!-- Begin site content -->

<div class="background">
<div id="nav">
<a href="index.html">"</a>
</div>
<div id="content">Welcome to Cartennes Nations!
<br />
<br /> -snipped for a reason- </div>

</div>
</body>
</html>

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.
dcostalis
10-19-2007, 06:43 PM
Part one:

Yes, you can have the div stay on screen as the user scrolls.
"position:fixed;" along with setting the left and top properties how you want them will keep it locked in place.

Part two:
the hover property can change the image or color or whatever as the item is hovered over
example:

#nav #link1{
background:URL('./images/link1.gif');
}
#nav #link1:hover{
background:URL('./images/link1-hover.gif');

When I use this method, i then use a full transparent 1x1 gif resized to the size needed for the <a> tag to wrap around. Some call it sloppy, I call it very efficient.

Part three:
Make yourself a base CSS file that will work globally. There is something to be said for efficiency in not having to load information for tags that won't be used on a specific page, but there's no sense in making 9 different CSS pages just to save 1K of loading each time. If there is one specific page that will use many tags that will ONLY appear on that page, it may make sense to create a supplemental stylesheet, however. Really, it just makes sense to use different tags for different components.

I hope my run-on sentences made enough sense there.
Aceramic
10-22-2007, 04:42 PM
Ok, so after all this time, I had only been previewing the page in FF... Bad mistake.

Here's what it looks like in FF (http://www.freewebs.com/tkgg/data/FF.jpg)

And now in IE (http://www.freewebs.com/tkgg/data/IE.jpg)


What's up with that?!
I don't think anything has changed in the code from what I posted previously... I just now decided to check it in IE. :/ By the way, in FF, it looks exactly like it's supposed to (aside from one image not displaying correctly, which may be my mistake, need to check on that) but in IE, it's floating the navigation on top of the other div. Changing the "position:" to various options (fixed, absolute, etc) will change where it floats inside the other div, but none of them will magically put it in the right place. (which is supposed to be to the left of the other div, like it is in FF) :(
Aceramic
10-23-2007, 08:10 AM
By the way... I'm an idiot. I think I just figured it out. :)


I guess I'll find out tomorrow... Err... In 6 1/2 hours, I mean.


Yep... Fixed. It should have been painfully obvious, too. :/

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum