Repeating Hrefs with Different styles

[Grey]

I have three areas that I have hrefs in..I wanted them styled differently visually. I get a msg telling me the obvious. I repeated the divs.. Im struggling with how to do this in classes to elminate this issue.. and any other not so bright thing you see in the css pls.. Can you also show me what the html should be displayed like for this issue..

/* CSS Document Events1 */

body {
	background: #0d1d50;
	text-align: center;
	font: normal 12px verdana,aria,sans-serif;
	color: #B4B4FB;
	margin: 1px;
	padding: 0;
}

#header {
	background: #0d1d50;
	padding: 10px;
	margin: 0;
	text-align: center;
	color: #FFF;
}

#header h1 { font-size: 200%; }

h5 {
	color:yellow;
}

#maincol {
	PADDING-RIGHT: 10px;
	PADDING-LEFT: 10px;
	BACKGROUND: #0d1d50;
	PADDING-BOTTOM: 10px;
	MARGIN: 0px;
	PADDING-TOP: 10px;
	
}

 table#events {  
   background-color:#CA9D04;   
	border: solid #000 3px;   
	width: 500px;
}

table#events td {  
  padding: 5px;   
  border: solid #000 1px;
}

.data {    color: #000000;   
 text-align: center;   
  background-color: #FCFAC0;
}

.toprow {  
  font-style: italic; 
  font-weight:900;  
  text-align: center;  
  background-color: #000066;
}

.leftcol {  
  font-weight: normal;   
  text-align: left;   
  width: 250px;  
  background-color: #000066;
}

/* Begin Events2 Table */


table#events2 {  
   background-color:#CA9D04;   
	border: solid #000 3px;   
	width: 500px;
}


table#events2 td {  
  padding: 5px;   
  border: solid #000 1px;
}

.data2 {    color: #000000;   
 text-align: center;   
  background-color: #FFFF66;
}

.toprow2 {  
  font-style: italic; 
  font-weight:900;  
  text-align: center;  
  background-color: #0033CC;
}

.leftcol2 {  
  font-weight: normal;   
  text-align: left;   
  width: 250px;  
  background-color: #0033CC;
}


table#events3 {  
   background-color:#CA9D04;   
	border: solid #000 3px;   
	width: 500px;
}


table#events3 td {  
  padding: 5px;   
  border: solid #000 1px;
}

.data3 {    color: #000000;   
 text-align: center;   
  background-color: #FFFF66;
}

.toprow3 {  
  font-style: italic; 
  font-weight:900;  
  text-align: center;  
  background-color: #0033CC;
}

.leftcol3 {  
  font-weight: normal;   
  text-align: left;   
  width: 250px;  
  background-color: #0033CC;
}

/*-- begin events 4 */

 table#events4 {  
   background-color:#CA9D04;   
	border: solid #000 3px;   
	width: 500px;
}

table#events4 td {  
  padding: 5px;   
  border: solid #000 1px;
}

.data4 {    color: #000000;   
 text-align: center;   
  background-color: #FCFAC0;
}

.toprow4 {  
  font-style: italic; 
  font-weight:900;  
  text-align: center;  
  background-color: #000066;
}

.leftcol4 {  
  font-weight: normal;   
  text-align: left;   
  width: 250px;  
  background-color: #000066;
}


#navbar ul {
	margin: 0;
	padding: 5px;
	list-style-type: none;
	text-align: center;
	background-color: #0d1d50;
}

#navbar ul li { display: inline; }

#navbar ul li a {
	text-decoration: none;
	padding: .2em 1em;
	border-style: outset;
	border-color: #8DA5F1;
	border-width: 3px;
	color: #fff;
	background-color: #0d1d50;
}

#navbar ul li a.button:visited   {
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	border-style: outset;
	border-color: #8DA5F1;
	border-width: 3px;
	background-color: #FFFFCE;
	width: 125px;
	color: navy;
}

#navbar ul li a:hover {
	color: #000;
	border-style: outset;
	border-color: #F4F707;
	border-width: 2px;
	background-color: #CA9D04;
	}

#navbar2 ul {
	margin: 0;
	padding: 5px;
	list-style-type: none;
	text-align: center;
		color:  #B4B4FB;
	background-color: #0d1d50;
}

#navbar2 ul li { display: inline; }

