CODEWITHSUNDEEP
csshtml
hassan shams
hassan shams

Reputation: 21

make list item clickable

this is my first website here is my html code:

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

.s-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.container {
  border: 1px solid #ccc;
  height: 50px;
  width: 100%;
  align-items: center;
}

.container>ul {
  padding: 0;
  margin: 0;
  display: block;
  padding-left: 200px;
}

.container>ul>li {
  display: block;
  list-style: none;
  padding: 15px 10px 17px 13px;
  float: left;
  cursor: pointer;
}

ul li:hover {
  display: block;
  color: black;
  background-color: #e4e6e8;
}

a {
  text-decoration: none;
  color: #535a60;
}

a:hover {
  color: black;
}

#logoimage {
  float: left;
  height: 50px;
  width: 40px;
}
<header class="s-header">
  <div class="container">
    <ul>
      <li class=""><a href="page2.html">A1</a></li>
      <li class=""><a href="#">A2</a></li>
      <li class=""><a href="#">A3</a></li>
    </ul>
  </div>
</header>

i want to link the three tabs to three different pages and am trying to make the links in the entire list items clickable not just when put the cursor on the link .. sorry for the miss am new to web development

Upvotes: 2

Views: 7515

Answers (2)

Zac
Zac

Reputation: 1064

Add display:block to the anchor element and move the padding from the list item to the anchor element. This will ensure that the entire area is covered by the anchor element and is therefore clickable.

This is the addition to the a styles:

a {
   display:block;
   padding: 15px 10px 17px 13px;
   ...
}

See full snippet below

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

.s-header {
  border-top: 3px solid #F48024;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.container {
  border: 1px solid #ccc;
  height: 50px;
  width: 100%;
  align-items: center;
}

.container>ul {
  padding: 0;
  margin: 0;
  display: block;
  padding-left: 200px;
}

.container>ul>li {
  display: block;
  list-style: none;
  float: left;
  cursor: pointer;
}

ul li:hover {
  display: block;
  color: black;
  background-color: #e4e6e8;
}

a {
  display: block;
  padding: 15px 10px 17px 13px;
  text-decoration: none;
  color: #535a60;
}

a:hover {
  color: black;
}

#logoimage {
  float: left;
  height: 50px;
  width: 40px;
}
<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <header class="s-header">
    <div class="container">
      <ul>
        <li class=""><a href="page2.html">Questions</a></li>
        <li class=""><a href="#">Tags</a></li>
        <li class=""><a href="#">Users</a></li>
      </ul>
    </div>
  </header>
  <link rel="stylesheet" href="main.css">
</body>

</html>

Upvotes: 3

GreenStripedUnicorn
GreenStripedUnicorn

Reputation: 3

If I am correct: Try replacing <li><a>Link</a></li> with <a><li>Link</li></a>

Upvotes: 0

Related Questions