By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,785 Members | 1,072 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,785 IT Pros & Developers. It's quick & easy.

Text-indent with colour

P: n/a
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
Share this Question
Share on Google+
4 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.