Creating a clickable pagination box involves utilizing CSS to style the entire <li> element with the necessary properties

Is there a way to make the entire LI box clickable for the pagination box? The HTML and CSS parts are functioning correctly, as I am able to click the link with the page number to navigate to the next page.

However, the issue arises when trying to click the blank space beside the number on the LI box, as it does not link to the next page. How can I make that area clickable as well?

Any suggestions on what steps should be taken to resolve this problem?

.pagination {
  margin: 0;
  padding: 0;
}

.pagination li {
  display: inline;
  padding: 6px 10px 6px 10px;
  border: 1px solid #ddd;
  margin-right: -1px;
  font: 13px/20px Arial, Helvetica, sans-serif;
  background: #FFFFFF;
}

.pagination li a {
  text-decoration: none;
  color: rgb(89, 141, 235);
}

.pagination li.first {
  border-radius: 5px 0px 0px 5px;
}

.pagination li.last {
  border-radius: 0px 5px 5px 0px;
}

.pagination li:hover {
  background: #EEE;
}

.pagination li.current {
  background: #89B3CC;
  border: 1px solid #89B3CC;
  color: #FFFFFF;
}
<ul class="pagination">
  <li class="first">
    <a href="/fs/mapping/mapping.php?page=1" title="First">«</a>
  </li>
  <li>
    <a href="/fs/mapping/mapping.php?page=-1" title="Previous">&lt;</a>
  </li>
  <li>
    <a href="/fs/mapping/mapping.php?page=1">1</a>
  </li>
  <li class="active">2</li>
  <li>
    <a href="/fs/mapping/mapping.php?page=3">3</a>
  </li>
  <li>
    <a href="/fs/mapping/mapping.php?page=4">4</a>
  </li>
  <li>
    <a href="/fs/mapping/mapping.php?page=5">&gt;</a>
  </li>
  <li class="last">
    <a href="/fs/mapping/mapping.php?page=5" title="Last">»</a>
  </li>
</ul>

JSFiddle

Any assistance on this matter would be highly appreciated.

htmlcss

Answer №1

Revise this section: 

.pagination li {
      display: inline-block;
      border: 1px solid #ddd;
      margin-right: -1px;
      font: 13px/20px Arial, Helvetica, sans-serif;
      background: #FFFFFF;
    }

    .pagination li a {
      text-decoration: none;
      color: rgb(89, 141, 235);
      display:block;
      padding: 6px 10px 6px 10px;
    }

MARKUP SECTION

 <li class="active"><a href="/fs/mapping/mapping.php?page=1">2</a></li>


.pagination {
  margin: 0;
  padding: 0;
}

.pagination li {
  display: inline-block;
  border: 1px solid #ddd;
  margin-right: -1px;
  font: 13px/20px Arial, Helvetica, sans-serif;
  background: #FFFFFF;
}

.pagination li a {
  text-decoration: none;
  color: rgb(89, 141, 235);
  display:block;
  padding: 6px 10px 6px 10px;
}

.pagination li.first {
  border-radius: 5px 0px 0px 5px;
}

.pagination li.last {
  border-radius: 0px 5px 5px 0px;
}

.pagination li:hover {
  background: #EEE;
}

.pagination li.current {
  background: #89B3CC;
  border: 1px solid #89B3CC;
  color: #FFFFFF;
}
<ul class="pagination">
  <li class="first">
    <a href="/fs/mapping/mapping.php?page=1" title="First">«</a>
  </li>
  <li>
    <a href="/fs/mapping/mapping.php?page=-1" title="Previous">&lt;</a>
  </li>
  <li>
    <a href="/fs/mapping/mapping.php?page=1">1</a>
  </li>
  <li class="active"><a href="/fs/mapping/mapping.php?page=1">2</a></li>
  <li>
    <a href="/fs/mapping/mapping.php?page=3">3</a>
  </li>
  <li>
    <a href="/fs/mapping/mapping.php?page=4">4</a>
  </li>
  <li>
    <a href="/fs/mapping/mapping.php?page=5">&gt;</a>
  </li>
  <li class="last">
    <a href="/fs/mapping/mapping.php?page=5" title="Last">»</a>
  </li>
</ul>

Answer №2

Make the anchor styling in charge of padding adjustment, and don't forget to specify width and height for larger boxes.

.pagination {
      margin: 0;
      padding: 0;
    }


.pagination li {
  display: inline;

  border: 1px solid #ddd;
  margin-right: -1px;
  font: 13px/20px Arial, Helvetica, sans-serif;
  background: #FFFFFF;
}

.pagination li a {
  text-decoration: none;
  padding: 6px 10px 6px 10px;
  color: rgb(89, 141, 235);
}

.pagination li.first {
  border-radius: 5px 0px 0px 5px;
}

.pagination li.last {
  border-radius: 0px 5px 5px 0px;
}

.pagination li:hover {
  background: #EEE;
}

.pagination li.current {
  background: #89B3CC;
  border: 1px solid #89B3CC;
  color: #FFFFFF;
}

Answer №3

This is one way to achieve the desired result:

<a href="/fs/mapping/mapping.php?page=1" title="First">
  <li class="first">
    «
  </li>
</a>

To improve the style, update the selector from .pagination li a to .pagination a.

Alternatively, you can remove the <ul> and <li> tags and use <span> instead. Placing <span> within <a> tags creates a more seamless look compared to using <li> within <a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to utilizing JavaScript for a basic gaming experience

Looking to incorporate multiple divs that will vanish upon being clicked, while also increasing the score by 1 through javascript. Any suggestions on how to accomplish this? ...

