asasass
1
Clicking is enabled when clicking off the image here:
And by enabled, I mean after you click outside the image it goes to the scrollbar.
How do I disable clicking off the image on this code, like it works on the bottom code?
I don’t understand what I’m doing wrong. I can’t figure it out.
<style>
#cover {
width: 260px;
height: 168px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/rlHPMrR.jpg");
border: 3px solid #0059dd;
}
#text {
font-family: Tahoma;
font-weight: bold;
font-size: 30px;
color: #0059dd;
text-align: center;
margin:-150px;
text-decoration: none;
cursor:pointer;
}
.auto {
width: 266px;
height: 174px;
overflow: auto;
background: #000000;
}
li {
padding-bottom: 20px;
}
ul {
margin: 0;
padding: 0;
margin-top: -1px;
list-style: none;
text-align: left;
}
a:link {
width: 243px;
height: 20px;
display: block;
background: green;
}
a:visited {
color: #000000;
background: red;
}
a:hover {
color: #000000;
}
h3 {
color: blue;
font-weight: bold;
line-height: 1;
font-size: 25px;
margin: 0;
}
.no_pad {
padding: 0;
}
</style>
<div style="width:260;" onclick="myObject=document.getElementById('myObj');
myObject.style.display='block'; this.style.display='none'">
<div id="cover"></div>
<div id="text">Links</div>
</div>
</div>
<div id="myObj" style="display: none;">
<div class="auto">
<ul>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li class='no_pad'>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
</ul>
</div>
Clicking is disabled when clicking off the image here:
<div style="width:260px;" onclick="myscr2=document.getElementById('myscroll2'); myscr2.style.display='block'; this.style.display='none'">
<a href="" style="background-image: linear-gradient( to right,transparent 0 ,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px ),url('https://i.imgur.com/rlHPMrR.jpg');display:block;height: 168px;border: 3px solid #0059dd; cursor: pointer; "></a></div>
If instead of clicking there you do a “right-click inspect”, what element shows as selected in the console and what are its active CSS rules?
asasass
3
It’s the text that’s causing it. but I don’t know how to fix it.
Someone told me to use display:inline-block, but that removes the text completely.
No, it’s doing what you’ve told it to do. If you don’t want that, don’t tell it to do it.
What do you see under “CSS value” and “Actual” in the table on this page?
asasass
5
I don’t think you understand what I mean. I want to have it set so that when you click off the image, nothing happens, it doesn’t go to the scrollbar.
Help me to understand by answering my previous question
asasass
7
Update:
Clicking to the right of the image is now disabled. How do I do below the image now?
<style>
#cover {
width: 260px;
height: 168px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/rlHPMrR.jpg");
border: 3px solid #0059dd;
}
#text {
font-family: Tahoma;
font-weight: bold;
font-size: 30px;
color: #0059dd;
text-align: center;
text-decoration: none;
cursor:pointer;
display:inline-block;
position: relative;
top:-140px;
width: 266px;
height: 174px;
}
.auto {
width: 266px;
height: 174px;
overflow: auto;
background: #000000;
}
li {
padding-bottom: 20px;
}
ul {
margin: 0;
padding: 0;
margin-top: -1px;
list-style: none;
text-align: left;
}
a:link {
width: 243px;
height: 20px;
display: block;
background: green;
}
a:visited {
color: #000000;
background: red;
}
a:hover {
color: #000000;
}
h3 {
color: blue;
font-weight: bold;
line-height: 1;
font-size: 25px;
margin: 0;
}
.no_pad {
padding: 0;
}
</style>
<div style="width:260px;" onclick="myObject=document.getElementById('myObj');
myObject.style.display='block'; this.style.display='none'">
<div id="cover"></div>
<div id="text">Links</div>
</div>
</div>
<div id="myObj" style="display: none;">
<div class="auto">
<ul>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li class='no_pad'>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
</ul>
</div>
asasass
9
Is display: inline-block; needed here if it works without it?
#text {
font-family: Tahoma;
font-weight: bold;
font-size: 30px;
color: #0059dd;
text-align: center;
text-decoration: none;
cursor: pointer;
position: absolute;
top: 40px;
left: 101px;
display: inline-block;
}
This…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em/162% tahoma,verdana, arial, helvetica, sans-serif;
}
h1 {
font-size:1.5em;
}
#cover {
width: 8.866em;
height: 5.8em;
padding-top: 0.75em;
background-image: linear-gradient( to right,
transparent, transparent 83px,
#0059dd 83px, #0059dd 86px,
transparent 86px, transparent 174px,
#0059dd 174px, #0059dd 177px,
transparent 177px, transparent 260px ),
url(https://i.imgur.com/rlHPMrR.jpg);
border: 0.1em solid #0059dd;
box-sizing: border-box;
font-family: tahoma, sans-serif;
font-weight: bold;
font-size: 1.875em;
color: #0059dd;
text-align: center;
text-decoration: none;
cursor: pointer;
}
#myObj {
width: 16.625em;
height: 10.875em;
margin: 0;
padding: 0;
overflow: auto;
background: #000;
list-style: none;
text-align: left;
}
#myObj li {
padding-bottom: 1.25em;
}
#myObj li:last-of-type{
padding: 0;
}
h2 {
margin: 0;
line-height: 1em;
font-size: 1.5em;
color: #00f;
}
#myObj a:link {
display: block;
background: #008000;
}
#myObj a:visited {
color: #000;
background: #f00;
}
#myObj a:hover {
color: #000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<h1>page description</h1>
<div id="cover">Links</div>
<ul id="myObj" class="hide">
<li>
<h2>Text</h2>
<a href="#" target="blank">link</a>
</li><li>
<h2>Text</h2>
<a href="#" target="blank">link</a>
</li><li>
<h2>Text</h2>
<a href="#" target="blank">link</a>
</li><li>
<h2>Text</h2>
<a href="#" target="blank">link</a>
</li><li>
<h2>Text</h2>
<a href="#" target="blank">link</a>
</li><li>
<h2>Text</h2>
<a href="#" target="blank">link</a>
</li><li>
<h2>Text</h2>
<a href="#" target="blank">link</a>
</li><li>
<h2>Text</h2>
<a href="#" target="blank">link</a>
</li><li>
<h2>Text</h2>
<a href="#" target="blank">link</a>
</li><li>
<h2>Text</h2>
<a href="#" target="blank">link</a>
</li><li>
<h2>Text</h2>
<a href="#" target="blank">link</a>
</li><li>
<h2>Text</h2>
<a href="#" target="blank">link</a>
</li><li>
<h2>Text</h2>
<a href="#" target="blank">link</a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank">link</a>
</li>
</ul>
<script>
(function( d ) {
'use strict';
d.getElementById( 'cover' ).addEventListener( 'click',
function() {
this.classList.add( 'hide' );
d.getElementById( 'myObj' ).classList.remove( 'hide' );
}, false );
}( document ));
</script>
</body>
</html>
…appears to work. 
coothead
asasass
11
What’s the difference between how you did it, and how I did it. Can you explain please.
And is how I did it not right/correct in any way?
<style>
#cover {
width: 260px;
height: 168px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/rlHPMrR.jpg");
border: 3px solid #0059dd;
}
#text {
font-family: Tahoma;
font-weight: bold;
font-size: 30px;
color: #0059dd;
cursor: pointer;
position: absolute;
top: 42px;
left: 101px;
}
.auto {
width: 266px;
height: 174px;
overflow: auto;
background: #000000;
}
li {
padding-bottom: 20px;
}
ul {
margin: 0;
padding: 0;
margin-top: -1px;
list-style: none;
text-align: left;
}
a:link {
width: 243px;
height: 20px;
display: block;
background: green;
}
a:visited {
color: #000000;
background: red;
}
a:hover {
color: #000000;
}
h3 {
color: blue;
font-weight: bold;
line-height: 1;
font-size: 25px;
margin: 0;
}
.no_pad {
padding: 0;
}
</style>
<div style="width:266px;background-color:red;" onclick="myObject=document.getElementById('myObj');
myObject.style.display='block'; this.style.display='none'">
<div id="cover"></div>
<div id="text">Links</div>
</div>
<div id="myObj" style="display: none;">
<div class="auto">
<ul>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li class='no_pad'>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
</ul>
</div>
- I probably have a different mindset
to you when it comes to coding.
- You rely upon “jspiddle”, whereas
I rely upon test browsers.
- Your “jspiddle” link looks like this…
- My code starts with…
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
…and ends with…
<script>
(function( d ) {
'use strict';
var cover = d.getElementById( 'cover' );
cover.addEventListener( 'click',
function() {
cover.classList.add( 'hide' );
d.getElementById( 'myObj' ).classList.remove( 'hide' );
}, false );
}( document ));
</script>
</body>
</html>
These are the main differences, as I see them.
coothead
asasass
13
You use these:
box-sizing: border-box;
text-align: center;
padding-top: 0.75em;
I use:
position: absolute;
top: 42px;
left: 101px;
Is it wrong/incorrect to use positioning on text?
asasass
14
I should have been more specific and asked for the trivial differences.
They are not trivial. Absolute positioning using “magic numbers” is extremely fragile and best avoided if at all possible.
3 Likes
asasass
16
That’s what I wanted to know, thank you.
You used this…
<div style="width:266px;background-color:red;" onclick="myObject=document.getElementById('myObj');
myObject.style.display='block'; this.style.display='none'">
<div id="cover"></div>
<div id="text">Links</div>
</div>
I changed it to this…
<div id="cover">Links</div>
You used this…
<div id="myObj" style="display: none;">
<div class="auto">
<ul>
I changed it to this…
<ul id="myObj" class="hide">
You used this…
onclick="myObject=document.getElementById('myObj');
myObject.style.display='block'; this.style.display='none'"
I changed it to…
<script>
(function( d ) {
'use strict';
var cover = d.getElementById( 'cover' );
cover.addEventListener( 'click',
function() {
cover.classList.add( 'hide' );
d.getElementById( 'myObj' ).classList.remove( 'hide' );
}, false );
}( document ));
</script>
You use…
position: absolute;
I prefer not to use it, unless it is required.
You use…
px
I prefer to use…
em
I believe that covers the majority of differences.
coothead
asasass
18
On yours, if I remove the word link, the whole block disappears. How would I remove the word link, and the whole block stays without disappearing?
<a href="#" target="blank">Link</a>
When I remove the word link, the block disappears
On mine I have no text in that spot and the blocks stay.
asasass
19
This one has 0 text on there and the block still shows, whereas, on yours it disappears.
How would I adjust yours so I don’t have to put text there?
<div class="auto">
<ul>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li class='no_pad'>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
</ul>
</div>
Why, on earth, would you want to remove text from the “a elements” ? 
If you give me a reason, then I may offer a solution.
coothead
1 Like
