<h1> over three lines

What would be the best way to create a <h1> tag over three lines where the top line is aligned left, the middle line justified and the bottom line aligned right without using <br>

Thank you in advance

This is why I love SPF. At least now I have something to choose from. :slight_smile:

Thanks a lot noonnope, Paul O’B, xhtmlcoder and Erik J :tup:

<span> comes to mind. But it would rely on CSS. But then CSS is a must for those specific text lines alignments.

I would probably use <br> too for, at least, break the lines when no author CSS available. But I would offCSS-it and use spans as hooks.

Hi,

I would do something like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1{text-align:center;width:760px;margin:auto}
span,b{display:block;text-align:left}
b{text-align:right}
</style>
</head>
<body>
<h1><span>Left</span>Middle<b>Right</b></h1>
</body>
</html>

Or if you don’t like the non semantic b element then do this :slight_smile:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1{text-align:center;width:760px;margin:auto}
span,b{display:block;text-align:left}
.r{text-align:right}
</style>
</head>
<body>
<h1><span>This heading</span> is Split <span class="r"> over 3 lines</span></h1>
</body>
</html>


I see no point for breaks as this is a heading and you are creating a visual effect for the text in that heading. If it’s not a heading then an h1 is the wrong element.

Hi noonnope! Thanks for that. Would it be to much asked if I ask you to give an example of what you mean using a width of 760px;?

That what I was looking for Paul. Thank you so much. :tup:

The first one was right to the point. About the semantic! I remember a thread some days ago where semantic was quite some times confused with structure by some members. So I’m okay with the first option :slight_smile:

Since I’m using CSS 2.1 w/ disregard for IE6 issues, I would start from this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
  h1 { 
      width:760px;
      margin:auto; 
      border:1px solid black;
    }
    
  h1 span {
      display:block;
      text-align:center;
    }
      
  h1 span+span {
      text-align:right;
    }
</style>
</head><body>
  <h1>This heading<span> is Split </span><span>over 3 lines</span></h1>
</body></html>

This code will make for a slightly incomplete IE6 user experience. Fine with me. It’s their situation, my code STILL makes for a satisfactory UX.

Hmm, yes the B would probably be out of place on the most important element on the page. You could do triplicate but it probably wouldn’t make much sense.

@Paul O’B: It is a heading indeed! I would never would use such a tag on places it won’t belong :slight_smile:

I finally opted for noonnope’s option using the two spans. Considering that site owner gave me a free hand in which browsers to serve.

This code will make for a slightly incomplete IE6 user experience.

Shame on you :slight_smile: I still have IE6 on my laptop.

:lol:

It’s you and your laptop who should be ashamed ! Mine’s got W7 and eagerly awaits FF 4. It asked me not to put any crap in it anymore or it’ll retire!

Yes but he only showed you his after I showed you mine :slight_smile:

Yeah, but I mentioned <span> first :rofl:

Actually, it’s true. I stole mark-up from you. And it’s obvious, since I prefer html 4.01. But I was at work, and Friday it’s a short work day…

Though I think you’ve noticed I went a whole different way, mark-up and CSS (apart from the obvious stealing part, of course ) :slight_smile:

In the OP you wanted the middle line justified. :slight_smile:

Here is a justified middle line version. Old IE will just differ by the middle line left aligned I think (have only access to FF 3.6 ftm).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
h1{
	margin:auto;
	border:dotted;
	width:80%;
	line-height:1.2;
	text-align:right;
}
h1 span{
	display:block;
	text-align:left;
}
h1 span+span{
	float:left;
	margin:0 0 -1.2em;
	width:100%;
	text-align:justify;
	word-spacing:-.2em;
}
h1 span+span:after{
	margin-left:99%; /* creates a linebreak to justify middle (N.B keep that trailing space in the html) */
	content:".";
	visibility:hidden;
}
</style>
</head><body>

<h1><span>Left Left </span><span>Justified Justified Justified Justified Middle </span>Right Right</h1>

</body></html>

Trust Erik to go one better :slight_smile:

Here’s my simpler version that lets IE6 play (but not justified text of course)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1{text-align:right;width:760px;margin:auto}
span{display:block;text-align:left}
span span{text-align:center;}
</style>
</head>
<body>
<h1><span>This heading <span>is Split</span></span> over 3 lines</h1>
</body>
</html>


I wonder how much mileage we can get out of this topic :slight_smile:

Hmmm…

Interesting. I don’t think though that :after is supported in IE lt 9. And it goes out of boundaries.

Nice one Paul! It’s comming on pretty good now :slight_smile:

Here’s my response, IE6 supported, thanks to Paul’s idea: :wink:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
  h1 { 
      width:760px;
      margin:auto; 
      border:1px solid black;
    }
    
  h1 span {
      display:block;
      text-align:center;
    }
      
  h1 span span {
      text-align:right;
    }
</style>
</head><body>
  <h1>This heading<span> is Split <span>over 3 lines</span></span></h1>
</body></html>

Interesting concept, Paul ! With nesting to overcome the sibling CSS selector IE6 has problems with. I like it ! Really, really like it ! I guess now <b> days are really over ?! :lol:

But, (and even more) for when IE6 is no longer, I would still opt for the span+span instead of nesting :wink: It’s seems more… natural for the mark-up.

No worries, it was just my poor attempt at a joke :slight_smile:

span+span instead of nesting

Yes, I agree the adjacent selector is a great tool and allows for more natural mark up.

IE8 does support the pseudo :after element as seen in this example.

You may have been thinking about :last-child which is not supported in IE8.

I guess now <b> days are really over ?! :lol:
Maybe in this h1 example they are, but when it comes to sandbags in list-items and vertical-align workarounds I will still be using them before I use a span with a class. :slight_smile: