Connect a group of <div> elements via a hyperlink

Every time I attempt to add a hyperlink to the code snippet below, it interferes with the layout of the image and only links the icon rather than the entire flex container. I've experimented with <span> elements but haven't found a successful solution yet.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  transition: opacity .2s ease-in-out;
  flex-wrap: nowrap
}

.flex-item {
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  font-family: verdana;
  width: 100%;
  display: flex;
  flex-shrink: 1;
  justify-content: center;
  align-items: center;
  font-size: calc(8px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
  z-index: 10;
  flex-wrap: nowrap
}

.flex-item:before {
  content: '';
  float: left;
  padding-top: 100%;
}

.red-box {
  background: #fd6f71;
  transition: opacity .2s ease-in-out;
  opacity: 1;
}
<div class="flex-container">
  <div class="red-box flex-item">
    <div class="lh-icon"><img src="https://i.imgur.com/NCp8Sst.png"></div>
    <a>Placeholder</a>
  </div>
</div>

Codepen:

https://codepen.io/adms2000/pen/LYVpaBB

htmlcsscss-animations

Answer №1

Due to the restriction that <a> elements cannot have <a> children, enclosing the entire .flex-container with an <a> tag will not work. The solution is to simply change the placeholder tag from <a> to <span>.

<a href="http://yourlinkhere.com">
  <div class="flex-container">
    <div class="red-box flex-item">
      <div class="lh-icon"><img src="https://i.imgur.com/IyLYxCc.png"></div>
      <span>Placeholder</span>
    </div>
  </div>
</a>

I hope this explanation clarifies things for you! :D

Answer №2

To enable the square to link to a specific URL, you need to enclose it within an anchor tag with the href attribute set to the desired link address. Check out the following code snippet for guidance: 

.flex-container
{
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row;
    transition: opacity .2s ease-in-out;
    flex-wrap: nowrap
}

.flex-item 
{
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    font-family: verdana;
  
    width: 100%;
    display: flex;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
    font-size: calc(8px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
    z-index: 10;
    flex-wrap: nowrap
}

.flex-item:before 
{
    content: '';
    float: left;
    padding-top: 100%;
}

.red-box
{
    background: #fd6f71;
    transition: opacity .2s ease-in-out;
    opacity: 1;
}
<a href="yoururl.html">
  <div class="flex-container">

  <div class="red-box flex-item">
            <div class="lh-icon"><img src="https://i.imgur.com/IyLYxCc.png"></div>
  Placeholder
</div>
</div>
<div></a>

Feel free to give it a try and let me know if this solution works for your needs :)

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

tables that are intertwined

There are three tables on my page and they are all overlapping. Is there a way to prevent this overlap? Check out this link <table id="inventoryTable" class="table dataTable" aria-describedby="inventoryTable_info"> <thead& ...

javascripthtmlcsstwitter-bootstrap

div consistently positioned above fixed element

My goal is straightforward - I have a fixed div at the bottom of my page that always needs to be visible. Inside this div, there are two sub-divs; one small div should always be on top, and the other should be scrollable. The issue lies with the small div ...

javascripthtmlcss

Ways to align grid components at the center in MUI frameworks?

I am brand new to using MUI and currently experimenting with the grid functionality. <Grid className={classes.grid} container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}> {data.data.map((item, index) => { ...

cssmaterial-ui

Using Three.js to incorporate an external JavaScript file into an HTML document

Currently experimenting with three.js and successfully rendered a 3D cube using HTML. Here's a snippet of the HTML code: <div id="render" class="center-block"> <script> // JavaScript code for rendering the 3D cube goes here </script&g ...

javascripthtmlthree.js

Update a DIV when ajax call is successful

I have a webpage with a specific heading: <div class="something"><? some php code ?></div> On this page, there is also an ajax function that performs a certain task: <script> $(document).ready(function () { $(document).ajaxSta ...

javascriptphpjqueryhtmlajax

Achieving Horizontal Alignment in a Dropdown Menu with Bootstrap 4

I am utilizing a dropdown that contains 3 main "categories", each with multiple checkboxes for filtering search results. Below is an example: <div class="dropdown"> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">B ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Can CSS modules be used in conjunction with outside libraries?

I've incorporated a Slider library () into my React project. While regular CSS allows me to style the slider properly, I am facing issues when using css modules. The tsx file looks like this: import styles from './styles.module.css'; . . . ...

cssreactjscss-modules

Stay afloat at the bottom of the webpage without using xhtml

Currently working on Moss 2007 and in need of creating a floating button at the bottom of the screen. This button should move down as I scroll down and up when scrolling back up. Although it can be easily achieved with xhtml, the challenge lies in not bei ...

htmlcsssharepoint-2007

Exchanging text between varying divs and classes

On my webpage, I have multiple boxes of cards where content can dynamically populate. Each box contains a click-to-open accordion feature in the upper right corner. I am struggling to figure out how to change the text of only the clicked box without affect ...

javascriptjquerycss

How can I position a Button at the center of my Grid item using Material UI?

In my React 16.13.0 application, I am utilizing Material UI's Grid and trying to center the content of a button in the middle of a row. Here is what I have tried: center: { alignItems: "center", width: "100%", }, halfRow: { width: "5 ...

cssreactjsmaterial-uialignmentcenter

Conquer the issue of incessant AJAX page refreshing

Currently, I am working on an application where I handle numerous form submissions and utilize ajax to send data to a server running on Node.js. One of the features includes updating a table upon button click, which triggers a spinner to load as an indic ...

javascripthtmlajaxforms

Is there a way to align the content in my Flexbox rows to the top of each cell, resembling a table layout?

I am currently facing challenges in aligning my layout correctly, especially on resolving the final adjustments. In the scenario described below, everything seems to work fine when the message_data <span> elements contain a single line of data. Howe ...

htmlcssflexbox

Themed CSS for Header in HTML Tables

Looking to add some creative CSS theming to the header of a table? Unfortunately, tables don't support this natively. But fear not – there's a workaround! My solution is to insert an element BEHIND the table head and apply the desired styles t ...

htmlcsshtml-tablez-index

Tips for tracking the number of selected checkboxes in Angular?

Utilizing $watch, I attempted to showcase the counter value. However, the counter value has not increased yet, To keep count, $scope.$watch('items', function(items){ var selectedItems = 0; angular.forEach(items, function(item){ selectedItems + ...

javascripthtmlangularjs

The paragraph tag closes automatically once opened

In the process of establishing a news section on my website, I encountered an issue while using the following code: <p id="news-container"> <h1> . . . </h1> <strong>big</strong> . . . </p> Upon inspecting, it appea ...

htmlcss

Having trouble with the collapse feature on my DataList cards

I have a sample card and a DataList on my webpage. The collapse functionality is functioning correctly on the example card, but I am unable to get it to work on the actual cards. Below is the code snippet for reference: <div class="resultadosEspe ...

htmlasp.netbootstrap-4

CSS: Turn off the custom styling for radio buttons

My dilemma lies in the custom radio button I've created using CSS. The issue is that while I can select the radio button, I cannot deselect it. Here is a snippet of the CSS code I used to create the custom radio button: input[type="radio"]:checked:be ...

htmlcss

Issues with html5 dropdown menu not displaying properly when hovered over

As a beginner in programming, I have been tasked with creating a website using HTML5 and CSS. The main issue I am encountering is with my horizontal menu bar that has vertical sub-menus appearing on hover. The menu consists of 3 main tabs: Home, Health, a ...

csshtml

Tips for setting up a due date alert system

As a novice, I'm attempting to develop a function that can switch between texts based on a set due date. The text displayed will change to "Expired" once the due date is reached, and it will remain as "Active" if the date hasn't been reached yet. ...

javascripthtml

Having trouble aligning the unordered list with the input

Can anyone help me troubleshoot my CSS so that the list appears below the input field? Check out this example The nested menu in this example is positioned too far to the left and slightly too high. It should be aligned with the bottom of the containing ...

htmlcss