The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> END display, Eliminate excessive space character & same display
falcon
post Oct 27 2017, 07:43 PM
Post #1


Newbie
*

Group: Members
Posts: 17
Joined: 30-August 14
Member No.: 21,482



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 27 2017, 08:56 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 28 2017, 10:44 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



In what context is the word "END" used?

Maybe you could use a background-image for the dashes, or a dashed border-style.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 28 2017, 02:52 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yeah, a background image would work if the dashes don't need to scale. A dashed border would require more HTML elements.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 28 2017, 03:42 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 04:06 AM