[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Adjust size of boxes in horizontial menu

Posted on 2013-06-19
5
Medium Priority
?
213 Views
Last Modified: 2013-06-19
How can i increase the width of these boxes in a horizontal menu?

http://roofgenius.com/RoofCalcWriter/test.asp
0
Comment
Question by:isnoend2001
  • 2
  • 2
5 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39258600
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
 
LVL 6

Expert Comment

by:yats
ID: 39258817
try using display:block property at a:href level.
0
 

Author Comment

by:isnoend2001
ID: 39259406
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
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39259520
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
 

Author Closing Comment

by:isnoend2001
ID: 39259605
Thanks I will restyle your boxes, hopefully i can get the boxes to center
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month17 days, 22 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question