How to make "button-like appearance" with CSS

Question

I have made a navigation bar using <ul> and <li>

I would like to customize each tab with border, gradient etc.

Where should it be applied?

My CSS styling tend to affect only the letters, not anything else.

CSS

#nav { width: 100%; margin: 20px 0px 20px 0px; } #nav ul { padding: 12px 0px 12px 0px; border-top: solid black 1px; border-bottom: solid black 1px; } #nav ul li { display: inline; margin-left: 50px; font-weight: bold; background-color: grey; }

HTML

<div id="nav"> <ul> <li>Home</li> <li>Files</li> <li>Info</li> <li>About</li> </ul> </div>

We need to see your current code. Please edit your question, and paste (only) the relevant, necessary HTML and CSS. You can use a tool like jsfiddle.net in addition. If your question is closed, you can still add these important details and flag for reopening afterwards. — No Results Found
– No Results Found, Commented Sep 7, 2012 at 18:43
You're likely to get more help if you post what you have tried so far and what exactly you're trying to achieve. — jmoerdyk
– jmoerdyk, Commented Sep 7, 2012 at 18:44

ZombieCode · Accepted Answer · 2012-09-07 20:36:25Z

'a' tags inside of a styled tag (such as an 'li' tag) will not pick up any of the styles you set. They want their own styles. You will need to move all the 'li' styles to the 'a' tag and then put a display:block; on the 'a' tag.

jackwanders · Accepted Answer · 2012-09-07 20:12:28Z

#nav { width: 100%; margin: 20px 0px 20px 0px; } #nav ul { padding: 12px 0px 12px 0px; border-top: 1px solid black; border-bottom: 1px solid black; } #nav ul li { display: inline; margin-left: 10px; width:50px; height:20px; line-height:20px; font-weight: bold; background-color: grey; }

jackwanders · Accepted Answer · 2012-09-07 20:14:55Z

0

a { display: block; // then whatever other rules you want to apply: width, height, border, pink flowers, etc }

edited Sep 7, 2012 at 20:14

jackwanders

16.1k3 gold badges42 silver badges40 bronze badges

answered Sep 7, 2012 at 18:45

Brant

1,78811 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to make "button-like appearance" with CSS

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related