Creating a clickable div using only CSS is a simple and effective way to enhance the

I'm currently working on creating a div that can be clicked as a whole, instead of just the text inside it. I've experimented with different methods, like the one mentioned here, but all it does is make the shapes disappear.

Here's what I have so far:

http://jsfiddle.net/n5xow3cd/2/

#productfooter {
    width:100%;
    max-width:500px;
    height: 100px;
    margin:0 auto;
}

#stern {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-svg.svg?8854319133829452732')
    no-repeat center;
    background-size:100%;
    text-align: center;
    vertical-align: middle;
    width: 165px;
    height: 75px;
    position:absolute;
    display:table;
}

.sterntext {
    z-index: 999;
    position: relative;
    height: 75px;
    vertical-align: middle;
    display: table-cell;
    padding:0 7px;
}

#stern:hover {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-filled-svg.svg?18364800561828232638')
    no-repeat center;
    color:#fff;
    background-size:100%;
}

#stern a {
    color:#000;
    font-family:arial;
    font-size:12pt;
}

#stern a:hover {
    color:#fff;
}

Is there anything I need to change in order to make the entire #stern clickable, rather than just the text?

Any assistance would be greatly appreciated!

css

Answer №1

You have the option to present .sterntext as table-row and #stern a as table-cell.

#productfooter {
    width:100%;
    max-width:500px;
    height: 100px;
    margin:0 auto;
}
#stern {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-svg.svg?8854319133829452732') no-repeat center;
    background-size:100%;
    text-align: center;
    vertical-align: middle;
    width: 165px;
    height: 75px;
    position:absolute;
    display:table;
}
.sterntext {
    z-index: 999;
    position: relative;
    height: 75px;
    vertical-align: middle;
    display: table-row;
}
#stern:hover {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-filled-svg.svg?18364800561828232638') no-repeat center;
    color:#fff;
    background-size:100%;
}
#stern a {
    color:#000;
    font-family:arial;
    font-size:12pt;
    display: table-cell;
    vertical-align: middle;
    padding: 0 7px;
}
#stern a:hover {
    color:#fff;
}
<div id="productfooter">
    <div id="stern">
        <p class="sterntext"><a href="#">title title title title title title</a>
        </p>
    </div>
</div>

Answer №2

Make a simple adjustment to your HTML layout by nesting the div inside the a tag.

<div id="productfooter">
    <a href="#">
        <div id="stern">
             <p class="sterntext">title title title title title title</p>
        </div>
    </a>
</div>

http://jsfiddle.net/n5xow3cd/3/

Answer №3

Unable to Modify HTML Content

/* Functional styling */

div {
    width: 100px;
    height: 100px;
}

a {
    display: block;
    width: 100%;
    height: 100%;
}


/* Design styling */

div {
    background: #2c3e50;
    color: white;
    text-decoration: none;
}

a {
    color: inherit;
    text-decoration: inherit;
}
<div><a href="#">text here</a></div>

We have specified the a element to be a block with full width and height.

Able to Modify HTML Content

/* Functional styling */

a {
    display: block;
    width: 100px;
    height: 100px;
}


/* Design styling */

a {
    background: #2c3e50;
    color: white;
    text-decoration: none;
}
<a href="#">text here</a>

We have defined the a as a block element in this scenario.

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

Discovering modifications to CSS using selenium

Currently, I am working on an ajax form where CSS elements are dynamically changed. I am curious to know if it is feasible to verify these changes using Selenium. For example, checking if the background color changes from #ffffff to #000000 after clicking ...

cssselenium

Executing 'npm start' to launch an HTML file along with a CSS stylesheet - A step-by-step guide

As a newcomer to the world of coding, I've found that asking questions on platforms like Stack Overflow enables me to connect with fellow developers. I usually code using VS Code and rely on the "live server" extension to quickly test my code. Howeve ...

htmlcssnpmvisual-studio-code

Using SCSS to apply a class in Next.js

Currently, I am working on a project using Next.js and implementing the SCSS module procedure for styling. An example component directory structure is as follows: SampleComponent -> index.tsx and SampleComponent.module.scss The code in SampleComponent ...

javascriptcssreactjssassnext.js

Troubles with CSS in MUI Component Integration

How can I successfully implement a vertical timeline using Material UI in React? I've set it up, but the CSS isn't functioning as expected. Is there an error in my implementation? List of Dependencies: "@emotion/react": "^11.11.1& ...

