[css-d] OK to insert block-level tag inside div?
Hello; This is related to my question yesterday about proper use of div tags... I now get that an ID must be used only once on a page. Within div tags (from code generously provided here) I've been able to format specific bits of content, like text, using classes and span tags. But I'd like to ad a dotted line between to paragraphs, and that seems to me to be a block-level tag required to do it. Is this correct? Can I throw in a br and apply a border-bottom to that or is that considered bad coding? thank you! 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] [+] OK to insert block-level tag inside div?
This is related to my question yesterday about proper use of div tags... I now get that an ID must be used only once on a page. Within div tags (from code generously provided here) I've been able to format specific bits of content, like text, using classes and span tags. But I'd like to ad a dotted line between to paragraphs, and that seems to me to be a block-level tag required to do it. Is this correct? Yes, but paragraphs are block-level elements, so simply give a class to one of the paragraphs to create that border. One thing you'll notice though, is that once you apply a border to a paragraph its margin will not collapse with the margin of its sibling (see margin collapsing). Can I throw in a br and apply a border-bottom to that or is that considered bad coding? Bad coding, yes :) -- 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] OK to insert block-level tag inside div?
On Thu, Nov 18, 2010 at 2:34 PM, John j...@coffeeonmars.com wrote: I now get that an ID must be used only once on a page. Within div tags (from code generously provided here) I've been able to format specific bits of content, like text, using classes and span tags. But I'd like to ad a dotted line between to paragraphs, and that seems to me to be a block-level tag required to do it. Is this correct? Can I throw in a br and apply a border-bottom to that or is that considered bad coding? A paragraph *is* a block-level element. Why not throw in some padding-bottom and apply a dotted border-bottom to that? You can add a class of 'last' to the last paragraph to override the border. Beth __ 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] OK to insert block-level tag inside div?
On 18.11.2010 22:34, John wrote: Hello; This is related to my question yesterday about proper use of div tags... I now get that an ID must be used only once on a page. Within div tags (from code generously provided here) I've been able to format specific bits of content, like text, using classes and span tags. But I'd like to ad a dotted line between to paragraphs, and that seems to me to be a block-level tag required to do it. Is this correct? Paragraphs and headlines are block elements, and, yes, of course you can put any type of block-level elements inside divs. No need to add extra markup for adding decorative lines and separators though. Add a little extra padding at the bottom or top of one of the paragraphs you want to split a bit, and put a dotted border-line on that paragraph. Adjust padding/margin on those paragraphs for a nice line-up. Another method is to add a background to the expanded top or bottom padding on paragraphs. I haven't documented it anywhere (AICR), but this page... http://www.gunlaug.no/contents/molly_1_25.html ...shows pretty clearly how I have added a cat and a ---***--- line to selected paragraphs using a dedicated class, to create spaces between paragraphs. No extra elements in markup, only a class and a few lines of reusable CSS in the stylesheet. Can I throw in a br and apply a border-bottom to that or is that considered bad coding? A br won't take such styling. br is line-break and nothing else. You are probably thinking about hr - horizontal ruler... http://www.gunlaug.no/contents/wd_chaos_30.html ...and sure, you can use hr but it isn't always easy to make it look right or the same across browser-land. br (line-break) is best reserved for breaking lines within paragraphs, and only where it makes sense for the text and doesn't start looking odd if someone apply font-resizing. regards Georg __ 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] [+] OK to insert block-level tag inside div?
Yes, but paragraphs are block-level elements, so simply give a class to one of the paragraphs to create that border. One thing you'll notice though, is that once you apply a border to a paragraph its margin will not collapse with the margin of its sibling (see margin collapsing). Before somebody points this out: This won't do anything regarding margins collapsing as the border would not come in between the two :-) -- 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] OK to insert block-level tag inside div?
On 11/18/10 4:34 PM, John wrote: But I'd like to ad a dotted line between to paragraphs... Others have answered your question. However, if you are still having difficulty, it always a good idea to put the page in question on a public server and provide a clickable link to it in your post to the list. Otherwise, we all get to play an endless guessing game as to what you are after, rather than providing what may well be a very simple definitive answer. John Best, ~d -- :: 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] 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 thanks! John On Nov 18, 2010, at 2:42 PM, David Laakso wrote: On 11/18/10 4:34 PM, John wrote: But I'd like to ad a dotted line between to paragraphs... Others have answered your question. However, if you are still having difficulty, it always a good idea to put the page in question on a public server and provide a clickable link to it in your post to the list. Otherwise, we all get to play an endless guessing game as to what you are after, rather than providing what may well be a very simple definitive answer. John Best, ~d -- :: 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/ __ 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] OK to insert block-level tag inside div?
One thing I tried here was to make a new p class:
.dotted {
border-top: 1px dotted #000;
padding: 8px 0 0 0;
}
that top padding value of 8px gets the line where I want it
vertically...
the p portion I don't want to have with the dotted line, I just
closed that p tag after that part, and the description I want to have
the dotted line I handled like this:
p class=dotted
descriptive blurb paragraph...
/p
^^^ Is this a legitimate way of handling it...good coding?
John
On Nov 18, 2010, at 2:51 PM, David Laakso wrote:
On 11/18/10 5:44 PM, John wrote:
On Nov 18, 2010, at 2:42 PM, David Laakso wrote:
Others have answered your question. However, if you are still
having difficulty, it always a good idea to put the page in
question on a public server and provide a clickable link to it in
your post to the list. Otherwise, we all
get to play an endless guessing game as to what you are after,
rather than providing what may well be a very simple definitive
answer.
right you are, David and I'm kinda smackin' my forehead I didn't
just throw that up there with a graphic showing what I'm after.
I'm going to do that now, then post the links as soon as it's up
there.
thanks for hanging in there with me!
John
-- off-list --
A graphic image will do. Putting the actual html/css file[s] up is
better.
~d
--
:: 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] OK to insert block-level tag inside div?
On 19/11/2010 10:15 AM, John 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
thanks!
John
If this is what you have, then theoretically, no class is need. If the
text that is bold is a heading, then you could do this.
p:first-child {border-top: border-top:1px dotted #333;}
If the text that is bold are paragraphs, then you could something like this.
p+p+p {border-top: border-top:1px dotted #333;}
The only browser that will not support this is IE6-.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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/
