Need help developing the CSS for a page 1

[LarrySteele]

Haven't been able to figure out the right question to get an answer from Google, and none of my books seems to provide the informaiton I need, so...

New request - page with a handful of large "buttons" arranged vertically, all with same width regardless of value. I don't have a problem managing style information for input buttons, except that the width is out of my control.

How would you handle this using CSS?

I'm on a ridiculously tight deadline, so I'm going with the most expedient method (read: tables). It'll make deadline so mgt can show it to the executives. That should give me time to do this the right way...no way I want to settle on delivering a site that uses tables to format "buttons."

Here's what they're looking for:

+---------------------------------------+
|                                       |
|  +---------------------------------+  |
|  |**First Option Button************|  |
|  +---------------------------------+  |
|                                       |
|  +---------------------------------+  |
|  |**Second Option Button***********|  |
|  +---------------------------------+  |
|                                       |
|  +---------------------------------+  |
|  |**Third Option Button************|  |
|  +---------------------------------+  |
|                                       |
|  +---------------------------------+  |
|  |**Fourth and Last Option Button**|  |
|  +---------------------------------+  |
|                                       |
+---------------------------------------+

The outer border will be solid, black, 2px. The spacing between the buttons and the outer border will be the same as the spacing between the buttons. All buttons will have same width (would like all to have same height).

How do I pull this off using CSS?

Thanks in advance,
Larry

 

[vacunita]

No need for tables, merely a judiciously applied unordered list.

.menu{
border:2px solid black;
padding:5px 10px;
}

.menu ul{
list-style-type:none;
padding:0px;
margin:0px;
}

.menu ul li{
border:2px solid black;
padding-left:5px;
margin-top:10px;
margin-bottom:10px;
margin-collapse:no-collapse;

}

<div class="container">
 <div class="menu">
  <ul>
   <li> First Option</li>
   <li>Second Option</li>
   <li>Third Option</li>
   <li>Fourth and Last Option</li>
  </ul>
 </div>
</div>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[LarrySteele]

Phil - thanks! I knew there was an easy way to do this in CSS w/o tables. I never thought of using a UL.

Have a star for helping me get on the good and right path!

Larry

 

[vacunita]

Glad I could help.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech