Transform the entire division into a clickable link, excluding a specific subdivision that should have its own separate link

I need to create a product layout page where products will be displayed with an image, person's name, title, and description. The challenge is that all of these elements should have one common link except for the person's name that needs a separate link.

Adding "href" to the entire div covers the person's name as well, making it function as a single link. How can I ensure that the whole product card has one link while only the person's name has a different link?

You can inspect the code of the first and second product cards to see my current issue.

.person {
  position: relative;
  top: 5px;
  left: 10px;
  color: #000000;
  font-family: "Arial";
  font-size: 15px;
  margin-bottom: -20px;
}

.well {
  background: transparent;
  border-style: none;
}

.item {
  width: 250px !important;
  padding: 0;
  margin-top: 50px;
  margin: 19px;
  box-shadow: 1px 5px 15px #CCC;
}

.col-md-3:hover {
  box-shadow: 1px 5px 25px #ccc;
}

.thumbnail {
  margin-bottom: 0px;
  padding: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

.p-title {
  margin-top: 10px;
  font-weight: bolder;
  font-family: "Arial";
  font-size: 16px;
}

.lead {
  position: relative;
  font-family: "Arial";
  font-size: 15px;
  margin-bottom: 25px;
}

.img-id {
  object-fit: cover!important;
  object-position: center;
  height: 250px!important;
  width: 100% !important;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
<!-- partial:index.partial.html -->
<div class="container">
  <div class="well well-sm">
    <div id="view" class="btn-group">
    </div>

    <div id="products" class="row list-group">

      <!-- Single product -->
      <a href="https://www.youtube.com/">
        <div class="item col-xs-4 col-md-3">
          <div class="thumbnail">
            <img class="img-id" src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" alt="" />
            <a href="https://www.linkedin.com/">
              <div class="person">
                <p class="person-name">Person Name</p>
              </div>
            </a>
            <div class="caption">
              <p class="p-title">
                Old used box</p>
              <div class="row">
                <div class="col-xs-12 col-md-6">
                  <p class="lead">
                    Description</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a>
      <!-- end Single product -->
      <a href="https://www.youtube.com/">
        <div class="item col-xs-4 col-md-3">
          <div class="thumbnail">
            <img class="img-id" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg" alt="" />
            <div class="person">
              <p class="person-name">Person Name</p>
            </div>
            <div class="caption">
              <p class="p-title">
                Old used box</p>
              <div class="row">
                <div class="col-xs-12 col-md-6">
                  <p class="lead">
                    Description</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a>
      <div class="item col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img-id" src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="" />
          <div class="person">
            <p class="person-name">Person Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png" alt="" />
          <div class="person">
            <p class="person-name">Person Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- partial:index.partial.html -->

javascripthtmlcss

Answer №1

Kindly review the updated second card

Avoid wrapping a div with an anchor tag since div is a block element, although it may still function correctly. Instead, consider adding an onclick event to direct to a link and apply cursor pointer styling to indicate to your audience that it is a clickable link. Then, wrap the name tag within another anchor tag.

.person {
  position: relative;
  top: 5px;
  left: 10px;
  color: #000000;
  font-family: "Arial";
  font-size: 15px;
  margin-bottom: -20px;
}

.well {
  background: transparent;
  border-style: none;
}

.item {
  width: 250px !important;
  padding: 0;
  margin-top: 50px;
  margin: 19px;
  box-shadow: 1px 5px 15px #ccc;
}

.col-md-3:hover {
  box-shadow: 1px 5px 25px #ccc;
}

.thumbnail {
  margin-bottom: 0px;
  padding: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

.p-title {
  margin-top: 10px;
  font-weight: bolder;
  font-family: "Arial";
  font-size: 16px;
}

.lead {
  position: relative;
  font-family: "Arial";
  font-size: 15px;
  margin-bottom: 25px;
}

.img-id {
  object-fit: cover !important;
  object-position: center;
  height: 250px !important;
  width: 100% !important;
}

#card-2 {
  cursor: pointer;
}
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/><link rel="stylesheet" href="./style.css" />
<!-- partial:index.partial.html -->
<div class="container">
  <div class="well well-sm">
    <div id="view" class="btn-group"></div>

    <div id="products" class="row list-group">
      <!-- Single product -->
      <a href="https://www.youtube.com/">
        <div class="item col-xs-4 col-md-3">
          <div class="thumbnail">
            <img
              class="img-id"
              src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg"
              alt=""
            />
            <a href="https://www.linkedin.com/">
              <div class="person">
                <p class="person-name">Person Name</p>
              </div>
            </a>
            <div class="caption">
              <p class="p-title">
                Old used box
              </p>
              <div class="row">
                <div class="col-xs-12 col-md-6">
                  <p class="lead">
                    Description
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a>
      <!-- end Single product -->
      <div
        id="card-2"
        class="item col-xs-4 col-md-3"
        onclick="window.location='https://www.youtube.com'"
      >
        <div class="thumbnail">
          <img
            class="img-id"
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg"
            alt=""
          />
          <div class="person">
            <a href="https://www.linkedin.com/">
              <p class="person-name">Person Name</p>
            </a>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box
            </p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="item col-xs-4 col-md-3">
        <div class="thumbnail">
          <img
            class="img-id"
            src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80"
            alt=""
          />
          <div class="person">
            <p class="person-name">Person Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box
            </p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item col-xs-4 col-md-3">
        <div class="thumbnail">
          <img
            class="img-id"
            src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png"
            alt=""
          />
          <div class="person">
            <p class="person-name">Person Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box
            </p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- partial:index.partial.html -->
    </div>
  </div>
</div>

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

Simulating an ES6 module that returns a factory function for moment.js

Disclaimer: I'm a beginner with Jest so please bear with me. I'm currently working on testing a Vue2.js filter named DateFilter using Jest. This filter simply formats a date that is passed to it. DateFilter.js import Vue from 'vue'; ...

javascriptunit-testingvue.jsvuejs2jestjs

Guide to building a multi-dimensional array from a flat object

My endpoint is outputting data in a specific format: const result = [ {id: 4, parentId: null, name: 'Fruits & Veggies'}, {id: 12, parentId: 133, name: 'Sanguinello'}, {id: 3, parentId: 4, name: 'Fruits'}, {id: 67, ...

javascriptrecursionrecursive-datastructures

Multiple instances of the anchor tag are being inserted

Why is the anchor tag I specified in my code appearing multiple times when viewed in the browser? How can I fix this issue? <a href="{{ route('candidate.company.view', $company->id) }}" class="block no-overflow"> <div class="row ...

htmllaravellaravel-blade

Problem with displaying fonts in web browsers

I decided to create a React App using the Material UI library, but I wanted to customize it by changing the default font from Roboto to Overpass. I successfully imported the fonts using their library. <link rel="preconnect" href="https:// ...

htmlcssreactjsmaterial-uigoogle-fonts

Is the API providing a response in the form of an HTML document

I just created a cutting-edge React application that leverages the power of "fetch" to fetch data from an API. Within my App component in the "App.js" file, you can find the following code snippet: function fetchData() { fetch(`WORKINGURLWITHAPIKEY`) ...

javascriptreactjsjsonfetchresponse

Closing a Javascript Websocket connection may result in server crash

I encountered an issue while trying to exchange data between my client and server. It seems that every time I closed my client, the server crashed... My server runs on Node.JS using the nodejs-websocket library. After some investigation, I discovered tha ...

javascriptnode.jswebsocket

What could be causing the absence of HTML attribute suggestions in my Visual Studio Code?

I'm experiencing an issue in my VS Code where the suggestion feature is not working properly. When I try to type "onClick, href, src, etc", the suggestions do not show up as they should. Interestingly, this problem doesn't occur in my older code ...

htmlvisual-studio-codejsxemmet

Is Jade monitoring *.jade files?

Though I am not sure of the internal workings of Jade, my best guess is that it compiles each template file once and then employs a compiled and cached version for subsequent HTTP requests. One intriguing observation I have made while running my Express a ...

javascriptnode.jsexpresspug

Unable to access the property 'function' of an undefined value

I've been attempting to call a function from another function within my React application. However, I am encountering an error that reads: Error in login TypeError: Cannot read property 'loadDashboard' of undefined. Despite researching simil ...

javascriptreactjsecmascript-6

What impact does the text-shadow property have on altering the color of hsla text?

I created a header that changes color to be slightly transparent with a black outline when hovered over (achieved using 4 text-shadows). However, I encountered an issue when trying to use hsla() to define the color. The color defaults to black with 100% o ...

htmlcsscolorshsl

The button component in my React application is not functioning as expected, despite utilizing the useState and useEffect hooks

I'm having trouble with my Button not working, even though I am using useState and useEffect Check out the code below: import React, { useState, useEffect } from "react"; // import Timeout from "await-timeout"; import ...

javascripthtmlreactjs

Adjust the position of the icon in the Mui DatePicker widget

How can I customize the mui DatePicker? I successfully changed the icon, but now I need to adjust its position as well. Instead of being at the end of the text, I want the icon to be at the beginning. Here is my code: <ThemeProvider theme={calendarThem ...

htmlcssreactjsmaterial-uiicons

Strategies for temporarily storing values within md-list-item in AngularJS

I am attempting to populate a list with items using material icons. The issue is that the values are being added permanently when the material icon is clicked, disregarding the save and discard buttons at the bottom of the card. My goal is to add values te ...

javascriptcssangularjshtml

I am interested in displaying or hiding a table depending on a specific condition in MVC 4

Looking at this MVC 4 Razor code snippet: <h4>You have @Model.Count() items up for sale currently. @Html.ActionLink("Add a new listing by clicking here", "Create")</h4> <br /> <table style="visibility: hidden"> .... I am seeking ...

asp.net-mvchtmlasp.net-mvc-4

How to solve z-index issues with two absolutely positioned divs in IE6

Dealing with IE6 bugs has left me exhausted. The problem lies in two (position:absolute) divs that are not functioning properly in terms of their z-index. Here is an example: /* css */ #overlay{ position:absolute; height:1200px; z-index:2; ...

htmlcss

Issue with ExtJS causing store to not load properly

I have been working on this issue for over a week now and cannot seem to get it resolved. The webservice is returning data, which I can see, but the store is not loading it correctly. The only time I managed to display the entire response in the grid was w ...

javascriptajaxextjs

Navigate to the Bootstrap Panel body when the relevant link is clicked

I am facing an issue with a long list of panels that are tedious to scroll through. To make navigation easier, I am attempting to create a shortcut link at the top of the page. Below is the code for the shortcut: <a data-toggle="collapse" data-parent ...

javascriptjqueryhtmltwitter-bootstrap

What is the best way to apply attributes to all titles throughout a webpage?

My goal is to locate all elements on the page that have a title attribute and add a new attribute to each of them. For example: <div title='something 1'></div> <p>Test<div title='something 2'></div></p ...

javascriptjqueryattributes

The functionality of displaying one div while hiding another upon click seems to be malfunctioning

Can anyone lend a hand? I'm having trouble with my code - the section isn't showing up after clicking the button. <script> $("#img1").on('click', function() { $("#div1").fadeIn(); $("#div2,#div3,#div4").fadeOut(); }); $(" ...

jquerycssshow-hide

What is the best way to conceal an element when another element is given a specific class?

Imagine you have 2 buttons The first button <button class="arguments variation-one">Some text</button> - this button has dynamic classes like: variation-one, variation-two, variation-three, but the .arguments class remains static. a ...

javascriptjquerycsshideshow-hide