#navbar2 ul li a {
	text-decoration: none;
	padding: .2em 1em;
	border-style: outset;
	border-color: #8DA5F1;
	border-width: 3px;
	color: #fff;
	background-color: #062DA9;
}

#navbar2 ul li a.button:visited {
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	color:  #B4B4FB;
	border-style: outset;
	border-color: #8DA5F1;
	border-width: 3px;
	background-color: #FFFFCE;
}

#navbar2 ul li a:hover {
	color: #000;
	border-style: outset;
	border-color: #F4F707;
	border-width: 2px;
	background-color: #CA9D04;
}


#navbar2 ul {
	margin: 0;
	padding: 5px;
	list-style-type: none;
	text-align: center;
		color:  #B4B4FB;
	background-color: #0d1d50;
}

#navbar3 ul li { display: inline; }

#navbar3 ul li a {
	text-decoration: none;
	padding: .2em 1em;
	border-style: outset;
	border-color: #8DA5F1;
	border-width: 3px;
	color: #fff;
	background-color: #6699CC;
}

#navbar3 ul li a.button:visited {
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	color:  #B4B4FB;
	border-style: outset;
	border-color: #8DA5F1;
	border-width: 3px;
	background-color: #FFFFCE;
}

#navbar3 ul li a:hover {
	color: #000;
	border-style: outset;
	border-color: #F4F707;
	border-width: 2px;
	background-color: #FFCC33;
}


#footer {
 	margin: 0;
	padding: 5px;
	list-style-type: none;
	text-align: center;
	background-color: #0d1d50;
	border-style: groove;
	border-color: #708090;
}

[BLiZZaRD]

if the only thing you want different is the background color, then only set that.

You will make one set for all divs, then set your classes changing only the backgrounds.

To call them then would be something like this:

<body>
<div class="main">
content here
</div>
<div class="first">
first div content
</div>
<div class="second"
more content
</div>
etc...

[Grey]

Do you mean like this ?

.navbar3 ul li { display: inline; }

.navbar3 ul li a {
	text-decoration: none;
	padding: .2em 1em;
	border-style: outset;
	border-color: #8DA5F1;
	border-width: 3px;
	color: #fff;
	background-color: #6699CC;
}

.navbar3 ul li a.button:visited {
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	color:  #B4B4FB;
	border-style: outset;
	border-color: #8DA5F1;
	border-width: 3px;
	background-color: #FFFFCE;
}

.navbar3 ul li a:hover {
	color: #000;
	border-style: outset;
	border-color: #F4F707;
	border-width: 2px;
	background-color: #FFCC33;
}



<div class="navbar3"> 
 <ul> 
<li><a href="#top"> Top of page</a><li></ul></div>

[Moshambi]

im no expert or anything, but i think that is what he means. also, i was gonna say that i think since you have:

.navbar3 ul li a {
text-decoration: none;
padding: .2em 1em;
border-style: outset;
border-color: #8DA5F1;
border-width: 3px;
color: #fff;
background-color: #6699CC;
}

.navbar3 ul li a.button:visited {
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #B4B4FB;
border-style: outset;
border-color: #8DA5F1;
border-width: 3px;
background-color: #FFFFCE;
}

.navbar3 ul li a:hover {
color: #000;
border-style: outset;
border-color: #F4F707;
border-width: 2px;
background-color: #FFCC33;
}

you have the color changing the ul li elements in each one of those?

idk if im right about that or anything but just thought i would ask/point it out

[Grey]

Yikes, I'm getting more confused by the minute...I'm sorry, I'm just not getting this one.

[Moshambi]

Do you mean like this ?

.navbar3 ul li { display: inline; }

.navbar3 ul li a {
text-decoration: none;
padding: .2em 1em;
border-style: outset;
border-color: #8DA5F1;
border-width: 3px;
color: #fff;
background-color: #6699CC;
}

.navbar3 ul li a.button:visited {
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #B4B4FB;
border-style: outset;
border-color: #8DA5F1;
border-width: 3px;
background-color: #FFFFCE;
}

.navbar3 ul li a:hover {
color: #000;
border-style: outset;
border-color: #F4F707;
border-width: 2px;
background-color: #FFCC33;
}



<div class="navbar3">
<ul>
<li><a href="#top"> Top of page</a><li></ul></div>

i think that is exactly what blizzard was saying...about how to use the classes. i didnt mean to confuse you by throwing in my other rambling...