cssmaterial-ui

JavaScript text spacing

I'm currently utilizing the JavaScript code snippet below to clear out the existing content within a div element in order to insert new elements. However, I've encountered an issue where once the div is cleared, its CSS styling is lost. I am atte ...

javascriptcss

Tips for folding the center div downwards

In the code snippet below, there are three divs that should respond to window resizing by adjusting their layout. When the window becomes too small, the middle div should move down as illustrated in the accompanying image. <!DOCTYPE html> <html&g ...

css

What is the best way to ensure that the red overlay only covers the image without bleeding over to the right side as shown in the image?

As shown in the image, the red spill on the right side extends beyond the image Below is the HTML code I am using <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=" ...

htmlcssbootstrap-4

Customizing WordPress by manually editing the HTML code

Hello there! I recently purchased a WordPress theme and while I have some knowledge of coding in HTML and CSS, working with WordPress is new to me. I am looking to make some edits or comments in my theme, but I am having trouble locating the source file. ...

phphtmlcsswordpress

What is the best way to add a "Save to Favorites" link within a modal window

I have integrated the NASA API to showcase images, where clicking on an image reveals a modal containing additional details. There is also a save to favorites functionality in the tutorial that allows users to save images and details to a local storage sec ...

javascripthtmlcsslocal-storage

Position a div in the center and add color to one side of the space

I am seeking a way to create a centered div with the left side filled with color, as shown in examples. I have devised two solutions without using flexbox, but both seem somewhat like hacks. body { margin: 0; padding: 0; } .header { width: ...

htmlcss

Achieve sliding animations with Pure CSS using slideUp and slideDown techniques

Currently, I have implemented a code snippet to showcase a menu along with displaying submenus upon hovering over the main menus. Now, I am looking to introduce some animation effects for the submenus when they appear, similar to the slideUp and slideDown ...

csshtml

Differences between using CSS properties and AngularJS filters:CSS properties

When working on an angularjs application, one task may be to convert a string to uppercase. There are 2 options available to achieve this, both yielding the same result. However, it is important to consider the scenarios in which one option may be preferre ...

cssangularjs

Tips for adjusting the button spacing on a bootstrap navbar

As someone who doesn't work on front-end tasks frequently, I have encountered an issue while creating a navbar using Bootstrap. The problem arises when trying to add multiple buttons as it causes the spacing between them to appear strange. Does anyon ...

htmlcssbootstrap-5

Integrate blogger into my website with automatic height adjustment and scrolling functionality

Check out my website here. I've integrated a blogger component into it. Can anyone provide guidance on creating parallel scroll and automatically resizing sections based on the blog's height? Thanks, M ...

htmlcssiframebloggerblogs

Arrange elements in a TD in a row side by side using HTML

I just added a slider next to an input and added an input box after the slider. The problem is they are underneath my first input. I want them all side by side in the TD tag. Please help. Let me know if you need more code: <td>$ <input name=" ...

htmlcss

Isolating the controls bar from the video content area within JWPlayer

Currently, I am utilizing JWPlayer for my video playback needs. I am curious if there is a method to separate the controls bar from the video content, similar to the design showcased in this link: https://i.sstatic.net/bZUA9.png Alternatively, are there a ...

htmlcssjwplayer

Locate the unordered list if its immediate parent is a list item

Here is the HTML code snippet I am working with: <div class="nav-collapse collapse"> <ul class="nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret">< ...

javascriptjqueryhtmlcss

Adding text to a horizontal scrolling element causes the parent div to be pushed downwards

Can anyone help me understand why inserting text into one of the divs in a horizontally scrolling div causes the parent div to move downward? Looking for suggestions! @import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700&apo ...

htmlcss

Issue with manipulating background color with JQuery in CSS

Currently, I have a simple navigation menu consisting of five links. The navigation bar is styled with a background image and changes to a darker shade when hovered over. My goal is to implement a jQuery script that dynamically changes the color of the act ...

jqueryhtmlcss

A division of text is colliding with a division that holds a list with no particular

Hello everyone, I am new to HTML/CSS and I am facing an issue that I believe can be easily resolved. Currently, my code has four sections, with the last three displaying as expected in a consecutive manner. However, the second section is overlapping on t ...

htmlcss