javascripthtmlcssonclick

Adjust the navigation height to be proportional to the main content size

I've been attempting to make my navigation menu take up the entire page, but I have yet to achieve success: My goal is for the green menu section to extend down to the footer. Here is the HTML code: <div ...

htmlcss

Issues with implementing the Skeleton feature in the Alert module

Having an issue with a Skeleton component not taking full width inside an Alert component. It seems to be occupying less space than expected. https://i.stack.imgur.com/cMLEy.png Here is the relevant code snippet: <Alert icon={<NotificationsIcon s ...

cssreactjsmaterial-ui

Show Navbar Toggler only when in Portrait mode on mobile devices, not Landscape mode

Attempting to create a responsive website utilizing Bootstrap 4, I encountered a problem with the menu expanding in Landscape orientation on mobile devices, causing distortion. How can I ensure the menu stays collapsed in Landscape orientation? Despite ha ...

cssbootstrap-4

Creating a canvas that adjusts proportionally to different screen sizes

Currently, I am developing a pong game using Angular for the frontend, and the game is displayed inside an HTML canvas. Check out the HTML code below: <div style="height: 70%; width: 70%;" align="center"> <canvas id=&q ...

htmlcssangulartypescriptcanvas

Locate an original identifier using Selenium WebDriver

In search of a distinctive identifier for the "update profile picture button" on my Facebook account to utilize it in automation testing with Selenium WebDriver and Java. I attempted driver.findElement(By.className("_156p")).click();, but unfortunately, i ...

javacssxpathselenium-webdriver

Show button once modal has been closed

I have a 'start' button that triggers a modal window with an embedded video. Once the user closes the modal, I want to show a 'redeem' button after a delay of 6 seconds. HTML: <a id="video-start" onclick="openVideoModal()"><i ...

javascripthtmlcssmodal-dialogbootstrap-modal

Adjusting the image height to match the container height while preserving its original aspect ratio

Is there a method, using CSS alone, to adjust an image's height to fit its container while preserving aspect ratio and allowing the overflow of width to be concealed? It may seem like a complex set of requirements, but is it achievable? Essentially, I ...

htmlcssimagetwitter-bootstrap

Incorrectly colored buttons upon clicking

I am experiencing an issue with my website where the color of the container div is not changing to the correct color when a button representing a color is clicked. Instead, it seems to be displaying the next color in the array of color codes that I have se ...

javascriptjquerycss

Is there a way to disable the feature of saving input values?

I am dealing with an input field that looks like this: <input name="username" placeholder="Email" type="email" autocomplete="off" /> Even though I have set the autocomplete attribute to off, the previous value still appears when I open the page: h ...

htmlcssinputbrowser-cache

Resize the div based on the width and height of the window

My goal is to create a system or website that can be fully resizable using CSS and the VW (viewport width) unit. Within this system, I have integrated a GoogleChart that functions with pixels. Now, I am looking for a way to scale the chart using Javascript ...

javascriptjquerycssgoogle-visualization

TinyMCE - Optimal Approach for Saving Changes: keyup vs onChange vs blur

In the context of my Filemaker file, I am utilizing the TinyMCE editor. My goal is to automatically save any changes made by the user, whether it's typing, applying formatting, inserting an image, or making any other modifications. I have a function ...

javascripthtmltinymcetinymce-5

Angular causes HTML Dropdown to vanish once a null value is assigned

In my scenario, I have two variables named power and mainPower. Both of these variables essentially represent the same concept, with mainPower storing an ID of type Long in the backend, while power contains all attributes of this data transfer object. The ...

htmlangulartypescript

How can you make the second block element in a pair stretch to fill the parent element?

I'm currently struggling to make the "rightcol" in the "wrapper" of my data-entry form fill the remaining space next to the second column. Despite successfully displaying the child elements properly, whenever I use the border-bottom attribute, the bor ...

htmlcss

I must remove the thumb from the input range control

I am looking for a way to remove the thumb from the progress bar in my music player. I have tried various methods without success, and I simply want the progress bar to move forward with color change as it advances based on the Progress variable. For refe ...

htmlcssreactjstypescript

Arranging CSS text in a parallel format and aligning it vertically

I am working on a layout with two columns of text placed side by side, where one column is right aligned and the other is left aligned. Below is my current code: .alignleft { float: left; } .alignright { float: right; } .list-unstyled { padding ...

htmlcss

What is the best way to ensure an image is shown in full screen exclusively on mobile devices?

My goal is to have two different site templates, one for desktop (which is already good) and one for mobile. For the mobile template, I want it to display only an image that fills the entire screen. The image should take up all the available space in term ...

htmltwitter-bootstrapcssfrontend

Tips for aligning a Material UI FAB button in the center and keeping it in the center while resizing the window

Is there a way to center a MaterialUI FAB button and keep it centered while resizing the window? The current positioning is not centered, as seen in the screenshot below, and it does not adjust with window size changes. Below is the code for the current F ...

cssreactjsmaterial-ui

Guide on how to initiate a file download with text area content by clicking an HTML button

I came across this code snippet on GeeksforGeeks, and it partially solves an issue I was facing. <script> function download(file, text) { //creating an invisible element var element = document.createElement('a'); ...

javascriptphphtmljquerycss

strange occurrences of bootstrap.min.css.map popping up

While working on my e-commerce website using Node, Express, Mongoose, and Bootstrap, I encountered an unexpected issue related to "bootstrap.min.css.map". The error 'Cast to ObjectId failed for value "bootstrap.min.css.map" at path "_id" for model " ...

htmlcssnode.jsexpressbootstrap-4