It can’t because web pages don’t work that way.
huh, what do you mean, please explain.
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.
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.
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.
ok, let’s give that a go then.
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.
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.
Would this be better?
.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>
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
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.
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.
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>
Really? Fifteen links to Google, all opening in new tabs (including the one in the square containing your “Play” button)?
dummy links for now.
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.
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"
I’ve asked about that repeatedly. There seems to be no answer.