Spacing paras/list items less crudely

Sorry if I assumed a level of knowledge that isn't there. But you can use the techniques I suggested from within Dreamweaver, and mostly from within its GUI interface, although some things do require dropping into code view. I started out hand-coding back in 1996, and didn't start using Dreamweaver until about a year ago. Now, I love how it saves me the drudgery of hand-coding, but I find it indispensable to know the code so I can drop into code view to bend DW to my will. What version of DW do you use? DW has pretty good support for styles (particularly the latest version), but it does a lot of stuff pretty inefficiently.

When you paste the paragraphs into a table cell, do you then laboriously select each paragraph and apply the .bodyMssg style to each one individually? It looks to me, from a quick look at the page you linked to, that you could apply the .bodyMssg style to the table cells, or perhaps even to the table, and then just paste the text into each cell and move on.

Your bodyMssg style declaration says that elements with the style bodyMssg should have a line-height of 100%, and a margin-bottom of 8px -- but also that they should display inline. Inline elements don't really have margins -- so you've got conflicting declarations in your style, and browsers might well interpret those differently.

Here's your .bodyMssg style:

.bodyMssg {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #000000;
line-height: 100%;
text-align: left;
vertical-align: baseline;
white-space: normal;
border: none;
display: inline;
margin-bottom:8px;
}

I would remove the display:inline altogether from that declaration. And in your code, everywhere you have <p style="margin-bottom:something;"> I'd change every one of those so that it just reads <p>. I'd also remove every instance of <p class="bodyMssg"> and make it just <p>. Then I would make the td's (the table cells) <td class="bodyMssg">. You have class="bodyGold" applied to all the table's content cells, and then that gets overridden everywhere by the bodyMssg class on the individual paragraphs. I don't see anywhere on the page the bodyGold text is actually used.

If you apply class="bodyMssg" to each table cell where you want that style, then you can just paste the copy into the cell as text, and poof, you're done.

I think removing the "display:inline" from your .bodyMssg style declaration will solve your immediate problem. Your "margin-bottom:8px" should give you the paragraph spacing you want, if your paragraphs aren't being displayed inline. So do that first (remove display:inline) and see what you get. Then maybe consider whether you want to optimize things a bit more. Believe me, if you learn a little more about css and its power, you'll be able to get more done in a shorter period of time than trying to do everything the quick-and-dirty way. Quick and dirty isn't always faster. Investing a little time upfront to learn better ways of doing things can save a lot of time in the long run.
 
Thanks, Sonjay. A lot I can work with there.The BodyGold isn't used on that page -- probably a carryover because I tend to dup. pages rather than start afresh, for speed. I repent of that!

I agree with your comment that quick and dirty is not always particularly quick. I think the challenge for me is to look at this code a lot more and clean it up where it needs it -- and as you have commented, it does need it.

class-BodyMssg applied to each cell -- hey, I like that! I could get into this hand coding. Just need to climb a little higher than my lowly place on the learning curve. I accept your advice and I'll do some reading on CSS.

I'll do a bit more work and post how I get on. Many thanks again.

BTW How do you get your Tropical Web Works pages looking so good? I mean, good typo? Do you have a way of embedding better fonts than the 4 or 5 standbys?
 
Greiggy, it sounds like you're "getting it" with regard to applying the class to the parent element (the td) rather than individually (i.e., to every paragraph). When I first realized how much time that alone would save me, it was very eye-opening.

Thanks for your comments on my site. The type is just your basic Verdana, nothing special, but with a css-declared line-height of 150%. I've always been partial to type set with extra leading; I think it's "cleaner" and easier to ready. I'd bet that's what you like about it.
 
Now I'm learning to use the line-height and margin-bottom declarations it will make a huge difference to the typo effect. I think TWW is a great example of how simple elements can be used powerfully to produce a very clean page.

BTW I discovered that margin-bottom has a default which is a minumum of one em. Setting the parameter to -0.5em tightens the paras. This works well on <p> </p>

HOWEVER it has the effect of reducing the space on the <br> tags as well.

Maybe it would be better to set 0.5em extra space on the <br> -- this will not have any effect on the <p> as far as I can tell.

Next step: can I set two CSS styles (they are meant to cascade) e.g. BodyMssg and one that just contains a spacing declaration? Haven't managed to make it work yet.
 
What do you know..... I never tried setting a margin-bottom on <br> before, but it works! However, it didn't appear, in my brief test, that a margin-bottom on paragraphs had any effect on <br> tags. It's interesting that you're seeing an effect, and I wonder why.

Next step: I'm not clear on exactly what you mean as far as setting two CSS styles. You can set all the CSS styles you want, and yes, they cascade. (Cascading order and inheritance can be a real bear to figure out sometimes, if you've got a long complex stylesheet.)

Do you mean you want a bodyMssg style that has no spacing declaration, and another style, containing just a spacing declaration, that you can selectively apply to elements that already have the bodyMssg style? Yes, an element can have two class styles applied to it. You would just do <p class="bodyMssg otherstyleclass"> -- put a space in between the class names, no other punctuation. It's valid according to the specs, but I'm not sure how widely browsers support it.

Or if you applied the bodyMssg style to the table cell, as I suggested earlier, you could apply the other style to the paragraphs individually inside the cell. They'll inherit all the declarations from bodyMssg, and add the style(s) in the second style.
 
Sonjay writes:
"Or if you applied the bodyMssg style to the table cell, as I suggested earlier, you could apply the other style to the paragraphs individually inside the cell. They'll inherit all the declarations from bodyMssg, and add the style(s) in the second style."

Reckon that's the obvious way to go. Putting two class names in hasn't worked well for me but I might not have got the syntax exact.

But a style on the td and a second style on the paras -- that sounds neat.

Above, re the <br>tags, I did see an effect on the page I was working on earlier, but only when I downloaded it again. Haven't been able to replicate it. Might have been wrong about this -- could have been caused by something else.

What I do know is, to close up to less than an em white space between paras, the declaration has to be minus e.g. -0.5em
 
greiggy said:
What I do know is, to close up to less than an em white space between paras, the declaration has to be minus e.g. -0.5em
Click to expand...

I'd be careful with that; a browser that interprets it literally will overlap the paragraphs.

I'd guess that you're getting some default padding showing up. If you scroll way up this page to my first post in this thread, you'll see I mentioned padding. You may want to set padding-bottom:0 in your style declaration as well, and see if that works.

I know, this can be a pain to figure out, but once you have it set up, you'll be able to copy and paste like a whirling dervish to get your new pages done.
 
You must log in or register to reply here.
Back
Top