I'm trying to tweak the html of a page with headings in so that there's a heading, then on the next line without any white space, the next bit of text appears immediately - like this.
Heading
Fascinating text.
rather than what I'm getting which is
Heading
Fascinating text with white space.
It could be that (a) this has been pre-set in the style sheets and I need to go there to amend or (b) a consequence of using the h tags for a heading.
Normally I'd be tempted just to use font size to sort this out as that makes the words look exactly the same but eliminates their heading-ness. However from a usability perspective this is a bit of a no-no as I really want to avoid setting text sizes and h tags are probably better.
It just looks a bit ugly.
If it's a consequence of how html works then there's not much I can do about it and if it's a consequence of the style sheets then I don't know enough about it to fix it and will have a word with the web designer people. But if anyone has any ideas on alternative (but appropriate for usability) tags...
Friday, 30 April 2010
6 comments:
Comment policy: I enthusiastically welcome corrections and I entertain polite disagreement ;) Because of the nature of this blog it attracts a LOT - 5 a day at the moment - of spam comments (I write about spam practices,misleading marketing and unevidenced quackery) and so I'm more likely to post a pasted version of your comment, removing any hyperlinks.
Comments written in ALL CAPS LOCK will be deleted and I won't publish any pro-homeopathy comments, that ship has sailed I'm afraid (it's nonsense).
Subscribe to:
Post Comments (Atom)
Posts
I'm sure it'll be in the CSS with a padding element set to a value that gives the bottom space.
ReplyDeleteThe H tags are nothing special in themselves but are simply a way of applying a uniform style.
Headers tags are 'block' elements. Block elements have certain pre-set parameters. You can use <h4 style='display: inline;'> to avoid those.
ReplyDeleteHTH
Danny
I'm afraid it's in your style sheet. It's not too difficult to edit though if the current style sheet is in a generic format. What you're looking for is something similar to:
ReplyDeleteh1,h2,h3,h4,h5,h6{
margin-bottom: ?px;
padding-bottom: ?px;
}
With the same for top, or with the two combined. You just need to edit them to say:
h1,h2,h3,h4,h5,h6{
margin-bottom: 0px;
padding-bottom: 0px;
}
h1,h2,h3,h4,h5,h6{
margin-top: 0px;
padding-top: 0px;
}
or if they're combined:
h1,h2,h3,h4,h5,h6{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
But this will change it on all pages which may not be what you want..otherwise I think changing the font size e.t.c is the only way forward if it's just for one page, and whilst this can get annoying it's not the end of the world, you can use code such as:
(span style="font-size:medium")
rather than specifying the exact size of font...
Hint: On Firefox at least you can view default stylesheet for HTML by putting resource://gre/res/html.css into the location bar. Other browsers have similar default layout so this is a good guide for general behaviour.
ReplyDeleteIn this case the default CSS shows that for all hx elements, a margin is set. You can either set that to a smaller value in your own CSS. Or you can get more precise and only reduce the margin on one side (here the space below the hx element) with "margin-bottom:0".
Alternatively, you might be after an HTML "definition list". This is where you have a list of titles alternating with short bits of other text. The canonical example is a list of definitions (hence the name) but they can be used for other similar things too. The HTML elements are (I'm omitting the angle brackets around each one in case Blogspot eats or otherwise reformats them) "dl" to contain the whole list, and within this "dt" around each title, and "dd" around each bit of normal text. Unfortunately dt elements are not bold by default so you may want to add "dt {font-weight: bold}" to your CSS.
For more on definition lists see http://www.maxdesign.com.au/articles/definition/
Hx and P tags both carry about 1em of top and bottom margin by default.
ReplyDeleteIn CSS, vertical margins are allowed to collapse, so the margin between them is the larger of the two.
You can try to reduce the margin between the two to zero in specific cases, but you can also set negative margins. So if you know #body h2 is always followed by #body p you could do something like
#body h2 {
margin-bottom: -0.8em;
}
to neatly close up the gap without affecting other P tags, H2 tags and so on.
Soch says "Thank you for the information"
ReplyDelete