Page 1 of 1

class in a class?

Posted: Wed May 28, 2003 2:19 pm
by digitalgravy
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: Select all


.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: Select all

.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: Select all

<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.

Posted: Wed May 28, 2003 5:34 pm
by liquedus
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.

Posted: Wed May 28, 2003 5:53 pm
by Redcircle
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

Posted: Thu May 29, 2003 8:23 am
by digitalgravy
I will play around with a few things, I think, Ill just specify a class to each individual cell.

-Thanks

Posted: Sat May 31, 2003 12:17 am
by WiZARD
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: Select all

TD.wrd1{color:#00ff00;}
TD.wrd2{color:#ff0000;}

and in HTML do next:

Code: Select all

<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

Posted: Tue Sep 07, 2004 2:28 pm
by digitalgravy
I have decided to go with a list instead of the tables.

Posted: Tue Sep 07, 2004 4:57 pm
by swirlee
digitalgravy wrote:I have decided to go with a list instead of the tables.


A very good idea. :D