CSS - Using Xml Attributes In Css

CSS dummy reporting in here. This does what i need it to, but how could i make it better...and please point me to a good tutorial on not only using DIV tags with ID and classes, but referencing

Code:

/* links for navAlpha menu */	
#navAlpha a {
	color:#09c;
	font-size:13px;
	font-family:verdana, arial, helvetica, sans-serif;
	font-weight:600;
	text-decoration:none;
	
}
#navAlpha A:link {
	COLOR: white; 
}
#navAlpha A:active {
	COLOR: white; TEXT-DECORATION: none
}
#navAlpha A:visited {
	COLOR: white; TEXT-DECORATION: none
}
#navAlpha A:hover {
	COLOR: blue; TEXT-DECORATION: underline
}

/* links for navAlpha menu */		
#navBeta a {
	color:#09c;
	font-size:13px;
	font-family:verdana, arial, helvetica, sans-serif;
	font-weight:600;
	text-decoration:none;
	
}
#navBeta A:link {
	COLOR: white; 
}
#navBeta A:active {
	COLOR: white; TEXT-DECORATION: none
}
#navBeta A:visited {
	COLOR: white; TEXT-DECORATION: none
}
#navBeta A:hover {
	COLOR: blue; TEXT-DECORATION: underline
}

I am trying to create different link attributes for different areas on the same page. For example, I have a banner area that is a dark color and the links need to be a lighter color for contrast, but on the main body of the page the background is white, so I want the links to be darker colors. I also want the hover colors to be different on the different types of links. I have tried using different classes of links, but they all seem to default to one or the other. Any suggestions?

Thanks for taking the time to read my question.

I am wondering if it is possible to control table attributes with css sheets.

For example,

center a tabel
modify border size
modify cellpadding
modify cellspacing

Thanks again,

Brad

Okay, so I am having some issues in positioning items with CSS properly. I have this div first:

Code:

#main
{
	position: relative;
	width: 927px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(/planetscuba/images/main.png);
	background-repeat: repeat-y;
	padding-top: 10px;
	padding-left: 35px;
	padding-right: 35px;
	padding-bottom: 10px;
}

Then inside that tag I have 4 more tags, which are just columns of data.

Code:

#navside
{
	position: relative;
	top: 0px;
	left: 0px;
	width: 150px;
	border-right: #FFFFFF medium dotted;
	border-bottom: #FFFFFF medium dotted;
	padding-bottom: 10px;
}

#column1
{
	position: absolute;
	top: 15px;
	left: 160px;
	width: 222px;
	text-align: center;
}

#column2
{
	position: absolute;
	top: 15px;
	left: 397px;
	width: 222px;
	text-align: center;
}

#column3
{
	position: absolute;
	top: 15px;
	left: 634px;
	width: 222px;
	text-align: center;
}

Now how I have it right now is the elements are all positioned correctly, but #main does not resize dynamically, which is a problem as I am adding data from a server in these columns, and the amount could change from time to time.

In addition the way I am doing is more then likely bloated, but it's the only way I know how to do this. I have a navigation menu on the side which is #navside, then I want to display 3 columns of data, essentially one image and a couple words underneath each image in each column. Now this is all coming from a database, so the easiest way would be just to have the navbar on the side and then content in the rest of the #main div but I don't know how to properly position everything apart from each other without using mass amounts of   tags.

So to summarize, first problem is to be able to position everything properly so that #main resizes dynamically and then second would be to find some better way to do this. If you can help me on both that would be awesome. Thanks for your help in advance.

Hi all,

I am recreating some nav links. Instead of having them be text, I am converting them to images. 3 images per link: regular, hover, visited.

The test page is here

You will see "Home" That is an image. The other 3 haven't been messed with yet and are still text.

Here's my problem. As I said, The link itself will just be an image. When hovered over, it will go to the same image, just a different colored one. After clicked, it will display a third image instead, once again a different color.

BUT, elsewhere in my CSS I have a section where visited links are set to turn black, and I think THAT'S what causing the home image to disappear after visited.

Could ya'll have a look at my source and CSS and tell me what you think I can do to fix this?

CSS file is here

Thanks!

Chris