Getting initial to work at the top of the code?

  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>

I’ve found the answer and the links are for dummies.

Not a nice way to treat your users though :slight_smile:

1 Like

What do you mean?

#162

Now, what’s the correct code supposed to be?

Repeating your “dummy” code doesn’t change anything.

Paste your code from post 162 into an HTML document and view it in a browser. What do you see?

I see this:

You misunderstood me. Post just the code in post #162. No CSS, no JavaScript - just the code for those links.

What do you see?

I see nothing.

That’s only because it’s not hooked up to the CSS.

Exactly. Because there is no content in those links.

Have you forgotten this?

You need to have content between the <a></a> tags to create a visible link.

<a href="http://www.example.com">Visit example.com</a>

You could use an <img> with suitable alt text, but you must have something there.

That’s where the play button is:

Look again.

We are talking about this section of your HTML. There is no play button there. As you’ve just discovered, there is no content there at all which will allow anybody to use any of your “links” in the absence of CSS orJavaScript.

  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>
  <a href="https://www.google.com/" target="_blank" title="Google"></a>

You can’t use blogger without CSS.

Ignoring the empty links I would start with html that looks like this.

<div class="wrap">
  <h1 class="title">Links</h1>
  <ul class="nav">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
  <audio></audio>
  <div class="playButtone" data-audio="http://hi5.1980s.fm/;"> 
   <svg class="playe" focusable="false" width="38" height="40" viewbox="0 0 85 100">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
      <title>PLAY</title>
    </path>
    </svg> <svg class="pausee hidee" focusable="false" width="36" height="40" viewbox="0 0 60 100">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
      <title>PAUSE</title>
    </path>
    </svg> 
   </div>
</div>

The h1.title assumes this is just the only one on the page otherwise a heading of suitable rank would need to be used.

CSS to follow in a minute:

Of course the JS will also need to be refactored to account for the changes.

1 Like

Not working:

.wrap a:nth-of-type(15) {
	position: relative;
	width: 44px;
	height: 44px;
	border: 3px solid #0059dd;
	background: #ffffff;
}
.wrap a:nth-of-type(15)::before, .wrap a:nth-of-type(15)::after {
	content: '';
	position: absolute;
	top: 0;
	width: 14px;
	height: 44px;
}
.wrap a:nth-of-type(15)::before {
	left: 0;
	background-color: #00ffff;
}
.wrap a:nth-of-type(15)::after {
	right: 0;
	background-color: #ff00ff;
}

What is not working?

#00ffff

That color is nowhere to be found.

This one too.

#ff00ff

This one three:

#ffffff

I presume that’s a typo meaning the CSS to go with the new HTML will follow in a minute. Don’t jump the gun.

1 Like

Yes I needed to change the nth-child now that the list was in place.

Here’s the revised CSS:

body {
	background-color: black;
}
.wrap {
	width: 266px;
	height: 174px;
	overflow: hidden;
	position: relative;
}
.wrap a {
	float: left;
	width: 44px;
	height: 44px;
	border: 3px solid #0059dd;
	margin: 0 4px 12px 0;
}
.wrap a:hover {
	border: 3px solid red;
}
.wrap li:nth-of-type(5n) a {
	margin-right: 0;
}
.wrap li:nth-of-type(15) a{
	position: relative;
	width: 44px;
	height: 44px;
	border: 3px solid #0059dd;
	background: #ffffff;
}
.wrap li:nth-of-type(15) a::before, .wrap li:nth-of-type(15) a::after {
	content: '';
	position: absolute;
	top: 0;
	width: 14px;
	height: 44px;
}
.wrap li:nth-of-type(15) a::before {
	left: 0;
	background-color: #00ffff;
}
.wrap li:nth-of-type(15) a::after {
	right: 0;
	background-color: #ff00ff;
}
.title {
	height: 168px;
	margin:0;
	background: url("https://i.imgur.com/BBYxKcf.jpg");
	border: 3px solid #0059dd;
	font-family: Tahoma;
	font-weight: bold;
	font-size: 30px;
	color: #0059dd;
	line-height: 100px;
	text-align: center;
	cursor: pointer;
}
.title{display:none}
.inactive .title{display:block;}

.title::before, .title::after {
	content: "";
	position: absolute;
	top: 0;
	left: 86px;
	width: 3px;
	height: 100%;
	background: #0059dd;
}
.title::after {
	left: 177px;
}
.nav {
	margin:0;
	padding:0;
	list-style:none;
}
.nav li{float:left;}
.playButtone.activated {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 44px;
	height: 44px;
	cursor: pointer;
	border: 3px solid #0059dd;
	fill: #aaff00;
}
.playe {
	position: absolute;
	left: 6px;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: -1;/* move it under the image*/
}
.pausee {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.hidee, .wrap.inactive a {
	display: none;
}

Now the js needs to remove the inactive class from .wrap and then toggle the playbuttons as required.

2 Likes

You are missing my point.

@Paul_Wilkins said:[quote=“Paul_Wilkins, post:86, topic:284004”]
the ultimate goal here is to code the HTML and CSS so that everything works even when CSS or JavaScript isn’t there.
[/quote]

He then asked you if you thought it would be worth learning this approach:

and you replied

I am attempting to show you why there is a problem with your links in an HTML-only scenario. It is my understanding that this is what both you and Paul_Wilkins wanted. If you are not interested in learning this, then it would be most helpful to all concerned if you would say so clearly, so we don’t waste our time or yours.

2 Likes

coothead

2 Likes