If you have a header style and then you want the paragraph below that style to appear right up underneath the header, you can’t use a
tag (what you get with Shift-Return) to separate them. First, a
tag doesn’t separate the tag at all. You end up with this:
<h2>Some Header Text<br />
More header text below it instead of a P.</h2>
What you want is this:
<h2>Some Header Text</h2>
<p>Some paragraph text to follow directly.</p>
See – two separate tags. Freeway conflates the tag name with the way the text looks, sort of a dangerous precedent to set here, so you end up thinking that a header is just a visual style – and it’s not. It’s a separate tag that means something important to the browser and to search engines and screen readers, too.
Think of the header as you would a level of an outline of the page content. At the top, you have an h1, with the single most important topic on the page within it. Directly following that, you have the paragraph or more that describe that header and set the stage for everything else that will follow. The first sub-topic on the page would get the h2 tag, and would also be followed by a paragraph or paragraphs as needed to describe it.
Now here’s the thing. You can have only one h1, but as many h2 or higher tags as are appropriate for the content. Again, think of it like an outline. If there are three sub-topics that are equally important, they can each be h2 tags, and below each of them there can be sub-sub-topics with h3 (and so on) denoting the next lower level of overall importance.
So that’s the semantic meaning of these tags. Now on to the visual styling, which can be entirely separate from the tag in use (h1 - the most important text on the whole page – can be smaller visually than some other text on the same page).
In the Styles palette, create a new h2 style like this: Click the cog menu and choose New Style. In the name field, enter whatever you like to denote it – maybe noFollowingSpace or something like that. In the tag field, choose h2. In the Character segment, use the (+) menu to choose font, color, size, etc. In the Paragraph segment, look for the Space After control in that (+) menu and set it to 0 or some other dimension that suits your header font size.
Now repeat this with a new p style. Give it a name like noTopSpace and select the p tag in the tag field. Then set the Space Before to 0 or another dimension.
Back in your layout, first, make sure you have a full return following the header line. Next, highlight your header text and apply the h2.noFollowingSpace style to it. If you get a warning that the style will be applied to the entire paragraph, okay that. Now repeat these steps for the first paragraph of text following the header.
If your text following the header is a list, like this:
###Header Text
- List Item 1
- List Item 2
- List Item 3
then you will need to make a different style to target that. Either make a noTopSpace style with nothing set in the Tag field, so it can be applied to any text, or create a ul.noTopSpace using ul in the Tag picker, which you can apply to the entire list.
Walter
On Sep 3, 2012, at 3:39 PM, Steve Ainsworth wrote:
Hi clever people,
Please for the love of God… someone please explain what i am doing wrong…
This is the 2nd amazing site i have created… Graphics work great, pics are perfect, general design is great…
But certain elements of html text (usually a list) appear totally wrong to my design.
e.g. If i have 1 space between sentences the output comes out as a continuous line
e.g.2 All the text appears bold (when the original design is only header bold and text beneath normal)
it may / May not be rocket science but if anyone has had a similar experience please help!!
Many Thank
Steve
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options