Mouse over text box display - center on page

HTML & CSS
1

I can’t seem to have the text open in the middle of the page. It sort of shifts left.

I appreciate any help to correct this.

Thank you


<style>

span.dropt {background: #FFFF00;}

span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; cursor: pointer;

}

span.dropt span {position: absolute; left: -9999px;

margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;

border-style:solid; border-color:black; border-width:1px; z-index: 6;}

span.dropt:hover span {left: 2%; background: #ffffff;}

span.dropt span {position: absolute; left: -9999px;

margin: 4px 0 0 0px; padding: 3px 3px 3px 3px;

border-style:solid; border-color:black; border-width:1px;}

span.dropt:hover span {margin: 20px 0 0 170px; background: #c4d7dd; z-index:6;}

</style>

Html code:

<span class="dropt" title="">&nbsp;READ THIS&nbsp;
<span style="width:700px;">

---Your text here-----

</span></span>
2

Here is one way of doing it . . . .

1 Like
3

Thanks for that.

How do you put that in a td tag and have the text open outside the confines of the table and place it in the center of the page?

By using the div tag it will space below the line I want it.

For example:

<td>text here (space) PLEASE READ
4

You do not need to use a table to get the hidden text to appear on the same line. Here I have changed the container flex direction from column to default row . . . .

5

Let me show you this because I am probably not clear.

<td><input name="name here" value="value here">&nbsp; PLEASE READ</td>

Looks like this where the PLEASE READ is next to the input box, just after my space.

image

So when I click PLEASE READ then the text will be in center of the page.

Thanks

6

Will the table have more than one row? If not, why is there a <td> tag?

You need to consider how this would work on smartphones and, even on larger screens, whether the text that appears in the centre of the page may overlap the PLEASE READ text.

7

Sorry, I was just showing you placement. But yes, there will be several rows. This will be the first row and several underneath that one.

The code that I have that I submitted is not bad, I just want to improve it by going center screen. It opens just under the READ THIS and input box. Also, it’s not a problem on mobile devices.

8

I suggest you add an extra column on the righthand side of the table and have the hidden text in cells there. You can arrange cell border styles so when the text appears it does not seem to be within the confines of the table.

1 Like
9

Ok thanks, will give that a try.

About your first code, which I like, can you have more than one to a page? If so, do you just number the div’s?

Thanks

10

Just duplicate the HTML and edit the text content. There’s no need to number the <div> elements.

1 Like
12

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