Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
|
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old September 1st, 2004, 01:36 PM
Friend of Wrox
 
Join Date: Mar 2004
Posts: 357
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via Yahoo to anshul
Default line-height -n- background-color with <DIV> block

Suppose we are writing a block of text and we want some color behind it, different from document background color;
we can use <DIV style="display:inline; background-color:#ffffff;">

Note than we want color behind text only, hence "display:inline;"
Now for further betterment of reading, i write "line-height:24px;"

How to control the color between the text-lines now ?
__________________
`~@#\^%&*/\.<.\/-|+|_!:;..=?>
PHP, SEO | anshul shrivastava | mediasworks.org | FB
 
Old September 1st, 2004, 03:52 PM
richard.york's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

<span> is better suited for the purpose you describe, it's a generic inline-level element. As for how to control the background between and around each line, that's the background of the containing block.

Regards,
Rich

--
[http://www.smilingsouls.net]
[http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail
 
Old September 3rd, 2004, 01:33 PM
Friend of Wrox
 
Join Date: Mar 2004
Posts: 357
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via Yahoo to anshul
Default

i hope using <DIV> or <SPAN> is not an issue.
both are merely style containers, one inline and other block and this can be reversed using 'display' property.
what is striking is 'line-height' ..

actually i m using nested DIVs; inline <DIV> in block <DIV>

i said already background-color should go ONLY ONLY where text go; by text block i meant a typical text paragraph of a printed book.
( paragraph start at some left-intentation and last word of text ends usually without touching right-most margin of paragraph block )

background-color of outer <DIV> block should be document color.

background-color of inner inline <DIV> or <SPAN> color is harmed by 'line-height' property.
the background-color of space between text-lines is the color of outer block <DIV> or document.
even repeating a tiny image behind text is no solution.
( no problem when 'line-height' is not mentioned )
i guess there is no solution for above problem.
true ?
 
Old September 3rd, 2004, 06:29 PM
richard.york's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

Quote:
quote:Originally posted by anshul
 i hope using <DIV> or <SPAN> is not an issue.
both are merely style containers, one inline and other block and this can be reversed using 'display' property.
While true, I was only suggesting it makes more sense to use the element for the purpose it is intended for and resort to CSS trickery as a last resort.


Quote:
quote:Originally posted by anshul


i said already background-color should go ONLY ONLY where text go; by text block i meant a typical text paragraph of a printed book.
( paragraph start at some left-intentation and last word of text ends usually without touching right-most margin of paragraph block )
I'm having trouble following along with what it is that you are trying to accomplish. Can you post a link to a sceen shot or image of the behavior that you're trying to describe? (e.g. something composed with a graphical editor) That would make it much easier to point you in the direction of the solution.

Regards,
Rich

--
[http://www.smilingsouls.net]
[http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail
 
Old September 4th, 2004, 01:04 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

I think anshul means this effect.


p { color: black; background: red; line-height: 2 }
p span {color: inherit; background: yellow }

<p>
<span>....</span></p>

(o<
//\ =^..^=
 
Old September 4th, 2004, 01:10 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

Quote:
quote:Originally posted by anshul
actually i m using nested DIVs; inline <DIV> in block <DIV>
Why? Are you trying to strip every ounce of meaning from your markup?

(o<
//\ =^..^=
 
Old September 5th, 2004, 01:27 PM
Friend of Wrox
 
Join Date: Mar 2004
Posts: 357
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via Yahoo to anshul
Default

Quote:
quote:Can you post a link to a sceen shot or image of the behavior that you're trying to describe? (e.g. something composed with a graphical editor) That would make it much easier to point you in the direction of the solution.
please http://www.mediasworks.com/literature/insanesl.htm

 
Quote:
quote:I think anshul means this effect.
Quote:
p { color: black; background: red; line-height: 2 }
p span {color: inherit; background: yellow }
<p>
<span>....</span></p>
there is nothing special or new in above.
Quote:
quote:Why? Are you trying to strip every ounce of meaning from your markup?
most times i myself avoid nesting, but few times, this is obvious and far straight-forward.
nesting DIVs, SPANs, TABLESs go ..no html error though
even if someone turn this page back-leaf, few nested DIVs are not hard2c
Quote:
quote:the background-color of space between text-lines is the color of outer block <DIV> or document.
in my last post, i already arrived at html can't help for that.
please see url urself 2arrive at whatz happening there ?
 
Old September 5th, 2004, 01:44 PM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

Quote:
quote:http://www.mediasworks.com/literature/insanesl.htm
That's the effect the snip I posted above creates. No?

(o<
//\ =^..^=
 
Old September 5th, 2004, 01:54 PM
Friend of Wrox
 
Join Date: Mar 2004
Posts: 357
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via Yahoo to anshul
Default

not at all, i wanted2improve that page
still have problem

the color between text-lines !
 
Old September 5th, 2004, 01:59 PM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

But change it to a color you want! What's the problem?

(o<
//\ =^..^=





Similar Threads
Thread Thread Starter Forum Replies Last Post
minimise a <div> (adjust height) crmpicco Javascript How-To 1 September 21st, 2005 01:39 AM
background image for <div> anshul CSS Cascading Style Sheets 4 May 16th, 2005 11:00 AM
'Auto' height of <DIV>s anshul HTML Code Clinic 3 April 28th, 2005 09:13 AM
<style> tags in a <body> vs. <div> bcat BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 1 March 27th, 2005 08:50 AM
Change height of div element if < window height JoelJunstrom Javascript How-To 1 October 10th, 2003 09:14 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.