Prevent Image Clicks & Protect Text from Copying with HTML and CSS

So, I have an image that is supposed to direct you to a specific URL when clicked. However, the image is currently unclickable and there's a text box below it that cannot be copied. This issue arose after I used CSS to position the image and text box.

Here is the CSS code for the image and text box:

    
#left{
width:120px;
height:auto;
float:left;
margin-top:10px;
margin-left:150px;
}

And here is the HTML code for both elements:

    
<div id="left"> <a href="user.php" target="_blank" align="right"><img src="img/acc.png"></a></div>
...

It's puzzling why positioning these elements with CSS would render them unclickable and uncopyable. Any assistance on this matter would be greatly appreciated.

htmlcss

Answer №1

It seems like the issue stems from the fact that the #left div is being covered by the first child of the #header div. This first child, referred to as TheDiv, is positioned absolutely with its top at 46px and left at 50px. Inside TheDiv, there is another div called #right which is 600px wide, 585px high, and has a left margin of 510px. As a result, TheDiv ends up being sized at 1110px by 710px according to the layout engine.

Because TheDiv is absolutely positioned, it covers everything within its enormous dimensions of 1110 x 710px.

It appears that there are significant flaws in your layout design.

Answer №2

The div is positioned absolutely on top of the text content.

The CSS for #header>div looks like this.

position:absolute; top:46px; left:50px

It needs to be adjusted to:

position:absolute; top:46px; left:560px

