CSS Issue-Placing a style on text within a table that has other style?

[Neoqueenhoneybee]

Hello all! I hope to learn from you, please bare with me.

My first CSS issue was creating a background color rollover state that fit the entire td. Once I problem solved how to get the td color to change, my text was out of alignment. I had to get help in order to fix that problem; turns out that I needed to play with the padding to get the text to vertical align bottom.

Now I am facing a new issue. I need to place a submenu in a td that already has a class on it; a class that effects the table. It seems that the padding addition I made to get the text aligned properly, is breaking my submenu-ed td to triple the height it's supposed to be.

I've run out of ideas and need a fresh perspective.

I've always used visuals for my explanations, so I'm sorry if this sounds confusing. Below is my current stylesheet. The navlink is for the td roll over and the subMenu is (hopefully) for the submenu within the table the navlink is linked to.

.navlink {
text-decoration: none;
vertical-align: bottom;
text-align: center;
padding-top: 1px;
padding-bottom: 1px;
} 
.navlink td#title { 
vertical-align: bottom;
padding-bottom: 1px;
}
.navlink td { 
text-decoration: none;
vertical-align: bottom;
} 
.navlink a { 
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 17px;
font-weight: normal;
color: #8B0103;
text-align: center;
text-decoration: none;
line-height: 22px;
vertical-align: bottom;
display:block; 
padding: 69px 1 1 1;
} } 
.navlink td a {
width: 95%;
} 
.navlink td a:hover { 
color: #FFFFFF;
text-decoration: none;
background-color: #8B0103; 
vertical-align: bottom;
display:block 
;} 
.navlink td a:visited {text-decoration:none}
.subMenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #CCCCCC;
margin-top: 3px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 0px;
text-align: left;
}
.subMenu a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #CCCCCC;
margin-top: 3px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 0px;
text-align: left;
}
.subMenu a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #CCCCCC;
margin-top: 3px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 0px;
text-align: left;
}
.subMenu a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #CCCCCC;
margin-top: 3px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 0px;
text-align: left;
}
.subMenu a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #CCCCCC;
margin-top: 3px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 0px;
text-align: left;
}

[justgowithit]

Hi Neoqueenhoneybee,

Post the html snippet too, Please. I'll help you out.

[Neoqueenhoneybee]

Here's the html: (Thanks ahead of time)

<table width="918" height="94" border="0" cellpadding="0" cellspacing="0" class="navlink">
   <tr> 
   <td width="138"><a href="#">Headshots</a></td>
   <td width="138"><a href="#">Modeling</a></td>
   <td width="138" bgcolor="#8B0103"><a href="#"><font color="#FFFFFF">Wedding</font></a></td>
   <td width="228"><a href="#">Baby, Children, Family</a></td>
   <td width="138"><a href="#">Fun Stuff</a></td>
   <td width="138"><a href="#">Fine Art</a></td>
   </tr>
   </table>

[justgowithit]

Is there any reason you're using a table instead of a list? Is the table crucial to the rest of the design?

[Neoqueenhoneybee]

justgowithit

If I could get the same or better results with a list, I'd love to try it. Using tables was the only way I knew how. I don't think that this particular table is all that crucial.

Suggestions?

[swa66]

First step is to make your code validate (it won't as it is now), that keeps browsers from guessing what you meant.
e.g.: oyou and I know when you write

padding: 69px 1 1 1;
} }

what you want to have, but a browser will see the light if you write

  padding: 69px 1px 1px 1px;
}

(no need to give a unit for 0, but the rest needs it, and don;t add more curly braces than needed)

Secondly, a lot of code in there can be removed or written shorter, it's easier on the keyboard ear, but also easier to read and faster to get to the browser.
e.g.:

margin-top: 3px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 0px;

can be written as:

margin: 3px 0 2px 0;

or even as:

margin: 3px 0 2px;

You can add more than one class on any given element.

Finally, out here with the CSS folks, as you noted we're not fond of tables for layout purposes.

I'm not sure I understand what you seek to have as menu: a horizontal bar, but where do you want the submenu to go ?

For most menu formats you seek probably have plenty of examples out there already.

[justgowithit]

I know that you're just getting started. I just wanted to make sure that the table wasn't serving a purpose before pointing you toward another method.

Tables should really be used to present tabular data and not for layout structure.

I'm not sure how you're looking to include the sub-menu but I think what I've done below should help to get you started.

I took the original css/table menu and used a more lean, content friendly css/list menu instead.

I'd like to note that I didn't write most of this CSS. As swa66 noted above, it's often not necessary to start from scratch with CSS menus and other common page elements. I made a quick search for "horizontal css menu" and clicked on the first result. The credit for this menu goes to DynamicDrive.

To make the sample code render your menu, all I had to do was change a single padding declaration and a few font and background colors.

I also have an often-used bookmark to w3schools.com CSS page [w3schools.com] that's helpful for the nuts and bolts of things.

One last thing... When I was learning CSS I found the wealth of information online to be both helpful and a bit intimidating. After reading a couple beginner books (those things you can hold with paper pages ;)) on the subject, I was off and running and learning by doing from online sample code.

/* START CSS */

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */

.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/
}

.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 40px 7px 8px 7px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: #8B0103;
background: #ffffff; /*background of tabs (default state)*/
}

.mattblacktabs li a:visited{
color: white;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
color: #ffffff;
background: #8B0103; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

</style>

/* END CSS */

/*########################*/

/* START HTML */

<div class="mattblacktabs">
<ul>
<li><a href="#">Headshots</a></li>
<li><a href="#">Modeling</a></li>
<li><a href="#">Wedding</a></li>
<li><a href="#">Baby, Children, Family</a></li>
<li><a href="#">Fun Stuff</a></li>
<li><a href="#">Fine Art</a></li>
</ul>
</div>

/* END HTML */

[Neoqueenhoneybee]

swa66

Thanks for the advice, I guess I just let Dreamweaver do whatever with the code. As for the menu, I need it to look like the below image (I hope links to images are okay):
<snip>

justgowithit
Thanks for posting the code. I did google my issue (always do) and came up with a lot of sites and forums, but after playing with the provided codes a bit I found that they were not what I needed. (And that could easily be because I'm used to CSS for design and not layout.)

I will play around with the code you provided to see if I can get it to work for my design.

Thanks again, I really appreciate both of you spending the time to assist me.

[edited by: Neoqueenhoneybee at 5:12 pm (utc) on Jan. 9, 2009]

[edited by: eelixduppy at 5:14 pm (utc) on Jan. 9, 2009]
[edit reason] no URLs, please [/edit]