468,236 Members | 1,957 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

Text-indent with colour

I'm looking for something like that:
http://www.sonoptikon.de/praxis-mt/test.php

The text should have a certain indent, and from the left border should
come a "marker" which goes over the text for a certain length. Please
don't look at the source text, ;-) it's terrrible, but I just wanted to
show how about it should look like.

Of course in my test case I cannot realize two features:
- the couloured marker should always have same length, this is not
possible if I realize it this way.

- I want that the colour fades out to the right, so that there is the
impression that the text comes out of the colour.

I'm sure that this is possible but I have no idea how. I did not find
anything in my thick, fat book.

Thanks for help

Werner

--
-----------------------------------------------------------
Werner Partner * Tel +49 2366 886606 * Fax: 886608
mailto:ka****@sonoptikon.de * http://www.sonoptikon.de
hören Sie Klassik: http://www.drmk.ch/
Jul 20 '05 #1
4 2286
Werner Partner <ka****@sonoptikon.de> wrote:
I'm looking for something like that:
http://www.sonoptikon.de/praxis-mt/test.php

The text should have a certain indent, and from the left border should
come a "marker" which goes over the text for a certain length. Please
don't look at the source text, ;-) it's terrrible, but I just wanted to
show how about it should look like.

Of course in my test case I cannot realize two features:
- the couloured marker should always have same length, this is not
possible if I realize it this way.

- I want that the colour fades out to the right, so that there is the
impression that the text comes out of the colour.


My first guess was to try this:

p {text-indent: 5em;}
p:first-line {background-image: url(fade.gif); background-repeat:
repeat-y;}

<p>text...</p>

Which "works" in IE but not in Mozilla or Opera. IE is wrong but
unfortunately does exactly what is wanted.

Changing the styles to
p {text-indent: 5em;}
p {background-image: url(fade.gif); background-repeat: no-repeat;}

works across all the browsers I have for testing but you need to make
the background image a fixed height and thus it won't always match the
height of a line of text.

A simple but less pleasant way to do it would be:

p:first-line {background-image: url(fade.gif); background-repeat:
repeat-y;}

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text...</p>

A final way of doing it, which works well across browser, doesn't use
any nasty &nbsp; hacks but which does introduce extra HTML elements
is:

div {position: relative;}
p {text-indent: 5em; position: absolute; top: 0; left: 0; margin-top:
0;}
span {background-image: url(fade.gif); background-repeat: repeat-y;
position: absolute; top: 0; left: 0; height: 1.2em; width: 200px;}

<div>
<span></span>
<p>text...</p>
</div>

If you set a font-size for the text be sure to set it on the div (or
some higher parent element) not on the p, otherwise the fade will not
be one line high.

cheers,
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 20 '05 #2
Werner Partner <ka****@sonoptikon.de> wrote:
I'm looking for something like that:
http://www.sonoptikon.de/praxis-mt/test.php

The text should have a certain indent, and from the left border should
come a "marker" which goes over the text for a certain length. Please
don't look at the source text, ;-) it's terrrible, but I just wanted to
show how about it should look like.

Of course in my test case I cannot realize two features:
- the couloured marker should always have same length, this is not
possible if I realize it this way.

- I want that the colour fades out to the right, so that there is the
impression that the text comes out of the colour.


My first guess was to try this:

p {text-indent: 5em;}
p:first-line {background-image: url(fade.gif); background-repeat:
repeat-y;}

<p>text...</p>

Which "works" in IE but not in Mozilla or Opera. IE is wrong but
unfortunately does exactly what is wanted.

Changing the styles to
p {text-indent: 5em;}
p {background-image: url(fade.gif); background-repeat: no-repeat;}

works across all the browsers I have for testing but you need to make
the background image a fixed height and thus it won't always match the
height of a line of text.

A simple but less pleasant way to do it would be:

p:first-line {background-image: url(fade.gif); background-repeat:
repeat-y;}

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text...</p>

A final way of doing it, which works well across browser, doesn't use
any nasty &nbsp; hacks but which does introduce extra HTML elements
is:

div {position: relative;}
p {text-indent: 5em; position: absolute; top: 0; left: 0; margin-top:
0;}
span {background-image: url(fade.gif); background-repeat: repeat-y;
position: absolute; top: 0; left: 0; height: 1.2em; width: 200px;}

<div>
<span></span>
<p>text...</p>
</div>

If you set a font-size for the text be sure to set it on the div (or
some higher parent element) not on the p, otherwise the fade will not
be one line high.

cheers,
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 20 '05 #3
Steve Pugh schrieb:
Werner Partner <ka****@sonoptikon.de> wrote:

