defining <h1> in style sheet

Forum Moderators: not2easy

Message Too Old, No Replies

defining <h1> in style sheet

paragraph gap

Lobo

5:41 pm on Oct 26, 2005 (gmt 0)

Is there any way to shorten the space between the heading and when the main copy begins?

How can I define this in the stylesheet?

Fotiman

5:52 pm on Oct 26, 2005 (gmt 0)

I'm not sure I understand what you're asking. You can modify the padding or margins on h1.

h1 { padding-bottom: 0; }

Is that what you're trying to do?

Lobo

6:04 pm on Oct 26, 2005 (gmt 0)

no it's not the padding, it is an automatic function of <h1> as a heading it creates a large gap before the main body of the content ..

I want to reduce this gap ...

phantombookman

6:18 pm on Oct 26, 2005 (gmt 0)

Just use standard text if you are worried about the gap

Messing about with H1 can/could be risky
You could end up posting on one of these
"my clean white hat site got dumped for no reason" threads

Fotiman

6:18 pm on Oct 26, 2005 (gmt 0)

I think I'm still not understanding what you're asking (it sounds like padding to me). :) Could you post some code? To me it sounds like you have something like this:

<body>
<h1>Heading</h1>
<p>Main content</p>
</body>

And this is displayed like this:


+----------------------------- body 
�+---------------------------- h1 
�� 
�� Heading 
�� *** Gap *** 
�+---------------------------- 
�+---------------------------- p 
��Main Content 
�+---------------------------- 
+-----------------------------

or perhaps this:


+----------------------------- body 
�+---------------------------- h1 
�� Heading 
�+---------------------------- 
� *** Gap *** 
�+---------------------------- p 
��Main Content 
�+---------------------------- 
+-----------------------------

If it's the first, then that's padding. If it's the second, then that's margin.

h1 { margin: 0; }

Lobo

6:26 pm on Oct 26, 2005 (gmt 0)

Sorry I do apologise if this seems a dumb problem?

at present I have...

HEADING
¦
¦
¦
¦
content content content content
content content content content

what I want is simply ..

HEADING
¦
¦
content content content content
content content content content

it's not padding, I've tried adjusting that ...

<h1> creats an automatic paragraph space which is too much for what I want ...

I would like to use <h1> for SEO recognition ...

the problem does not exist using < span class="h1"> but again not good for SEO ...

the space I'm looking for is equivilent to <br><br> at present it is around <br><br><br><br>

is that clearer?

SuzyUK

6:35 pm on Oct 26, 2005 (gmt 0)

Lobo

I would remove all the <br>'s and set the bottom margin on your <h1> to what suits the size of gap you want

there is a top (default) margin on the <p> too but this will collapse with the bottom <h1> margin also you should be able to control/tweak this gap more easily from one file.

btw, this is not "messing" with the H1.. if you take a look at a page without CSS that has

<h1>heading</h1>
<br><br><br><br>
<p>First paragraph</p>

I think you'll agree that tweaking margins Via CSS and removing <br>'s from the HTML is beneficial in this case ;)

Suzy

Fotiman

6:37 pm on Oct 26, 2005 (gmt 0)

Ok, if it's not padding, then it must be margin. Try adding the following styles:


h1 
{ 
  margin: 0; 
  padding: 0; 
  border: 1px solid red; 
}

This will show you exactly where your h1 ends in relation to your content. I suspect you probably want to modify the bottom margin of h1 until it fits your needs. For example, you could try this:


h1 
{ 
  margin: 6px; 
  padding: 0; 
  border: 1px solid red; 
}

Hope that helps.

Lobo

7:02 pm on Oct 26, 2005 (gmt 0)

voila!

Thanks for your patience it was the bottom margin :)

Collective pats on back!

That was great! leaves me with mixture of doh! and YES :)

g1smd

5:41 pm on Oct 28, 2005 (gmt 0)

I have just "converted" a friends site to CSS.

The original HTML code already mainly used headings, paragraphs, lists, tables, and forms (the major block-level elements), but was stacked out with <font> tags, and a smattering of <br> tags and spacer images.

Removing those and styling the page using an external stylesheet shrunk the filesize by almost 50% on every page. The pages look about the same as they did before (except they are a bit more uniform in appearance now).