CODEWITHSUNDEEP
htmlcss
nodesto
nodesto

Reputation: 505

How to make "button-like appearance" with CSS

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>

Upvotes: 0

Views: 236

Answers (3)

ZombieCode
ZombieCode

Reputation: 1661

'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.

Upvotes: 1

Brant
Brant

Reputation: 1788

a {

  display: block;

  // then whatever other rules you want to apply: width, height, border, pink flowers, etc

}

Upvotes: 0

ygssoni
ygssoni

Reputation: 7359

#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;
}

Upvotes: 1

Related Questions