I'm looking for something like that:
http://www.sonoptikon.de/praxis-mt/test.php

The text should have a certain indent, and from the left border should
come a "marker" which goes over the text for a certain length. Please
don't look at the source text, ;-) it's terrrible, but I just wanted to
show how about it should look like.

Of course in my test case I cannot realize two features:
- the couloured marker should always have same length, this is not
possible if I realize it this way.

- I want that the colour fades out to the right, so that there is the
impression that the text comes out of the colour.

My first guess was to try this:

p {text-indent: 5em;}
p:first-line {background-image: url(fade.gif); background-repeat:
repeat-y;}

<p>text...</p>

Which "works" in IE but not in Mozilla or Opera. IE is wrong but
unfortunately does exactly what is wanted.

Changing the styles to
p {text-indent: 5em;}
p {background-image: url(fade.gif); background-repeat: no-repeat;}

works across all the browsers I have for testing but you need to make
the background image a fixed height and thus it won't always match the
height of a line of text.

A simple but less pleasant way to do it would be:

p:first-line {background-image: url(fade.gif); background-repeat:
repeat-y;}

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text...</p>

A final way of doing it, which works well across browser, doesn't use
any nasty &nbsp; hacks but which does introduce extra HTML elements
is:

div {position: relative;}
p {text-indent: 5em; position: absolute; top: 0; left: 0; margin-top:
0;}
span {background-image: url(fade.gif); background-repeat: repeat-y;
position: absolute; top: 0; left: 0; height: 1.2em; width: 200px;}

<div>
<span></span>
<p>text...</p>
</div>

If you set a font-size for the text be sure to set it on the div (or
some higher parent element) not on the p, otherwise the fade will not
be one line high.


Thanks! I see that in any case I have to make a fade.gif.

Werner

--
-----------------------------------------------------------
Werner Partner * Tel +49 2366 886606 * Fax: 886608
mailto:ka****@sonoptikon.de * http://www.sonoptikon.de
hören Sie Klassik: http://www.drmk.ch/
Jul 20 '05 #4
Steve Pugh schrieb:
Werner Partner <ka****@sonoptikon.de> wrote:

I'm looking for something like that:
http://www.sonoptikon.de/praxis-mt/test.php

The text should have a certain indent, and from the left border should
come a "marker" which goes over the text for a certain length. Please
don't look at the source text, ;-) it's terrrible, but I just wanted to
show how about it should look like.

Of course in my test case I cannot realize two features:
- the couloured marker should always have same length, this is not
possible if I realize it this way.

- I want that the colour fades out to the right, so that there is the
impression that the text comes out of the colour.

My first guess was to try this:

p {text-indent: 5em;}
p:first-line {background-image: url(fade.gif); background-repeat:
repeat-y;}

<p>text...</p>

Which "works" in IE but not in Mozilla or Opera. IE is wrong but
unfortunately does exactly what is wanted.

Changing the styles to
p {text-indent: 5em;}
p {background-image: url(fade.gif); background-repeat: no-repeat;}

works across all the browsers I have for testing but you need to make
the background image a fixed height and thus it won't always match the
height of a line of text.

A simple but less pleasant way to do it would be:

p:first-line {background-image: url(fade.gif); background-repeat:
repeat-y;}

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text...</p>

A final way of doing it, which works well across browser, doesn't use
any nasty &nbsp; hacks but which does introduce extra HTML elements
is:

div {position: relative;}
p {text-indent: 5em; position: absolute; top: 0; left: 0; margin-top:
0;}
span {background-image: url(fade.gif); background-repeat: repeat-y;
position: absolute; top: 0; left: 0; height: 1.2em; width: 200px;}

<div>
<span></span>
<p>text...</p>
</div>

If you set a font-size for the text be sure to set it on the div (or
some higher parent element) not on the p, otherwise the fade will not
be one line high.


Thanks! I see that in any case I have to make a fade.gif.

Werner

--
-----------------------------------------------------------
Werner Partner * Tel +49 2366 886606 * Fax: 886608
mailto:ka****@sonoptikon.de * http://www.sonoptikon.de
hören Sie Klassik: http://www.drmk.ch/
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Xerxes | last post: by
2 posts views Thread by Macsicarr | last post: by
2 posts views Thread by Jiri Palecek | last post: by
4 posts views Thread by Arif Çimen | last post: by
3 posts views Thread by jweinberg1975 | last post: by
3 posts views Thread by bbepristis | last post: by
10 posts views Thread by bluemountain | last post: by
reply views Thread by NPC403 | last post: by
reply views Thread by kermitthefrogpy | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.