Solved

Adjust size of boxes in horizontial menu

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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

757 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now