[Grey]

Yes I got it..Blizzard was correct.. I got it to work the way he and your goodself suggested thank you

[boogyman]

Do you mean like this ?

.navbar3 ul li { display: inline; }

.navbar3 ul li a {
text-decoration: none;
padding: .2em 1em;
border-style: outset;
border-color: #8DA5F1;
border-width: 3px;
color: #fff;
background-color: #6699CC;
}

.navbar3 ul li a.button:visited {
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #B4B4FB;
border-style: outset;
border-color: #8DA5F1;
border-width: 3px;
background-color: #FFFFCE;
}

.navbar3 ul li a:hover {
color: #000;
border-style: outset;
border-color: #F4F707;
border-width: 2px;
background-color: #FFCC33;
}



<div class="navbar3">
<ul>
<li><a href="#top"> Top of page</a><li></ul></div>

yes that will work but you can take it once step further.
if the only element in the navbar is a list you can set the unordered list element to the class to prevent the extraneous code, and also you can eliminate some of the extra styles above as they will be inherited by default...

<ul class="navbar3">
     <li><a href="#top">Return to Top</a></li>
     <li><a class="button" href="/path/to/file">Button Link</a></li>
     <li><a href="/path/to/file">Link</a></li>
     <li><a href="/path/to/file">Link</a></li>
</ul>

<style type="text/css">
ul.navbar3 {     
     background: #6699cc;
     color: #ffffff;
     font-size: 14pt;
}
ul.navbar3 li, ul.navbar3 li a {
     display: inline;
     color: inherit;  /* necessary for the anchor tag */
     text-decoration: none;
     border: 3px outset #8DA5F1;
}
ul.navbar3 li {
     padding: .2em 1em;
}
ul.navbar3 li a.button:link {
     /* 'button class' default styles */
}
ul.navbar3 li a.button:link {
     /* 'button class' visited (return to the page after a link has been clicked styles */
}
ul.navbar3 li a.button:hover {
     /* 'button class' hover (mouse position is over link) styles */
}
ul.navbar3 li a.button:active {
     /* 'button class' active (while the link is being clicked) styles */
}
ul.navbar3 li a:visited {
     font-weight: bold;
     color: #ffffce;
}
ul.navbar li a:hover {
     background-color: #ffcc33;
     color: #000;
     border: 2px outset #f4f707;
}

What you were doing is not technically incorrect, there is just extra code in there that will clog up your webserver, hosting & bandwidth most notably.

Blizzard had the right idea and I am sure he knows what he was meaning, but I think it was a little bit ambiguous on how it was interpretted, so I will attempt to redefine what he was saying in different terms.

