Adjust size of boxes in horizontial menu

How can i increase the width of these boxes in a horizontal menu?

http://roofgenius.com/RoofCalcWriter/test.asp
isnoend2001Asked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
Please look at this sample  http://jsbin.com/olozuy/1/edit

It's very simple and I think you have made this more complex then it needs to be.  Start over and rebuild this.  

css
ul.x li{
  display:inline-block;
  width:100px;
  height:30px;
  background-color:red;
  text-align:center;
  padding-top:10px;
  
}

Open in new window

html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="container">
    <ul class="x">
      <li>one</li>
      <li>one two</li>
      <li>one two three</li>
    </ul>
    
  </div>
</body>
</html>

Open in new window

Lot's of samples here http://css.maxdesign.com.au/listamatic/

Make the box styled by the li tag.  The only thing you need to style the "li a" tags together for will be the text to prevent an underline and hover.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Just change the padding

fyi, you have padding:8px;  AND padding-top:8px;.  The first means padding all around.  This will help you understand the box model and padding/margin.  http://www.w3schools.com/css/css_boxmodel.asp  

I would change your padding:8px; line to
padding-top:8px;
padding-bottom:8px;
padding-left:10px;
padding-right:10px;

That will keep the top/bottom the same and add space to the left and right.

.menu_table_nav #horzlist a
{
      width:100px;
      height: 20px;
      padding:8px;
      padding-top: 8px;
      text-decoration:none;
      font:10px Verdana, Geneva, sans-serif;
      font-weight: 600;
      color:#1C4FFF;
      text-align: center;
      background-color:  #f0f0f0;
      border: 1px solid #0066ff;
}
0
 
yatsCommented:
try using display:block property at a:href level.
0
 
isnoend2001Author Commented:
Thanks padas, but the boxes width depends on the content, I am trying to make them all the same width.

Thanks yats, don't know what you mean
0
 
isnoend2001Author Commented:
Thanks I will restyle your boxes, hopefully i can get the boxes to center
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.