Re: [css-d] [+] Re: OK to insert block-level tag inside div?
On Nov 18, 2010, at 5:03 PM, Thierry Koblentz wrote: but why, then, after I add a margin-top: 8px to my code, does that paragraph go wider? By wider, I mean that it widens to the width of the parent div which contains all that stuff...the small head, the big head and date the dotted line and the blurb paragraph, now enclosed by my p class=dotted The top margin should not create a issue like that. Did you check that you did not make a typo? Did you validate your code? Sometimes that helps. Or post a URL, that helps too ;) Yes, I have the code up there...just posted it a few moments ago. Thank you for looking at it, if you have chance... it can be seen at: http://thinkplan.org/workshop/pix/working.html I don't know why that image is stretched vertically; it's well- behaved on my local drive. Cheers! John __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Re: OK to insert block-level tag inside div?
I don't know why that image is stretched vertically; it's well- behaved on my local drive. Because of height: 100%. If you change that to height: auto; or take out the height property completely, it behaves just fine. But height 100% means Make this image 100% of the height of its parent container (div.portfolio). ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Re: OK to insert block-level tag inside div?
Why does adding 8px to my margin top make that paragraph go as wide
as the container? why wouldn't it make the text respect the existing
space all the way around?
Here's the class in question:
.dotted {
border-top: 1px dotted #000;
padding: 8px 0 0 0;
margin: 8px 0 0 0; this margin value makes the paragraph go too
wide!
}
and the page itself may be seen here:
http://thinkplan.org/workshop/pix/working.html
many thanks!
John
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Re: OK to insert block-level tag inside div?
On Mon, Nov 22, 2010 at 5:02 PM, John j...@coffeeonmars.com wrote:
Why does adding 8px to my margin top make that paragraph go as wide as the
container? why wouldn't it make the text respect the existing space all the
way around?
Here's the class in question:
.dotted {
border-top: 1px dotted #000;
padding: 8px 0 0 0;
margin: 8px 0 0 0; this margin value makes the paragraph go too
wide!
}
and the page itself may be seen here:
http://thinkplan.org/workshop/pix/working.html
many thanks!
John
It's going wider because you have margin: 10px; set on plain old p.
When you change the .dotted p to margin: 8px 0 0 0; you are turning
off the 10px margin on left, right, and bottom that was being inherited from
that previous style.
-T
--
-
tim.arn...@gmail.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Re: OK to insert block-level tag inside div?
On 11/22/10 5:02 PM, John wrote: Why does adding 8px to my margin top make that paragraph go as wide as the container? why wouldn't it make the text respect the existing space all the way around? Tim answered your question. Fwiw: Keep it simple. Keep it valid. Avoid break tags. Hold +2 font-scaling without breaking the layout. Smile more. Frown less. Please see: http://chelseacreekstudio.com/ca/cssd/j.htm Dr Lakra Oaxaca, Mexico PS Even if you spell it correctly delete the name at the top of your style sheet or the deal for the free tat is off. -- :: desktop and mobile :: http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Re: OK to insert block-level tag inside div?
OK..Here's a link to a graphic showing the dotted line and its
position which I'm after:
http://thinkplan.org/workshop/pix/dottedline.jpg
Try this:
.myParagraph {
margin-top:10px;
padding-top:10px;
border-top:1px dotted #333;
}
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Re: OK to insert block-level tag inside div?
On Nov 18, 2010, at 4:04 PM, Thierry Koblentz wrote:
OK..Here's a link to a graphic showing the dotted line and its
position which I'm after:
http://thinkplan.org/workshop/pix/dottedline.jpg
Try this:
.myParagraph {
margin-top:10px;
padding-top:10px;
border-top:1px dotted #333;
}
thanks, Thierry;
looks similar to something I fiddled with just before your email
arrived:
.dotted {
border-top: 1px dotted #000;
padding: 8px 0 0 0;
}
Now, in yours, why margin-top AND padding-top of 10px? Isn't padding-
top: 10px; enough by itself?
John
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Re: OK to insert block-level tag inside div?
OK..Here's a link to a graphic showing the dotted line and its
position which I'm after:
http://thinkplan.org/workshop/pix/dottedline.jpg
Try this:
.myParagraph {
margin-top:10px;
padding-top:10px;
border-top:1px dotted #333;
}
thanks, Thierry;
looks similar to something I fiddled with just before your email
arrived:
.dotted {
border-top: 1px dotted #000;
padding: 8px 0 0 0;
}
Now, in yours, why margin-top AND padding-top of 10px? Isn't padding-
top: 10px; enough by itself?
The padding is what creates the gap below the border, the margin is what
creates the gap above the border.
You may have the space above the border already created by the bottom margin
of the previous sibling, but in any case, that should not matter because of
*collapsing margins*, hence that value will not change anything if the gap
already exists (via margin). Because these two margins will collapse.
It would be different if that gap was the result of bottom padding on the
previous sibling.
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Re: OK to insert block-level tag inside div?
On Nov 18, 2010, at 4:21 PM, Thierry Koblentz wrote: The padding is what creates the gap below the border, the margin is what creates the gap above the border. You may have the space above the border already created by the bottom margin of the previous sibling, but in any case, that should not matter because of *collapsing margins*, hence that value will not change anything if the gap already exists (via margin). Because these two margins will collapse. It would be different if that gap was the result of bottom padding on the previous sibling. Zounds! I believe that I understand that entire paragraph! but why, then, after I add a margin-top: 8px to my code, does that paragraph go wider? By wider, I mean that it widens to the width of the parent div which contains all that stuff...the small head, the big head and date the dotted line and the blurb paragraph, now enclosed by my p class=dotted ? John __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Re: OK to insert block-level tag inside div?
Zounds! I believe that I understand that entire paragraph! but why, then, after I add a margin-top: 8px to my code, does that paragraph go wider? By wider, I mean that it widens to the width of the parent div which contains all that stuff...the small head, the big head and date the dotted line and the blurb paragraph, now enclosed by my p class=dotted The top margin should not create a issue like that. Did you check that you did not make a typo? Did you validate your code? Sometimes that helps. Or post a URL, that helps too ;) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
