• Locked
1 reply [Last post]
Wed, 2016-09-14 12:37
howardlie
howardlie's picture
Offline
newbie
Indonesia
Last seen: 3 years 46 weeks ago
Indonesia
Timezone: GMT+7
Joined: 2016-09-14
Posts: 1
Points: 2

I made a table-like ul and li for my website's categories. When I use Tryit Editor. I use this code:
html :

<html>
<head>
<style>
ul.kateg {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: transparent;
    border: 1px solid #b7ac0f;
}
 
li.cat a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
 
li.cat {
    text-align: left;
    border-bottom: 1px solid #b7ac0f;
}
 
li.cat:last-child {
    border-bottom: none;
}
 
li.cat a.active {
    background-color: #b7ac0f;
    color: white;
}
 
li.cat a:hover:not(.active) {
    background-color: transparent;
    color: green;
}
</style>
</head>
<body>
 
<ul class="kateg">
  <li class="cat"><a class="active">Home</a></li>
  <li class="cat"><a href="#news">News</a></li>
  <li class="cat"><a href="#contact">Contact</a></li>
  <li class="cat"><a href="#about">About</a></li>
</ul>
 
</body>
</html>

output :

^^^I don't know why there are so many spaces here^^^

and I wanted it to look that way but when I copy it to my WordPress site, it looks like this.

The problem is with the home background as you can see, the background is not full. Is there any mistakes in my code? Please help me Smile I am a beginner in CSS

Thank you.

Top
Tags:
Tue, 2016-09-20 10:24
#1
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

HI howardlie, You have the

HI howardlie,
You have the background color on the Link.
So to remove the spacing you need to remove the padding from the LI or put the background-color on the LI.

Top
  • Locked