468,510 Members | 1,631 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,510 developers. It's quick & easy.

HOW TO: place text on top of a line....

Mel
i want to have a thin horizontal line of width 400px with a text placed on
it with background white and the line should go through the middle of my
text vertically, similar to the top of a group box

something like:

----My Text Goes Here----------------------
thanks

Jul 21 '05 #1
10 6240
"Mel" <me**********@hp.com> wrote:
i want to have a thin horizontal line of width 400px with a text placed on
it with background white and the line should go through the middle of my
text vertically, similar to the top of a group box

something like:

----My Text Goes Here----------------------


http://homepage.ntlworld.com/spartanicus/mel.htm

--
Spartanicus
Jul 21 '05 #2
Mel
But that means that i have no control over the color of the line :-(

i need to specify a single color to be used for "line" & "text"

sorry if i was not clear

please help

PS:- i dont have strip.png file either

"Spartanicus" <me@privacy.net> wrote in message
news:t8********************************@news.spart anicus.utvinternet.ie...
"Mel" <me**********@hp.com> wrote:
i want to have a thin horizontal line of width 400px with a text placed onit with background white and the line should go through the middle of my
text vertically, similar to the top of a group box

something like:

----My Text Goes Here----------------------


http://homepage.ntlworld.com/spartanicus/mel.htm

--
Spartanicus

Jul 21 '05 #3
"Mel" <me**********@hp.com> wrote:
"Spartanicus" <me@privacy.net> wrote in message
news:t8********************************@news.spar tanicus.utvinternet.ie...
"Mel" <me**********@hp.com> wrote:
>i want to have a thin horizontal line of width 400px with a text placed
>on it with background white and the line should go through the middle of
>my text vertically, similar to the top of a group box
>
>something like:
>
>----My Text Goes Here----------------------
http://homepage.ntlworld.com/spartanicus/mel.htm

But that means that i have no control over the color of the line :-(


Are you changing the colour of your text frequently?
i need to specify a single color to be used for "line" & "text"
Then make a line graphic in the appropriate colour.
PS:- i dont have strip.png file either


Make one.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 21 '05 #4
>
PS:- i dont have strip.png file either

Make one.

Steve


Better yet, make a blank 1x1 pixel transparent gif and specify the
background color, width and height with css :)

That way you can use the same image for different colors and rectangular
shapes.
Jul 21 '05 #5
Ståle Sæbøe <ot*****@tdz.no> wrote:
Steve Pugh <st***@pugh.net> wrote:
"Mel" <me**********@hp.com> wrote:
PS:- i dont have strip.png file either


Make one.

Better yet, make a blank 1x1 pixel transparent gif and specify the
background color, width and height with css :)


I take it you didn't actally look at the sample code?

To do it your way would involve using more complex code as instead of
a simple background image you would need to use positioning to place
the text on top of the single pixel high div - and in fact you then
wouldn't need the image at all.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 21 '05 #6
Mel wrote:
i want
something like:

----My Text Goes Here----------------------


HTML
<div><h1><span>My Text Goes Here</span></h1></div>

CSS
div {
padding-top: 1em;
background: #fff;
color: #000; }
h1 {
border-top: thin solid #999;
padding-left: 10%;
margin: .5em .2em 0 .2em; }
span {
background: #fff;
color: #000;
padding: 0 1%;
position: relative;
top: -.6em; }

This looks like one of the few cases where relative positioning actually
comes in handy. :) I only tested it in a handful of browsers, so no
guarantees.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 21 '05 #7
"Mel" <me**********@hp.com> wrote:
PS:- i dont have strip.png file either


I wouldn't recommend that you do one, but if you insist then I'd suggest
that jpeg is a more appropriate format ;-)

--
Spartanicus
Jul 21 '05 #8
Spartanicus wrote:
"Mel" <me**********@hp.com> wrote:
PS:- i dont have strip.png file either


jpeg is a more appropriate format ;-)


Not sure what the smiley is for, but jpg is not more appropriate for
line drawings, for sure. A plain stripe should be png all the way.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 21 '05 #9
kchayka <us****@c-net.us> wrote:
PS:- i dont have strip.png file either


I wouldn't recommend that you do one, but if you insist then I'd suggest
that jpeg is a more appropriate format ;-)


Not sure what the smiley is for


http://www.geocities.com/ystradband/bigspender.html

--
Spartanicus
Jul 21 '05 #10
kchayka wrote:
Spartanicus wrote:
"Mel" <me**********@hp.com> wrote:

PS:- i dont have strip.png file either


jpeg is a more appropriate format ;-)

Not sure what the smiley is for, but jpg is not more appropriate for
line drawings, for sure. A plain stripe should be png all the way.


jpeg delivers better overall quality and should be used with a fancy
line with shadows and lightning effects. However, be aware that jpegs
are not transparent and may thus clash with any background colors of the
document (or background images if used as an inline image).

png and gif delivers transparency (thus compatibility with whatever lies
beneath it) but at the cost of "prettyness".

Who is to say what is "appropriate"?
Jul 21 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Peter Brown | last post: by
14 posts views Thread by Viken Karaguesian | last post: by
4 posts views Thread by Phil Diwell | last post: by
1 post views Thread by laredotornado | last post: by
reply views Thread by NPC403 | last post: by
1 post views Thread by fmendoza | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.