By default, any element will inherit (take on) the style of its parent element (the element it's wrapped in) unless otherwise declared explicitly. The anomoly to that is default browser styles, e.g. the achor <a> tag. By default it will have blue underlined styles regardless of what element it is enclosed in, unless the developer explicitly sets it differently.

Some "unwritten rules" to designing with CSS include trying to set as much of your default styles in the body <body> tag, some of the more commonly used styles are

• margins & padding

margin: 1em;
padding: 1em;
margins and padding generally get abused because many people do not know the difference... margins are applied as a buffer outside of the element and padding is applied to the inside of the element.. this doesnt really make alot of sense when you first look at it, but take a look at http://www.htmldog.com/guides/cssbeginner/margins/ as they do alot better job than I could ever do.

Edit:
// had this in the middle of the background definition which could cause confusion...

• width

width: 80%;
this again gets abused by people whom really do not develop for all browsers. this is obviously the width of the element that it is applied to, and again this should be done in percentages as much as possible to allow the browser to render accordingly, because each different rendering engine (what takes the code you give it and makes it visible on screen) will display slightly differently... most notably pixels... IE pixel rendering and most other browsers are different slightly, but it can make a big difference between a horizontal scroll bar and no horizontal scroll bar. so try to keep your widths in percentages... now if you have a minimum width required or a maximum there are different tags for those min-width max-width respectively... and these really would be the only place that you should use pixels to define widths... now on that note.. if you are attempting to be friendly to older screen resolutions (800x600) you cannot set the minimum width to 800px because that is the width of the whole screen, not what is viewable in the browser... 760px would be the width to set it at to be friendly for 800x600 resolutions.

• background (color/image)

background: #hexadecimal url('/path/to/image') repeat attachment position;

hexadecimal is the term used for html color codes 0-15 or (0-9 A-F) this is the perferred method because it allows for the most precise rendering of color to the page.
url('/path/to/image') pretty much self explanatory but the path may be declared a couple of ways.
absolute - this is the path of the entire url of the image http://www.domain.com/forums/images/example.gif
this is best for linking images from other domains (with permission of course)
relative - this is the path from the path the script is running
so if you were in the "forums" folder in the url above you would write the path as
images/example.gif this can become quite confusing because if you move a script(page) around you would then need to update all of the paths associated
absolute relative - this is a term I coined and its a combination of both. By starting the path of an image with a forward slash / the path of the image starts from the web document root (the domain as viewable on the web) so you would write the url list
/forums/images/example.gif in this method you only need to worry about the physical image file being moved, not the script (page) that is running the script because the path of the image will ALWAYS start at the end of the original domain declaration.
repeat whether or not the image will repeat values can be no-repeat, repeat, repeat-x (horizontal axis) repeat-y (vertical axis)
attachment - whether the image will stay where it is or scroll with the page. this is the css "watermark" ability. values can be fixed,scroll
position - relative to the element, where will the image be
top,bottom,center,left,right are all among the values.. you can have2 values 1 for vertical and 1 for horizontal

• color of regular text

color: #hexadecimal

• font properties

font-size: 14pt /* this should be the only place you explicitly set the font-size... all other elements should be given percentages so in the future if you wish to make a change you will only need to edit this 1 size and the rest of the site updates instantaneously and keeps the same proportions */
font-family: Arial, Helvetica, sans-serif;
this will be how the font appears on screen this is tricky because the user must have the font type file available so it is always good to declare 2 fonts you would like then the font type group the font comes from so that if the user has neither font type the page wont be entirely busted and the default group font the user has set up will be shown.
there are a number of other font types however these are the main two you will see declared for the entire page.

I know you are probably wondering why you are still reading, but the last thing I will yap about is an element within an element and different "states" of an anchor tag.

in my definition i stated

By default, any element will inherit (take on) the style of its parent element (the element it's wrapped in) unless otherwise declared explicitly.

and what i mean by that is if you had the set up

<div>
     <p>TEXT <span>OTHER</span></p>
</div>

the TEXT contained in the paragraph tag will take on both the paragraph styles and the div styles... and the OTHER will take the span styles, paragraph styles, and div styles all accordingly, trumping (overwriting) styles that were given before.
I can explain that more if needed but I think thats a pretty good overview

the very last thing is the states of an anchor tag
ever tag has these different states, but until IE6 becomes obsolete much of the states will not be "accessible" to CSS solely... meaning you would need to use some javascript to achieve the same affect...
in my redoing of the menu I declared the anchor states in the LoVe HAte terms meaning
link (default)
visited (clicked)
hover (moused over)
active (being clicked on)

now there are other states, but we will not go into those... these follow the same rules as regular elements so you do not have to keep declaring text-decoration:none for every state if they are the same...


and the punch-line is.... only duplicate style properties to trump a previous definition... and remember that each element has its own browser defaults... those will always take affect unless you set otherwise

[Grey]

I know you are probably wondering why you are still reading<<<<No Boogyman, exactly the opposite, I read and read and read. Now to try and absorb and implement. As I look over what I did vs your explanation.. css 101..My rooky skills clearly show lol.. But..when I saw this site I sait to myself.. "self, learn it or burn it".. I choose learn it.. I'll be back with revisions and more questions I'm sure.. Thank you for taking time to spell that out.

ps Leaving this page open as a reminder that technically correct is not correct at all lol

[boogyman]

oh one thing i forgot to mention after my essay was when you are posting computer code try to use the [code] tags. That was going to be my first note, but I never got back to it and by the time I got to the bottom, well I was tired and it was time to go home )

I read and read and read. Now to try and absorb and implement

yah I am in the process of putting together a few do's and dont's that I havent been able to find all in one place around the web... Everything that I have said was from me learning here and there, but I think it should be in 1 place, I am converting a portion of my site to be dedicated to tutorials on clean (semantically and syntatically) standardized code covering HTML and CSS to start, and slowly moving on to Javascript and some basic PHP function as those 2 are languages that I do not consider myself exceptionally versed in.