Defining/Labling CSS for multiple pages 1

[Evil8]

I'm progressing in my web coding to use CSS. On every page I have a logo image and a table with the page links.

HTML - this goes on the top of each web page:

<h1><a href="index.html">Mediqwest Insurance Services</a></h1>

<table>
  <tr> 
    <td colspan="6"><img src="images/gold_line.gif" width="100%" height="21"></td>
  </tr>
  <tr> 
    <td colspan="6"><img src="images/line.gif" width="100%" height="2"></td>
  </tr>
  <tr>
    <td width="16%"> <a href="index.html">Home</a></td>
    <td width="16%"> <a href="choosecity.php">Community Meetings</a></td>
    <td width="16%"> <a href="notice.html">Medicare 101</a></td>
    <td width="16%"> <a href="resources.html">Resources</a></td>
    <td width="16%"> <a href="contact.html">Contact Us</a></td>
    <td width="16%"> <a href="about.html">About Us</a></td>
  </tr>
  <tr>
    <td colspan="6"><img src="images/line.gif" width="100%" height="2"></td>
  </tr>
</table>

CSS - I'm using a linked style sheet:

a       {
     font-family:Times New Roman, Times, serif;
     color:#000000;
     font-size: 12pt;
     text-decoration: none;

}


a, a:link {
     font-weight: bold;
}
	 
a, a:visited {
     font-weight: bold;
}

a, a:active {
     font-weight: bold;
}

a:hover{
     color: red;
}

table {
     width: 100%;
     border="0";
}

td    {
     text-align: middle;
     vertical-align: middle;
}

tr      {
     text-align: center;
     vertical-align: middle;
}

h1 {
	text-decoration:none;
	border: 0;
	width: 710px;
	height: 181px;
	margin-left: 150;
        padding: 0;
	background : url(/images/MediqwestLogoFINAL.JPG) no-repeat 0 0;
}
 
h1 a {
	display : block;
	height : 113px;
	text-indent : -9999px; 
}

Being new to CSS, I'd like to know if I'm doing this correctly and if I can do this even more efficently? Can all this be defined into a single element and referenced in the html that way?

Thanks!

 

[vacunita]

1. Don't use tables for layout. If your links are merely a list, use a list.

2. Your CSS is quite generic, any links or any tables you have in your page will be affected by the CSS since you aren't being specific about which links or which tables it should affect.

You could specify a class for your links or a class parent so that only the elements inside the parent are affected by the css.

.logoandpagelinks{

}

.logoandpagelinks a:link{

...
}



.logoandpagelinks table{

}

etc..

then in your HTML

<div class="logoandpagelinks">
all your logo and page links here.
</div>

The css will only apply to elements inside the parent that has a class of logoandpagelinks. This can be handy when you need different styles for different sections of your page that may use the same types of elements.

3. your link css is unnecessarily redundant.

separating elements with a comma in a css declaration indicates that each element will be affected. So you are affecting your base "a" in each css delcaration that follows it along which eahc of its states except hover.

a is the general link reference, while a:link, a:visited, a:active and a:hover specify states in which the link can be. There's no need to redefine your base link each time, merely the states.

Also since you aren't really giving each state any visual differences they are all bold, perhaps defining them all together would be better.

a:link,a:visited,a:active{
font-weight:bold;
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[Evil8]

Thanks Vacunita, very helpful as always! Lot's to think about.

 

[Evil8]

I've gotten my html down to:

<div class="logoandmenu"><h1><a href="index.html">Mediqwest Insurance Services</a></h1></br></div>
  <img src="images/gold_line.gif" width="100%" height="21"></br>
  <img src="images/line.gif" width="100%" height="2"></br>
  <ul>
   <li><a href="index.html">Home</a></li>
   <li><a href="choosecity.php">Community Meetings</a></li>
   <li><a href="notice.html">Medicare 101</a></li>
   <li><a href="resources.html">Resources</a></li>
   <li><a href="contact.html">Contact</a></li>
   <li><a href="about.html">About Us</a></li>
  </ul>
 </br>
 <img src="images/line.gif" width="100%" height="2"></br>
</div>

and now my css is:

.logoandmenu  {
     background-color: #FFFFFF;
}

a, a:link, a:visited, a:active {
     font-family:Times New Roman, Times, serif;
     color:#000000;
     font-size: 12pt;
     text-decoration: none;
     font-weight: bold;
}
	 
a:hover{
     color: red;
}

h1 {
	text-decoration:none;
	border: 0;
	width: 710px;
	height: 181px;
	margin-left: 150;
        padding: 0;
	background : url(/images/MediqwestLogoFINAL.JPG) no-repeat 0 0;
}
 
h1 a {
	display : block;
	height : 113px;
	text-indent : -9999px; 
}

ul{
    margin: 0px;
    padding: 0px;
}

ul, li {
     list-style: none;
     display: inline-block;
     height: 10px;
     float: left;
     width: auto;
     white-space: nowrap;
     margin-left:15px
}

In some of the examples I've looked at some people are useing a "container" with #. What is the difference between that and the way I'm doing it?

Again thanks for the help!

 

[vacunita]

The # indicates a unique identifier.
So

#container{
...
}

would apply the css only to an element with an id of container such as:

<div id="container">
</div>

Id's must be unique, so they cannot be repeated in your page.

While classes can be repeated as much as necessary.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[Evil8]

I see! I think I may have to use containers to set up page layout areas.

Thanks again!