class in a class?

  • Thread starter Thread starter Anonymous
  • Start date Start date
A

Anonymous

Guest
I have a table for a navigational menu.

I have set up a few classes, for the different sections of a table that will make up the nav menu.

I have the styles set up properly. They are as follows:
The following code is for the menu items

Code: 
.menu td {
	background-color: #900;
	border: .5px solid white;
	border-spacing: 0px;
	padding-left: 4px;
}
.menu {
	background-color: white;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: normal;
}

.menu a:link {
	color: #FFFFFF;
	text-decoration: none;
}

.menu a:visited {
	color: #FFFFFF;
	text-decoration: none;
}

.menu a:hover {
	color: #FF0000;
	text-decoration: none;
}

.menu a:active {
	color: #FFFFFF;
	text-decoration: none;
}

.menu a:focus {
	color: #FF0000;
}

The following is for the Menu section headers:

Code: 
.menu-title td {
	background-color: #000;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
}

I have set these up this way because I want to have borders around each cell.

I have the code in my html to display the menu, but It doesn't work properly:
Code: 
<table width="100"  class="menu">
 <tr class="menu-title">
  <td height="20">Departments</td>
 </tr>
 <tr>
  <td><a href="/">Home</a></td>
 </tr>
 <tr>
  <td><a href="/calendar/">Calendar</a></td>
 </tr>
 <tr>
  <td><a href="/programs/">Lodge Programs</a></td>
 </tr>
 <tr>
  <td><a href="/howl/">The Howl</a></td>
 </tr>
 <tr>
  <td><a href="/leadership/">Leadership</a></td>
 </tr>
 <tr>
  <td><a href="/committees/">Committees</a></td>
 </tr>
  <td><a href="/troop_rep/">Troop OA<br />Reps Corner</a></td>
   <tr>
  <td><a href="/resources/">Resources</a></td>
 </tr>
 <tr>
  <td><a href="/links/">Links</a></td>
 </tr>
</table>
</div>

The section heading displays the text in bold, but it has the same padding on the left and the color from the rest of the menu.

I want the header to be black like the style specifys. How should I modify the code? I have the "menu_title" in a cell, but it is in the table where the "menu" class is specified. I think its cancelling itself out.

You can see the file I am talking about at http://jacob.digitalgravy.net/

I am rebuilding a site to be valid xhtml. I have the original menu that I am trying to create made up of a table, and I'm trying to do the whole xhtml/css thing. You can see the original menu at http://www.spe-le-yai.org, this is how I want it to look.

Any help would be appreciated.
 
the way styles flow are like this

<tag1><tag2>Hello</tag2></tag1>

if the same elements are changed by tag2 that were initialized with tag1, then you will not see the styles caused by tag1.

also i notice that you make tr class specific:

<tr class="menu-title">
<td height="20">Departments</td>
</tr>

im not 100% sure, but i dont think that applying styles to tr will not do anything, apply them to td tag

if that didnt answer your question let me know.
 
one thing that I noticed is that you have the border set to .5px which cannot be done. you need to have it set to an whole number. so it is probably defaulting to 1 if you have a 1px border on every <td> then one <td> stacked on another <td> will give it a 2px between the two <td>'s
 
I will play around with a few things, I think, Ill just specify a class to each individual cell.

-Thanks
 
Hi digitalgravy!
i'm propose to you use TopStyle programm very good!
and once more to you i'm propose do next:
first than you create new style do like that:
Code: 
TD.wrd1{color:#00ff00;}
TD.wrd2{color:#ff0000;}
and in HTML do next:
Code: 
<TABLE>
<TR>
<TD colspan="3" align="center" class="wrd1">Hello World!</TD>
<TD colspan="3" align="center" class="wrd2">Hello World!</TD>

</TR>
.............
but in that situation it's model work under IE not more
 
You must log in or register to reply here.
Back
Top