table within table using CSS

[richs2k1]

I am trying to accompish with CSS what I used to accomplish with HTML nested tables. Basically it is a simple one column, two row table with a header row and body row. Last night was my first experience with CSS so bear with me.

My test run is located at: http://www.suspendedmoment.com/css/test.html

The CSS file is located at: http://www.suspendedmoment.com/css/test.css

Is this the proper way to achieve the same effect? I noticed that if you nest a DIV tag within a DIV tag that the nested DIV is placed one pixel below and one pixel to the right of the DIV its contained within. Therefore I set the postion to top:-1 and right:-1. Then I added padding of 5px which shifted it again so i changed it to top:-6 and right:-6. Finally the padding made the outter DIV stretch to 160 pixels so I had to make the inner DIV 160 pixels. Is this all making sense? Am I doing this the hard way or is the considered the correct way, if there is one?

Thanks for your input...

Rich S.

[Siddan]

good start, but you don´t have to use divs for every occasion.

You could have the Menu Item within a <p> element having the margin 0px at the top using the same background attribute with border as you´ve done with the "menutext".

You can also define the font family within "menu" to affect ITEM1 and ITEM2 and any text which you might enter

[ray326]

That works but it's got "divitis" and the HTML isn't very meaningful. Menus are "lists" of things so that's generally considered the best practice markup. A meaningful discription of what you have is a list of functions described by a heading.

<div id="themenu">
<h2>MENU ITEMS</h2>
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
</ul>
</div>

Now you've got lots of "tag fodder" for styling purposes AND the markup makes semantic sense. You know what it IS, now what should it LOOK like?

div#themenu {
width: 150px;
height: 150px;
border: 1px solid black;
background: #999;
}
#themenu h2 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: .9em;
font-weight: bold;
color: white;
background: #666;
border-bottom: 1px solid black;
margin: 0;
padding: 0;
}
#themenu ul {
list-style:none;
padding:0; margin:0;
}
#themenu li {
padding: 2px;
}