That’s how it works on here and there’s no issue.
I’m trying to incorporate some of your code in mine, and I noticed this difference.
What would a solution be?
Did you not read this…
Let me put it another way then…
Why use “a elements” when you just need coloured bars below “h2 elements” ?
coothead
Then I wouldn’t be able to put a link there.
What would a solution be, and as I stated before.
This one works fine with no text added to a elements.
How come with how yours is set up there’s an issue leaving the text blank?
Essentially, the a element display:block is its own link, it needs, nor requires any text.
The block in and of itself, is its own link.
There’s no text on the a element here and it works as its supposed to.
<a href="" target="_blank" style="display:block;width: 243px; height: 20px; background-color:#edc951;" ></a>
On yours if you remove the text from the a element, the whole entire block disappears.
Well let’s get rid of all the redundant HTML…
<!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-top: 0.833em;
font-size: 1.5em;
font-weight: bold;
color: #00f;
border-bottom: 0.833em solid #f00;
transition: 0.5s ease-in-out;
}
#myObj li:first-of-type{
padding: 0;
}
#myObj li:hover {
border-bottom-color: #f0f;
}
.hide {
display: none;
}
</style>
</head>
<body>
<h1>page description</h1>
<div id="cover">Links</div>
<ul id="myObj" class="hide">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
<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>
coothead
You miss understood me.
This works without text on the a element
<a href="" target="_blank" style="display:block;width: 243px; height: 20px; background-color:#edc951;" ></a>
This works without text on the a element
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
Yours does not work without text on the a element.
<li>
<h2>Text</h2>
<a href="#" target="blank">link</a>
</li>
your code result…
My code result…
coothead
The red blocks on yours are not clickable, nor do they have a link attached to them.
Mine
<style>
.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 class="auto">
<ul>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
</ul>
</div>
Yours:
<style>
#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>
<ul id="myObj" class="">
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
</ul>
I fixed yours. Look
#myObj a:link {
width: 243px;
height: 20px;
display: block;
background: #008000;
}
And how does that fix look if you change it to this?
.....
<ul id="myObj" class="">
<li>
<h2>Text</h2>
<a href="#" target="blank">Some perhaps longer than usual but still possible link text that could happen occasionally even if only rarely.</a>
</li>
</ul>
.....
But I don’t want text in the box, I want it empty.
Can you show me how I can add transition to this code please.
This is how you had it set up.
#myObj li {
color: #00f;
transition: 0.5s ease-in-out;
}
<style>
#cover {
width: 266px;
height: 175px;
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;
font-family: Tahoma;
font-weight: bold;
font-size: 30px;
color: #0059dd;
cursor: pointer;
padding-top: 31px;
text-align: center;
box-sizing: border-box;
}
#myObj {
width: 266px;
height: 175px;
padding: 0;
margin: 0;
overflow: auto;
background: #000;
list-style: none;
text-align: left;
}
#myObj li {
padding-bottom: 20px;
}
#myObj li:last-of-type {
padding: 0;
}
h2 {
margin: 0;
line-height: 1;
font-size: 25px;
color: #00f;
}
#myObj a:link {
width: 243px;
height: 20px;
display: block;
background: green;
}
#myObj a:visited {
background: #f00;
color: #000000;
}
#myObj a:hover {
color: #000;
}
.hide {
display: none;
}
</style>
<div id="cover">Links</div>
<ul id="myObj" class="hide">
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></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>
@coothead, @Mittineague: you’re missing the point here, which is that asasass is only interested in producing his exact design, and has no interest at all in accessibility or usability. The pitfalls of this approach to links, with no anchor text or other indicators of purpose, have been explained to him more than once.
As far as I can gather, this is a private project not intended for a general audience, so normal Web conventions and considerations do not apply.
<!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;
font-size: 1.5em;
font-weight: bold;
color: #00f;
}
#myObj li:last-of-type{
padding: 0;
}
#myObj a {
display: block;
min-height: 0.83em;
background: #008000;
transition: 0.5s ease-in-out;
}
#myObj a:hover {
background: #800000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<h1>page description</h1>
<div id="cover">Links</div>
<ul id="myObj" class="hide">
<li>
Text
<a href=" " target="blank"></a>
</li><li>
Text
<a href=" " target="blank"></a>
</li><li>
Text
<a href=" " target="blank"></a>
</li><li>
Text
<a href=" " target="blank"></a>
</li><li>
Text
<a href=" " target="blank"></a>
</li><li>
Text
<a href=" " target="blank"></a>
</li><li>
Text
<a href=" " target="blank"></a>
</li><li>
Text
<a href=" " target="blank"></a>
</li><li>
Text
<a href=" " target="blank"></a>
</li><li>
Text
<a href=" " target="blank"></a>
</li><li>
Text
<a href=" " target="blank"></a>
</li><li>
Text
<a href=" " target="blank"></a>
</li><li>
Text
<a href=" " target="blank"></a>
</li>
<li>
Text
<a href=" " target="blank"></a>
</li>
</ul>
<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>
1 Like
Can I set it so that after I click on one it stays that color?
This…
#myObj a:hover,
#myObj a:active,
#myObj a:focus {
background: #800000;
}
…instead of this…
#myObj a:hover {
background: #800000;
}
2 Likes
ok. and thank you.
I suppose you are unaware that in real browsers,
clicking on an “a element” opens a new tab. 