Question

Elements within clickable h2

Introduction

I am creating a one-line menu in html. I have 3 options that work in a really similar way. The problem is that the one that has the html right, looks like it can fail more easily. I put the 3 examples here. I am looking for reliable, browser-compatible menu. The third option uses javascript so I don’t really love it.

The menu has to be 100% width, within a gray rectangle and has to have some text at left and some at right. The entire menu has to be clickable with only one hyperlink. This is what I have tried so far:

Implemented examples

A link to see them all working is here (DISCLAIMER: yes, it is my own webpage). If you don’t feel like clicking there, here’s an image of how they look in the same order as the options:

Option 1.

This one is no html compliant, but I’ve found is the one more logical, it behaves better in general and it’s not likely to give many troubles:

<a href="http://newfutureuniversity.org/test/hblock.php">
  <h2 style="width:100%; height:100%; border: 1px solid #AAA; padding: 0px 0px 0px 5px; background-color: #EEE;">
    Hello world
    <span style="margin: 6px; color:gray; font-size: 15px; float:right; ">
      Right text
    </span>
  </h2>
</a>

Option 2.

This one is html compliant, but I just hate to center things using pixels. I feel like it will break really easily. Besides, the text in the right is not fully clickable:

<h2 style="border: 1px solid #AAA; padding: 0px 0px 0px 5px; background-color: #EEE;">
  <a href="http://newfutureuniversity.org/test/hblock.php" style="width:100%; height:100%; display:block;">
    Hello world
  </a>
  <span style="position: relative; right: 6px; top:-23px; color:gray; font-size: 15px; float:right; ">
    Right text
  </span>
</h2>

Option 3.

This one uses javascript. I prefer not to bloat every menu like this one with javascript and to use html/css is available, but this is another option. It doesn’t get the color that regular links do.

<h2 onclick="location.href='http://newfutureuniversity.org/test/hblock.php';" style="cursor:pointer; display: block; width:100%; height:100%; border: 1px solid #AAA; padding: 0px 0px 0px 5px; background-color: #EEE;">
  Hello world
  <span style="margin: 6px; color:gray; font-size: 15px; float:right; ">
    Right text
  </span>
</h2>

Question

Which one do is more browser compatible and unlikely to break? Do you have any other recommendation or improvement? Any feedback will be appreciated

PS, all the inline CSS will be put apart in a different css sheet.

Answer 1

I’d suggest that the better approach is to reorganise your HTML, to the following:

<h2>
    <a href="http://newfutureuniversity.org/test/hblock.php">Hello world<span>Right text</span></a>
</h2>​

And then use the following CSS:

a {
    display: block;
    padding: 0.2em;
    width: 80%;
    margin: 0 auto;
    border: 1px solid #000;
    background-color: #aaa;
}

a span {
    color: #000;
    float: right;
    text-decoration: none;
    font-size: 0.8em;
    padding-top: 0.2em;
}​

JS Fiddle demo.

The validity of this depends on the elements you want to ultimately place within the h2 tag to remain clickable, though. Under HTML5 it’s valid to nest block-level elements within an a tag, under HTML4, though, while it still seems to work it’s not considered valid, according to the doctype.

But, for the posted requirements this seems to work; albeit it does require the restructuring of your HTML, which may not be possible. However:

• it is valid HTML,
• it’s resistant to breaking (unless the content of the span exceeds a given width,
• it doesn’t rely on arbitrary px adjustments (albeit it does use padding to vertically centre the resized text within the a),
• it doesn’t require JavaScript

---

Edited to amend the CSS a little, to account for the potential for the right-floated text to become large enough to overflow to the next line, by simply adding overflow: hidden to the a element’s CSS:

a {
    display: block;
    padding: 0.2em;
    width: 80%;
    margin: 0 auto;
    border: 1px solid #000;
    background-color: #aaa;
    overflow: hidden;
}

JS Fiddle demo.

You could also, of course, add a max-width to the span:

a span {
    color: #000;
    float: right;
    text-decoration: none;
    font-size: 0.8em;
    padding-top: 0.2em;
    max-width: 80%;
}​

JS Fiddle demo.