There is a child element (#right) with a margin-left of 510px, which should actually be 0.

Check out the demo here

Answer №3

I may have stumbled upon a solution for that issue.

To tackle the problem, I made some changes to the HTML structure. I placed a link (containing text) on top of an image that originally did not have a link.

The image is situated behind the content division, added with this line of CSS code: background-image:...;

This is how the HTML structure looks:

<div class="text">
   <a href="#">Text copy here</a>
</div>

And here's the corresponding CSS:

.text {
border:1px solid black;
width:300px;
height:200px;
display:table;
background-image:url(http://www.starcoppe.it/images/grafica-immagine-b.jpg);
background-size:300px 200px;
}

.text a{
content:'';
display:table-cell;
margin:0 auto;
vertical-align:middle;
text-align:center;
text-decoration:none;
color:black;
}

Feel free to check out the DEMO.

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

The issue with EJS Header and Footer not showing up on the

I am currently building a basic todo list application using EJS. However, I am encountering an issue when running it. I would like to run app.js with the header and footer in EJS, but it seems that it is not recognizing the header despite using what I beli ...

javascripthtmlcsslayoutejs

Chrome and Firefox: Images cling together

I've encountered an issue with my recently launched website. Some images in a grid appear to be stuck together, but this problem only occurs in Firefox and Chrome browsers. Oddly enough, zooming in to around 110% then back to 100% seems to temporarily ...

javascriptcsswordpressgoogle-chromefirefox

What is the most efficient method for identifying and modifying an element's in-line style while performing a swipe gesture?

Recently, I've been developing a left swipe gesture handler for chat bubbles. Implementing touchMove and touchStart seems like the logical next step, but for now, I'm focusing on making it work seamlessly for PC/web users. I managed to make it f ...

javascriptcssreactjs

Is it possible to incorporate a PHP if-else statement in the action attribute of an HTML form?

I'm currently developing a form to allow users to create a login username and password. Once the account creation is successful, I want the user to be directed to the actual LOGIN form. To manage this process, I've implemented various checks usi ...

phphtmlformsvalidationaction

To ensure that the first three digits of a phone number are not zeros, you can implement a JavaScript function to validate the input

I've been working on validating a phone number using JavaScript, but I've hit a roadblock. I need to ensure that the area code (first 3 numbers in 999) cannot be all zeros (0). While I know how to create the desired format (like xxx-xxx-xxxx), ...

javascripthtmlformsvalidation

What is the process for enabling a deactivated hyperlink?

Trying to figure out how to create a link that will only activate when a specific value is present. Let's say I have a link like this: a(class="nav-link" id="signal_" style="pointer-events: none" href="/goToStreamingPage") <i class="fas fa-signal" ...

javascripthtmlcss

Is it possible to incorporate a php file within .htaccess?

Can anyone provide guidance on how to include a PHP file using .htaccess? I've searched online but haven't been able to find a helpful tutorial or code. Below is the PHP include code that I have tried: <?php require('footer.php'); ...

phphtmlfile.htaccessinclude

Optimal arrangement for z-index and opacity

In my design, I have placed a nested link within two absolutely positioned divs structured like this: <div class="container"> <div class="leftPostHolder"> <div class="leftPost"> <h3><a href="#">link ...

htmlcss

The event.submit/return true in JS/jQuery is not functioning as expected

Could someone lend a hand? I'm struggling with a validation script that checks an email form for content and a valid email. It's functioning correctly, but it's not submitting the form even when everything is correct - it just removes the er ...

javascriptjqueryhtml

Significant distance between the content and the footer section of the page

Having trouble with a large gap between the content and footer ad on my website. I've tried to troubleshoot it myself, but suspect the issue may be related to the content generated by another site (indeed.com). Check out the link here: Any assistanc ...

csshtml

The property value entered is not valid

Attempting to apply the CSS properties to the element: url('example.png') center center 100% 100% no-repeat Encountering an error message: Invalid property value The format of the background property values should be: background: color position ...

cssbackground

Issues with Html Video ogg Playback

Hey everyone, I'm having some trouble trying to use an OGG video in Firefox while using Meteor. It works fine with MP4 files, but for some reason, I keep getting an error with OGG. Error HTTP “Content-Type” of “text/html” is not supported. ...

htmlfirefoxmeteorvideo

Is there a way to remove deleted SASS styles from the generated CSS?

Is it possible to remove markups from a generated css file using sass? For instance, in my scss file I have: body{ background:$dark; } The resulting CSS file looks like this: body{ background: #000; } If I delete that line of code in sass, what will h ...

cssionic-frameworksass

The link-dark bootstrap class fails to have an impact

As a beginner in using bootstrap, I am creating my first simple website. However, I am facing an issue with the footer copyright section where the class "link-dark" is not taking effect. <!-- Copyright --> <div class="container-fluid ...

htmlcssclassbootstrap-5

The convergence of lighttpd with AngularJS's html5 mode offers a powerful

My angularJS website is hosted on a lighttpd server, but the html5 mode encounters a 404 error when I refresh or use a direct link. On my local Apache server, everything works fine and there are no issues with the rewrite expression in the .htaccess file. ...

angularjshtmlurl-rewritinglighttpdmode

Maintain the background div while scrolling horizontally

I am facing an issue with my wide bar chart where I use iScroll to enable horizontal scrolling. Behind the bar chart, there are horizontal lines that should move along in the background as the user scrolls horizontally. The challenge is to keep the lines v ...

htmlcss

Is it possible to transfer my Bubble webpage to another hosting server?

Can I export the "Code" from bubble.io to create my own server? Appreciate any help! ...

htmlweb

Understanding the specific criteria for Web Driver to identify and choose an option from a dropdown menu

Struggling to use WebDriver to select a value from a drop down menu. The specific selection I am aiming for is: </option><option selected="selected" value="12345678~ Company Name ~123~123456789"> Company Name, -- 759313 </ ...

c#htmlseleniumselenium-webdriverwebdriver

What is the best way to apply a hover rule to a CSS class in order to change the color of a specific row when hovering in

I have managed to successfully apply a classname and add color to a specific row in my react-table. However, I am facing difficulty in adding a hover rule to this className to change the color when I hover over the row. Can someone guide me on how to apply ...

javascriptcssreactjshtml-tablereact-table

What is the appropriate HTML tag to use for content that has been modified (without being added or removed)?

When it comes to identifying added and deleted content, I am familiar with using <ins> for added content and <del> for deleted content. However, what tag should be used to mark content that has changed without specifying what exactly was added ...

html