How do I fix it so it stays in place and doesn't drop down after I click on it?

My Code: https://jsfiddle.net/7wbgk3py/17/

How do I fix it so it stays in place and doesn’t drop down after I click on it?

<div style="width:606px" onclick="img=document.getElementById('myDiv8'); img.style.display='inline-block';this.style.display='none'">

<a style="cursor: pointer;display:inline-block; width: 596px; height: 49px; background-color:#000000; border: 5px solid #BF598E;"></a></div>

<div id="myDiv8" style="display: none;">

<div style="background-color:green;color: white; width: 606px; height:59px;"/>
<p> <font face="Times New Roman"><font size="3"><q>Never let society to turn you into a grain of sand on the beach. Be different, be individual. Refuse to look alike with others. Leave your herd, only then you will have a real name and till then your name will remain as the grain of sand.</q> ~ <em>Mehmet Murat ildan</em></font></font></p>
</div>

Hi, asasass. Welcome to the forums.

Add to your stylesheet:

p {margin:0}

And validate your code… REALLY.

https://validator.w3.org/nu/

There is no such thing as a self-closing div. The font tags went out of style years ago.

You might consider taking a refresher course in HTML5 and CSS.

1 Like

please google it !

Please read the W3C Standards for HTML5:

https://www.w3.org/TR/html5/grouping-content.html#the-div-element

Thank you. I ended up settling on this code: https://jsfiddle.net/gcnvnhn5/4/

<div style="width:606px" onclick="img=document.getElementById('img2'); img.style.display='block';this.style.display='none'">

<a style="display:block; cursor: pointer; width: 595px; height: 54px; background-color:black; border: 5px solid #BF598E;padding-bottom: 3px; padding-left: 1px"></a></div>

<div id="img2" style="display: none;">

<div style="background-color:black; color:white; width: 605px; height:64px; padding-bottom: 3px; padding-left: 1px">

<font face="Times New Roman"><font size="3"><q>Never let society to turn you into a grain of sand on the beach. Be different, be individual. Refuse to look alike with others. Leave your herd, only then you will have a real name and till then your name will remain as the grain sand.</q> ~ <em>Mehmet Murat ildan</em></font>
</font>
</div></div>
1 Like

We will be happy to help you take the inline CSS styles out of the HTML and place them in a CSS stylesheet.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.