Login or Sign up Help | Site Map
Connecting Tech Pros Worldwide

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

Question posted by: Mel (Guest) on July 21st, 2005 01:19 AM
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



Would you like to answer this question?
Sign up for a free account, or Login (if you're already a member).
Spartanicus's Avatar
Spartanicus
Guest
n/a Posts
July 21st, 2005
01:19 AM
#2

Re: HOW TO: place text on top of a line....
"Mel" <mel.m.heravi@hp.com> wrote:
[color=blue]
>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----------------------[/color]

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

--
Spartanicus

Mel's Avatar
Mel
Guest
n/a Posts
July 21st, 2005
01:19 AM
#3

Re: HOW TO: place text on top of a line....
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:t8ap21d2ef1n6ojrir6hoifbob14bbs79e@news.spart anicus.utvinternet.ie...[color=blue]
> "Mel" <mel.m.heravi@hp.com> wrote:
>[color=green]
> >i want to have a thin horizontal line of width 400px with a text placed[/color][/color]
on[color=blue][color=green]
> >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----------------------[/color]
>
> http://homepage.ntlworld.com/spartanicus/mel.htm
>
> --
> Spartanicus[/color]



Steve Pugh's Avatar
Steve Pugh
Guest
n/a Posts
July 21st, 2005
01:19 AM
#4

Re: HOW TO: place text on top of a line....
"Mel" <mel.m.heravi@hp.com> wrote:[color=blue]
>"Spartanicus" <me@privacy.net> wrote in message
>news:t8ap21d2ef1n6ojrir6hoifbob14bbs79e@news.spart anicus.utvinternet.ie...[color=green]
>> "Mel" <mel.m.heravi@hp.com> wrote:
>>[color=darkred]
>> >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----------------------[/color]
>>
>> http://homepage.ntlworld.com/spartanicus/mel.htm
>>[/color]
>But that means that i have no control over the color of the line :-([/color]

Are you changing the colour of your text frequently?
[color=blue]
>i need to specify a single color to be used for "line" & "text"[/color]

Then make a line graphic in the appropriate colour.
[color=blue]
>PS:- i dont have strip.png file either[/color]

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 <steve@pugh.net> <http://steve.pugh.net/>

Ståle Sæbøe's Avatar
Ståle Sæbøe
Guest
n/a Posts
July 21st, 2005
01:19 AM
#5

Re: HOW TO: place text on top of a line....
>[color=blue][color=green]
>>PS:- i dont have strip.png file either[/color]
>
>
> Make one.
>
> Steve
>[/color]

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.

Steve Pugh's Avatar
Steve Pugh
Guest
n/a Posts
July 21st, 2005
01:19 AM
#6

Re: HOW TO: place text on top of a line....
Ståle Sæbøe <othmaar@tdz.no> wrote:[color=blue]
>Steve Pugh <steve@pugh.net> wrote:[color=green]
>>"Mel" <mel.m.heravi@hp.com> wrote:
>>[color=darkred]
>>>PS:- i dont have strip.png file either[/color]
>>
>> Make one.
>>[/color]
>Better yet, make a blank 1x1 pixel transparent gif and specify the
>background color, width and height with css :)[/color]

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 <steve@pugh.net> <http://steve.pugh.net/>

kchayka's Avatar
kchayka
Guest
n/a Posts
July 21st, 2005
01:19 AM
#7

Re: HOW TO: place text on top of a line....
Mel wrote:[color=blue]
> i want
> something like:
>
> ----My Text Goes Here----------------------[/color]

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.

Spartanicus's Avatar
Spartanicus
Guest
n/a Posts
July 21st, 2005
01:19 AM
#8

Re: HOW TO: place text on top of a line....
"Mel" <mel.m.heravi@hp.com> wrote:
[color=blue]
>PS:- i dont have strip.png file either[/color]

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

--
Spartanicus

kchayka's Avatar
kchayka
Guest
n/a Posts
July 21st, 2005
01:19 AM
#9

Re: HOW TO: place text on top of a line....
Spartanicus wrote:[color=blue]
> "Mel" <mel.m.heravi@hp.com> wrote:
>[color=green]
>>PS:- i dont have strip.png file either[/color]
>
> jpeg is a more appropriate format ;-)[/color]

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.

Spartanicus's Avatar
Spartanicus
Guest
n/a Posts
July 21st, 2005
01:19 AM
#10

Re: HOW TO: place text on top of a line....
kchayka <usenet@c-net.us> wrote:
[color=blue][color=green][color=darkred]
>>>PS:- i dont have strip.png file either[/color]
>>
>>I wouldn't recommend that you do one, but if you insist then I'd suggest
>>that jpeg is a more appropriate format ;-)[/color]
>
>Not sure what the smiley is for[/color]

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

--
Spartanicus

Ståle Sæbøe's Avatar
Ståle Sæbøe
Guest
n/a Posts
July 21st, 2005
01:19 AM
#11

Re: HOW TO: place text on top of a line....
kchayka wrote:[color=blue]
> Spartanicus wrote:
>[color=green]
>>"Mel" <mel.m.heravi@hp.com> wrote:
>>
>>[color=darkred]
>>>PS:- i dont have strip.png file either[/color]
>>
>>jpeg is a more appropriate format ;-)[/color]
>
>
> 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.
>[/color]

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"?

 
Not the answer you were looking for? Post your question . . .
182,322 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).

  • Didn't find the answer you were looking for?
    Post Your Question
  • Top Community Contributors