h2 inside <li>

HTML & CSS
1

Hi

In order to solve a problem I created another:

In a long unordered list I now have in between the <li>s a number of h2 and h3. They do not validate

I have been playing around with a number of things that included last child with 48 li+li+li+li…

Now I am trying to replace the h2 with simple text inside <li> but cannot manage to place it centrally, and even worse when the screen narrows. The css for that is in the head

.asian-links li:last-child {

text-align:center;
font-size:30px;
float:left
margin-top:50px;
margin-left:20%;

}

I’ve run out of ideas…

The page is here http://pintotours.net/TEMP/FLAG/Blog.html

Due to other code that does not validate with html5 the page was declared as

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

In fact, what I have done defeats th whole purpose of solving the earlier problem that was that popup lists in the lat row got cut off by the end of the <ul></ul> block. Hover over “Spain” to see what I mean

2

If you need headings in between list items, just close of the </ul> before the heading and start another one after it.

1 Like
3

Hi ralphm

That’s exactly what I had (and may have to go back to). The problem is that I want to introduce lists generated by tooltip (see the link button for "Spain). if the list is very long it gets cut off at the beginning of the next <ul> So, I decided to make just one long list and it works fine, BUT does not validate because of the H2 and H3 tags.

4

Well, I’ve decided to go back and find instead a different answer to the original problem

In http://pintotours.net/TEMP/TOOL/Blog.html the button for “Spain” has a “tooltip”. Bceause it is in one of the last rows and the tooltip is long it gets cut off where the ends.

I tried a number of options but they are neither valid nor practicable, e.g. z-index or

.asian-links li:last-child{
margin-bottom:100px;
}

This last one throws some of the buttons out of place.

is there a way of forcing the tooltip to show over the pace below the </ul> ?

I could make the tooltip go upwards but then I would have similar problems with the first rows.

Of course, I could style the tooltips 2 ways: one normal, the other with the list going upwards for the bottom rows

But there must be a more logical way, I hope!

5

Remember that any technique which relies on hover will be inaccessible both to keyboard-only users and many touch-screen devices.

6

Hi…thanks…

What’s the answer to complement this hover technique that’s driving me crazy!

7

Adding “focus” to any hover rules should make it accessible to keyboards and, I believe, touchscreens.

8

Hi Technobear

How do I do that…? in the css?

This is what I have

.tooltip {
  border-bottom: 1px dotted #000000;
  color: #000000; outline: none;
  cursor: help; text-decoration: none;
  position: relative;
}
.tooltip span {
  margin-left: -999em;
  position: absolute;
}
.tooltip:hover span {
  font-family: Calibri, Tahoma, Geneva, sans-serif;
  position: absolute;
  left: 1em;
  top: 2em;
  z-index: 99;

  margin-left: -16px;
  width: 100px;
}

I assume I have to add :focus to all the selectors? I don’t have a device to try it on.

9

Then what did you enter that text through. Whatever you used to type the message can be used to test focus. Just use the tab key.

10

The problem is not testing it, it’s coding it. Without putting in the code I can’t test it…

I’ve tried a few things but this :focus business is new to me.

11

Looking for this?

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afocus

The :focus CSS pseudo-class is applied when a element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).

1 Like
12

Hi Mittineague

My problem is that I tried to put in front of just about anuthing about and nothing happened, e.g.

.tooltip:hover span:focus {}

span:focus{}

hover:focus{}

ad infinitum

13

my guess would be that
.tooltip:hover span:focus {}
“broke” the CSS file at that point

Any better if you change it to
.tooltip:hover, span:focus {}
or
.tooltip:hover {}
.tooltip span:focus {}

14

Hi

I’m afraid the page has gone a bit funny but probably because I repeated the code…

Have a look:

http://pintotours.net/TEMP/TOOL/Accor.html

15

Hi

Like felgall and TechnoBear warned me above, the “tooltips” don’t work with touch screens. It goes directly into whatever link is in the code. That defeats the whole purpose of the page. If I have to write a new page for each country, in this Accor webpage alone I have 92. And then I have more than a dozen other pages. I could see myself with an extra 1000 pages and a lot of work updating them! And the current script would be unnecessary,

You mentioned :focus. I have not used it before and so far have been unable to get it to work as you can see in my last few posts. Until I find a way of solving the touch screen issue there is no point in going on with the page. The other matter of keyboard users is not a problem inasmuch as I can always leave a prominent message telling them about it.

If you could help me setting up the :focus, if it might solve the problem, I would be very grateful

The latest page is here http://pintotours.net/TEMP/TOOL/Accor.html

One of my attempts at coding the :focus is commented out in the <head> of the html along with the rest of the tooltips css code. It causes serious problems to the page and therefore is definitely wrong. Mayve I shouls have deleted something else.

Thanks

16

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