HTML HR LINE related issue.

Question

2.20/5 (3 votes)

See more:

HEllo evereyone,

i wrote this code
i need space before LETS and space after Begin in HTML hr tag .
secondily i want to reduce the hr line size from leftside and rightside.
and i want to color Lets Begin word.
Please help me for my requirements.Please find the below code.

XML

<table width="600"  cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="" style="margin-top:1%">
<tr>
<td align="left">
<div style="height:2px; background-color: #8000FF; text-align: center">
  <span style=" margin-right:-5%; margin-left:-5%;background-color: white; position: relative; top: -0.5em;">
   <p3> Lets Begin</p3>
  </span>
</div>
</td>
</tr>
</table>

Thanks
HArshal

Posted 23-Oct-15 23:57pm

R Harshal

Updated 24-Oct-15 0:00am

v2

Add a Solution

Comments

R Harshal 24-Oct-15 6:35am

Please guide me for : to reduce the hr line size from leftside and rightside.
and i want to color Lets Begin word.

Richard MacCutchan 24-Oct-15 6:46am

What is "hr line size"? Also, you can use CSS or <span> to colour the text.

R Harshal 24-Oct-15 6:45am

Answer is incomplete.Anyone can guide me for the same.

Krunal Rohit 25-Oct-15 2:03am

where's

anyway ?

-KR

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

jgakenhe · Answer 1 · 2015-10-24T18:15:00

This should help. I changed background-color, added width, color, font-weight, and used padding to give you the space. Adjust to your needs.

XML

<div style="height:2px; background-color: #8000FF; text-align: center; width: 200px;">
  <span style="margin-right:-5%; margin-left:-5%;background-color: red; color: #fff; font-weight: bold; position: relative; top: -0.5em; padding-right: 10px; padding-left: 10px;">
   Lets Begin
  </span>
</div>

Richard MacCutchan · Answer 2 · 2015-10-24T00:47:00

Solution 2

See http://www.w3schools.com/html/html_elements.asp[^].

Posted 24-Oct-15 0:47am

Richard MacCutchan

Krunal Rohit · Answer 3 · 2015-10-24T20:09:00

I'd suggest you to use :after and :before selectors from CSS.

CSS

.lw { font-size: 60px; }

.lw span{
  color: #f44;
}

.lw:before{
  display: inline-block;
  content: &#39;&#39;;
  height: 2px;
  width: 100px;
  background-color: #f44;
  margin-bottom: 20px;
}

.lw:after{
  display: inline-block;
  content: &#39;&#39;;
  height: 2px;
  width: 100px;
  background-color: #000;
  margin-bottom: 20px;
}

Live Demo: Line before/after the Text[^]

:after
:before

-KR

phil.o · Answer 4 · 2015-10-24T00:05:00

Solution 1

There is a special character called non-breaking-space.
It is used like that:

HTML

<p3>&nbsp;Lets Begin</p3>

Posted 24-Oct-15 0:05am

phil.o

Comments

R Harshal 24-Oct-15 6:19am

secondily i want to reduce the hr line size from leftside and rightside.
and i want to color Lets Begin word.

HTML HR LINE related issue.

4 solutions

Solution 3

Solution 2

Solution 4

Solution 1

Add your solution here

Preview 0