padding / leading between text, h1, h2 p etc

[Ant]

Below is an example of a text spacing problem I'm having. But it pertains to A LOT of situations with spacing etc and css

 

Sometimes I have an H2 heading above a P copy block other times its an H1 heading above a p copy block. So the bottom padding I set for my H2 heading IN MY CSS is sometimes too much or too little depending on what size text is underneath it

 

What are my options?

 

Do I have to declare different paddings directly in the html code to overide my CSS definition for that heading when the situation arises?

 

Is it ok to use a standard CSS definition for things but then ALTER them due to specific situations or am I supposed to make separate CSS definitions for each unique occurrence? ( not sure that makes sense )

 

Thanks

Ant

[virtual]

If I understand what you mean correctly, all you need to do is give either the h or p tags a class so that you can better define the padding according to their use. I don't think it is a good idea to declare directly in the html.

[Ant]

That would mean giving them a different class that has different padding for each instance that arises where the space is too little or too much. That would be a lot of different classes for different padding options.

 

Is that ok to do? It seems like a lot of css.

 

for instance:

 

.padding_bottom_5

.padding_bottom_8

.padding_bottom_12

 

 

 

Ant

Edited July 21, 2010 by Ant

[virtual]

I'm afraid I don't quite understand why you need so many different sets of padding.

[Ant]

Maybe a better question is how do I add an extra space after a block of copy without changing the bottom padding of the element which already has the bottom padding defined?

 

I know empty returns are no good. So whats the standard practice for quick spaces?

 

I think my main problem is since I have been plugging in all my content, I realize it's not so easy spacing elements when I have defined spacing already set for each element. So I cant just move things over slightly or up/down, or add leading like I can in print design. Even though i have total control with CSS, it's very slow going when my spacing is set and I havent anticipated the combination of all the elements. Sometimes 2 elements together look different and need different spacing than if they were paired with other elements.

 

Make sense?

 

 

 

Ant

[newseed]

You should be standardizing your elements so it will be consistant throughout otherwise you are going to be overwhelmed with a ton of css classes or ids.

 

For you h tags, you have 6 of them. Use them consistantly. Treat them in the order how you read a book. H1 is the main title of what the page is about which should be used only one time. Google/Yahoo considers this and uses it for SEO purpose.

 

H2 thru H6 can be used often but in do so wisely and in orderly fashion.

 

<h1>Widgets - What Are My Choices></h1>

 

<h2>Introduction</h2>

<p>Overall infor about widgets and color choices</p>

<p>blah blah</p>

<p>blah blah</p>

 

<h2>Color Choices</h2>

<p>Give some details about color choices.</p>

<p>blah blah</p>

<p>blah blah</p>

<h3>Color Green</h3>

<p>Green is good</p>

<h3>Color Red</h3>

<p>Red is good</p>

 

and so on...

 

My suggestion is to start out with a default set of style rules that suits what you are looking for.

 

Below is a good example to start from:

 

/*********** ---------- ::Typography:: ------------------- ***********/
address, h1, h2, h3, h4, h5, h6, li, p, pre {padding: 3px 10px;}
h1 {font-size:20px;}
h2 {font-size:16px;}
h3 {font-size:14px;}
h4 {font-size:12px;}
address, li, p {font-size:12px;}
pre {font-size: 12px;}
ul {margin-left: 25px;}

 

Adjust to suit.

 

Then, if you have a special situation then use a class to define it.

 

Now maybe you are doing something that is a bit unusual that requires diferent paddings/margins for differen h1 tags, if that is the case then you will have to apply css for each one. I think it's silly but then maybe we can better understand what you are trying to achieve by providing a links to the page(s) you are working on.

[Ant]

News, thanks for the explanation.

 

I understand that and will make an attempt to layout my tags that way.

 

Right now I think I have most of the problems solved without adding any exuberant amounts of CSS etc.

 

I think it becomes a problem layout wise when you have not pre-laid out a head/subhead/body copy heirarchy

Especially when there isn't always strict content.

 

It's hard to explain without sitting down with someone and laying everything out and showing them first hand.

 

Its almost as if I need to treat the webdesign like a newspaper (which is the field I work in) There are a set amount of style sheets in quark express that I created to reflect all the styles in use in the paper. body text, headlines, pull quotes, subheads etc...

So every page of the newspaper looks the same when the editors lay things out. HOWEVER, my content in this web design is very minimal and not every page has the same by line, headline, and body copy. Some pages have headlines without subheads, so there is no order, so to speak, because the content is not complete and similar (due to the client not giving me full content)

 

Well that was my best attempt at explaining it.

 

When I am done I will post the site and maybe it will make more sense.

 

 

Thanks

Ant

[PicnicTutorials]

Use margin to space instead. Margin collapses. When it come to text this is usually what you want. If a top element has margin bottom 12 and and the one below it has margin top 12 you get 12 between them not 24. Collaspes to the largest number.

 

id all your body tags and containers. This way you don't need to class different things. Like... #home #main h2 {...} or #contact #main h2 {...}