Solved

Adjust size of boxes in horizontial menu

Posted on 2013-06-19
5
208 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 52

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 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
manage footer size 4 72
Css regex 6 38
Head to not include on scroll 4 22
Why am I getting this white space between my section and my footer? 2 21
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

791 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