Make a List Item Clickable (HTML/CSS)

make list item clickable

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>

How to make entire list item clickable?

This is possible, and you can keep your current look. What you need to do is remove margins and padding from the UL and LI tags. Then add left padding to the tags equal to the desired margin. Optionally, in your CSS, set the A tag's display to block so that the entire row, to make the white space to the right of the link clickable as well.

Here is a quick block of CSS that might do what you need:

ul, li {
  margin: 0;
  padding: 0;
}
li {
  list-style:none;
}
a {
  display:block;
  padding-left: 3rem;
}

How can I have a clickable image and link (anchor) in a list item

Do something like this,
Put the Img inside the A tag and then both will be clickable to whatever href you give.

<ul>
    <li>
    <a href="https://www.google.com" target="_blank">
    Login
    <img src="../resources/images/test.png" />
    </a>
    </li>
    <li><a href="#test">Test1</a></li>
    <li><a href="#test">Test2</a></li>
    <li><a href="#test">Test3</a></li>
    <li><a href="#test">Test4</a></li>
</ul>

How do I make a JavaScript created list item clickable?

You need to assign a function to the onclick event:

list.onclick = function(){ alert("Help."); }

How do I make the whole area of a list item in my navigation bar, clickable as a link?

Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.

Make an li element clickable (not a link)

Example code:

li.link span {  color: blue;  text-decoration: none;  cursor: pointer;}li.link span:hover {  color: #00f;  text-decoration: underline;}

<ul role="menu">   <li role="presentation" class="link" value="thing" onclick="myFunction()"><span>Text</span></li></ul>

Make elements in a list clickable (PHP)

Opening a dialogue and ask the user before he deletes an item will require that you either go another page for deletion or use javascript for this.
In both cases, you should somehow set an identifier for your image in your html-code.
I would suggest you give every image an id
'<img ... id="'.$yourImageId.'">'
or a data-attribute
'<img ... data-identifier="'.$yourImageId.'" >'
with that identifier.

First variant:

...
echo '<a href="/path/to/delete/view/page.php?image=yourImageId">'
echo '<img ... id="'.$yourImageId.'"/>'
echo '</a>'
...

and on this delete-view-page, you just have a form that triggers your delete-code

<form action="/path/to/delete/view/page.php" method="POST">
<input type="hidden" name="id" value="<?php echo $yourImageId ?>">
</form>
<!-- after this, react with $_POST['id'] --> to the id sent to the server side and delete the image in your database -->

The other way is not server side rendered.
You should give your Elements some class like "my-clickable-image".After that, you have a script on your page, that looks something like the following

<script>
/* get your images with querySelectorAll, the . stands for class and after that your name */
var clickables = document.querySelectorAll(".my-clickable-image");
clickables.foreach(function(image){
// say that for each image, when clicked the generated function is called   image.addEventListener('click',generateShowDialogueFunc(image.getAttr("id")));
});

// generate a function(!) that reacts to an image being clicked
function generateShowDialogueFunc(imageIdentifier){
 // return a function that adds a Pop Up to the page
 // the Pop Up has approximately the code of the first options second page
 // except that now, it must create and remove elements in javascript
 return function createPopUp(){
  removePopUp();
  var popup = document.createElement("div");
  popup.setAttribute("id","deletePopUp");
  var deleteForm = document.createElement("form");
  deleteForm.setAttr("action","/path/to/file/that/deletes/given/query.php?id="+imageIdentifier);
  var deleteContents = '<p> Do you want to delete this image? </p>'
  + '<button type="submit"> yes </button>'
  + '<button onclick="removePopUp()"> no </button>'
  deleteForm.innerHTML = deleteContents;
  document.body.appendChild()
 }
}

// remove the Pop Up that can be used to delete an image from the page
function removePopUp(){
 var existingPopUp = document.getElementById("deletePopUp");
 if(existingPopUp) document.body.removeChild(existingPopUp);
}
</script>

<!-- just add some styling to make the popup show on top of the page -->
<style>
  #deletePopUp{
    width: 50vw;
    height: 50vh;
    position: absolute;
    z-index: 1;
    padding: 1em;
  }
</style>

In this case, you just call the server to delete the image, not to show the delete form.

I would suggest the second one but stack overflow is not made for opinion based answers.

Regarding simple security:
It looks like your users could give titles or texts to images.
try what happens if a user gives a title like <bold>some title</title>
and guess what would happen if the title is <script>window.location.href="google.com"</script>
(XSS * hint hint *)

Regarding code structure:
If you want to do something like web development more often, think about separating your database accessing code, and your logic code from your php page template code, this is called 3 tier architecture and standard for bigger projects but i guess this is really just a first, short prototype or test.