Getting initial to work at the top of the code?

javascript

#142

It can't because web pages don't work that way.


#143

huh, what do you mean, please explain.


#144

What you are wanting to do is have initial as the main section for all of the links and the buttons.
When you click on initial and initial is hidden or removed, that ends up removing all of the links and the buttons too.

Clearly you'll have no play buttons or links when that occurs, so it cannot work.


#145

Once you know the links section works, next I would put the code for the Links section before the link list section code.



Without CSS or JavaScript it would be more like a header, but that should be good.


#146

This won't work either?

#145


#147

There the initial section is not a parent of everything else, but is a separate section in its own right, and should be able to work.


#148

ok, let's give that a go then.


#149

Finally, it's taken you about six hours to finally understand that you cannot do what you wanted to do.

It's too late for me to be of any further help with this by now though. I wish you well in getting the CSS working with your restructured layout.


#150

https://jsfiddle.net/20998tdo/174/


#151

I'll probably, most likely stick with what I had working originally.

But thanks for getting through to me that what I wanted to do was not at all possible.


#152

Would this be better?
https://jsfiddle.net/tavcvcu6/39/

.initiale p {
  font-family: Tahoma;
  font-weight: bold;
  font-size: 30px;
  color: #0059dd;
  line-height: 40px;
  text-align: center;
}

<div class="initiale">
      <p>Links</p>
    </div>

#153

For the Links section I would start with

<div> 
   <div></div>
   <div>Links</div>
   <div></div> 
</div>

Without CSS or JavaScript it would look like


Links

  • Some Media File
  • Other Media File
  • Another Media File

#154

That's not the case. Adjacent hyperlinks can cause issues for anybody using a screen reader, and wrapping the links in <li> tags is an important accessibility aid. (See the "Adjacent links" section: https://webaim.org/techniques/hypertext/hypertext_links)

As you have things set up now, your entire links area is an accessibility nightmare, as I've repeatedly tried to explain.

https://webaim.org/techniques/hypertext/


#155

What are all the links being used for?

<a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>

There's nothing in them so they are not links as such.

Can you clarify what they are for and how you will be using them because until then the html for them cannot be applied correctly. At the moment they do nothing so no one can say what the correct code is supposed to be.

As TechnoBear said bare anchors next to each other used to be an accessibility problem but html 5 didn't raise issues and often shows examples of bare links inside a nav element (however I still prefer the list structure).

<nav>
   <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
</nav>

However if they items are not links but are actions (or indeed just hover effects) then they should be a more appropriate html element.


#156

As links, these are dummy links right now.

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

#157

Really? Fifteen links to Google, all opening in new tabs (including the one in the square containing your "Play" button)?


#158

dummy links for now.


#159

Oh - I see you've now edited your post.

What will these links link to in your finished code? Why do you want them to open in a new tab/window? That choice should be left to the user.


#160

That's not helpful to me or anyone.

Why are they all going to google? Or were you going to have different destinations on each? If it's just one destination then you could do that with one link - the rest is just decoration.

Where's the text to tell your user where they are going?

Or is this a 'Magical mystery Tour" :slight_smile:


#161

I've asked about that repeatedly. There seems to be no answer.