class in a class?

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: macek, egami, gesf

User avatar
digitalgravy
New php-forum User
New php-forum User
Posts: 32
Joined: Sat Feb 15, 2003 10:00 pm
Location: Los Angeles, CA
Contact:

class in a class?

Postby digitalgravy » Wed May 28, 2003 2:19 pm

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.

liquedus
php-forum Active User
php-forum Active User
Posts: 266
Joined: Tue Apr 08, 2003 5:18 am
Location: Ottawa, Canada
Contact:

Postby liquedus » Wed May 28, 2003 5:34 pm

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.

User avatar
Redcircle
Moderator
Moderator
Posts: 830
Joined: Tue Jan 21, 2003 10:42 pm
Location: Michigan USA
Contact:

Postby Redcircle » Wed May 28, 2003 5:53 pm

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

User avatar
digitalgravy
New php-forum User
New php-forum User
Posts: 32
Joined: Sat Feb 15, 2003 10:00 pm
Location: Los Angeles, CA
Contact:

Postby digitalgravy » Thu May 29, 2003 8:23 am

I will play around with a few things, I think, Ill just specify a class to each individual cell.

-Thanks

User avatar
WiZARD
Moderator
Moderator
Posts: 1257
Joined: Thu Jun 20, 2002 10:14 pm
Location: Ukraine, Crimea, Simferopol
Contact:

Postby WiZARD » Sat May 31, 2003 12:17 am

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

User avatar
digitalgravy
New php-forum User
New php-forum User
Posts: 32
Joined: Sat Feb 15, 2003 10:00 pm
Location: Los Angeles, CA
Contact:

Postby digitalgravy » Tue Sep 07, 2004 2:28 pm

I have decided to go with a list instead of the tables.

User avatar
swirlee
Moderator
Moderator
Posts: 2272
Joined: Sat Jul 05, 2003 1:18 pm
Location: A bunk in the back
Contact:

Postby swirlee » Tue Sep 07, 2004 4:57 pm

digitalgravy wrote:I have decided to go with a list instead of the tables.


A very good idea. :D


Return to “CSS”

Who is online

Users browsing this forum: No registered users and 0 guests

cron