Hauptinhalt der Seite
Zur Seitenübersicht
Zur rechten Seitenleiste
Main headline <H1>
Secondary Headline <H2>
Tertiary Headline <H3>
Quaternary Headline <H4>
Styled Headline <DIV.GELB> <H2.BLAU>
Styled Headline <DIV.GELB> <H2.GRAU>
Styled Headline <DIV.GELB> <H2.WEISS>
Styled Headline <DIV.GELB> <H2.GELB>
The styled <H2> needs to be embedded in a <DIV.GELB> even if, as in the case of .WEISS, no yellow border is shown, because they have negative margins themselves and it is the outer DIV that sets the margins from surrounding elements. A link.
The above was a standard paragraph. This is another with class .GELB. Two other classes for paragraphs are .SKIP and .BIGSKIP giving a wider top margin to the paragraph so styled. A link.
The gap beneath this paragraph stems not from it but from the <DIV.GELB> following it.
A paragraph inside a <DIV.WEISS PAR> inside a <DIV.GELB>. The <DIV.BLAU> and <DIV.GELB> have identical margins and paddings and are meant to give background and borders to content.
The <DIV.WEISS> has a small bottom margin so two of them following each other get devided by a border in the background colour. The second class .PAR adds a thin 1 pixel top and bottom padding. Without that the top and bottom margin of the paragraph would reach out beyond the DIV.
The <DIV.GRAU> has a negative top margin to sit flush beneath a white one (this is one the things going wrong in buggy IE) and differently styled links.
Of course the classes .GELB and .SKIP can be employed in here too. Both .WEISS and .GRAU have zero side margins.
not nice
The <DIV.WEISS> has zero top and the <DIV.GRAU>has zero bottom margins. The distance above this <DIV.WEISS> was achieved through an empty ( ) <H2.GELB>, which isn't much use for anything else. A <P> </P> would have been a bit too wide. The letters after the only show why it is not a good idea to place any there.
Here you see what happens without the .PAR class. The paragraph sits flush in its <DIV> which itself gets pushed down off the one above – nasty.
A paragraph placed directly into the outher yellow DIV which ends here. The final <H2.GELB> looks better because it gets margined by this paragraph and the bottom padding of the <DIV.GELB> but it still eats into them.
much nicer
All content is centred inside a <DIV> unless other rules apply. Links with images should always be given class <A.IMG> to suppress underlining.
Images as such have margins all around. Placing it inside a <P> makes them visible here and also shows how the paragraph's align overrides the outer one.
Left and right floating images have their margins reset and the left one is given a new right margin. The left margin of the right image is cared for by the raggedness of the paragraph itself, any extra would look too much. The images need to be placed outside their parapgraph – if inside its left and right margins would apply to their outer edges. The Internet Explorer displays the three pixel text jog bug here. Rectifying this would get very complicated and is not worth the hassle.
A paragraph unnecessarily placed inside the <DIV.IMG>. Bad idea – even for a caption, so don't do it.
For images that may get wider than the column width as chosen by the reader there is a special container <DIV.IMG>. If the column gets too small a horizontal slider pops up. This does not work in IE. That DIV also takes away all the image's margins. These images should not be used for links!
- Now for a few lists
- This one has no class.
linebreak and link
- This one is
- <UL.GRAU>
linebreak and link
- This one is
- <UL.HELL>
linebreak and link
- This one is
- <UL.WEISS>
linebreak and link
- And this one is
- <UL.BLAU>
linebreak and link
<UL.WEISS> and <UL.BLAU> have wider outer margins from their surroundings. <UL.WEISS> also has wider spacings between the <LI>s. .WEISS and .BLAU have a white background while the unclassed background is transparent.
I have just added a little script. It won't be seen by anyone with scripts off, i.e. by any sensible and security conscious user, but for the others it looks at the window size and font size and if the window is wide enough to not scroll the navigation column out left and high enough to take all of it, it makes the navigation fixed.
So after having read all of a long page you need not go all the way back up to be able to choose a new one. For at least three independent reasons this does not work in IE.
