How do I space out my menu text in CSS?

HTML & CSS
1

Hi,

I have a website http://www.yourdollarhost.com how do I space out my menu text? (Home, Affiliates, Contact, Support, and Order Now)

Thanks!

2

Have you tried increasing the padding on the links? Or adding margins to the LIs? Plenty of options there. :slight_smile:

3

Making the list display:table-cell (and a parent display:table) will evenly space out the menu items and give you a lot of room.

I think it looks good as is though.

4

whats the CSS code to make the menu items spaced out more?

Thanks!

5

^^

6

whats code in the CSS that I can increase the padding? I don’t want the height to be increased just the width.

Thanks!

7

Then only specify the horizontal padding. Padding left and right.

8

Adjust this to taste:

  .ddsmoothmenu ul li a {
    padding: 7px 40px 10px 0;
  }

Your right padding is currently 40px, and left is 0.

9

That works but how do I get the “Home” menu text to move over to the right with it?

Thanks!

10

Lots of ways, but perhaps easiest is to increase the left padding on the container (currently 39px):

#content-over2 {
  padding: 0px 0px 0px 39px;
}
11

That worked! Thank you!

12

Great! I edited my post to read “left padding”. Sorry about that. (I’ve always had a problem with left/right. Grrr …)

13

Good point!

I’m increasingly using table-cell as opposed to floats for my navs. This approach has loads of advantages other than avoiding floats: The greatest one being the ability to change the nav height without having to calculate the padding required to vertically align your links.

14

Bingo.

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.