Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ END display

Posted by: falcon Oct 27 2017, 07:43 PM

END display

CODE

<dt><center><b>&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;
&nbsp;-&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;-&nbsp;
&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;-
&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;E N D&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;
&nbsp;-&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;-&nbsp;
&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;-
&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;
&nbsp;-</b></center></dt></dl>


Ther are three (3) spaces between each dash (-)
There are fifteen (15) dashes each side of END

Display:

- - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - -

Is there a better way to code this in HTML to obtain this display (END) ie remove a lot of space characters
Thank You
falcon

Posted by: pandy Oct 27 2017, 08:56 PM

There are actually 15 dashes on the left side and 17 on the right side. tongue.gif

There are always better ways than a bunch of non-breaking spaces. And I don't see how that could even resemble a definition list.

This isn't elegant either, but it's better than misusing meaningful HTML elements. The spacing depends on what font you use, so you may use some trial and error to make it look as you want.

CODE
#foo      { text-align: center;
            font-weight: bold;
            word-spacing: .6em }
#foo span { word-spacing: normal }



HTML
<div id="foo">- - - - - - - - - - - - - - - <span>E N D</span> - - - - - - - - - - - - - - -</div>

Posted by: Christian J Oct 28 2017, 10:44 AM

In what context is the word "END" used?

Maybe you could use a background-image for the dashes, or a dashed border-style.

Posted by: pandy Oct 28 2017, 02:52 PM

Yeah, a background image would work if the dashes don't need to scale. A dashed border would require more HTML elements.

Posted by: Christian J Oct 28 2017, 03:42 PM

I was thinking of something like this:

CODE
p {
border-top: 0.2em dashed;
font-size: 1em;
text-align: center;
}

p span {
position: relative;
top: -0.7em;
letter-spacing: 0.5em;
}

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)