CSS/HTML question - how to vary a CSS value easily?
I have done a Google search for 'dynamic CSS' and I can see large scale ways of doing what I want to do but I was wondering if anyone has a simple way of doing it. What I want is a way to insert a variable amount of vertical space between blocks of HTML. The particular case I'm interested in is where I have a <UL> below either a <P>...</P> or below a heading <Hx>. The problem is that the HTML is generated by a Wiki so one doesn't have *direct* access to the generated code and the text above a list is *always* a paragraph, it's not possible to turn it off. The existing CSS setting margins for paragraphs and headings works right for 99% of cases but when you have lists under heading *and* lists under paragraphs it's very difficult to get things right using just the CSS. So, a quick (and dirty?!) approach to fixing the few places where the spacing is too small or too large would be to have the ability to insert an empty block/paragraph where one could set the height/margins easily. A quick, single case, bodge is something like:- <DIV id=unvert><P></P></DIV> With CSS for div#unvert setting appropriate size/margins. However what I'd *really* like to do would be to enable setting of the margins or height of the paragraph from the code somehow, that would allow one to insert more/less space as required rather than needing lots of different CSS ids, one for each different spacing. Any ideas, or completely different approaches, or am I missing something entirely? -- Chris Green
Further, possibly simpler, related question. How can I set things up using CSS such that:- Paragraphs snuggle fairly close up under headings, I want them to be obviously associated with the heading above them, the default setup seems to make them closer to the heading below which seems all wrong to me so I habitually reduce the top margin for paragraphs and increase the bottom margin. Lists have the same spacing below headings that paragraphs do, simple enough by setting the margins the same. ... and this is the difficult bit, I want a list below a paragraph *not* to have a huge vertical space. E.g. (using crude line spacing) I want things something like this:- A Heading A paragraph under the heading Another Heading Another paragraph Yet another heading * List Item * List Item A paragraph * List Item * List Item It's the last bit that's difficult as the paragraph by default has a space under it. It's not easy to add a class/id to the paragraph and anyway that seems to be a rather inelegant solution. What I want is a way to say that I *never* want a big margin when there's a UL under a P. I suppose I could reduce *all* margins and then add blank lines at the end of papragraphs but again that feels like a bodge. -- Chris Green
On 18/07/11 12:39 PM, Chris G wrote:
It's the last bit that's difficult as the paragraph by default has a space under it. It's not easy to add a class/id to the paragraph and anyway that seems to be a rather inelegant solution. What I want is a way to say that I *never* want a big margin when there's a UL under a P.
Hi Chris, Your example rendered in unstyled HTML looks "correct" to my eye, despite the whitespace between the heading/paragraph and list. I wouldn't diverge too far from that layout unless there's a compelling reason. If you want to more obviously delineate sections I suggest containing each in a <div>, using a styled <hr> at the end of each, and/or increasing the left margin of <p>. Of course there are other hacks like setting a negative top margin on <ul> or using Javascript to traverse the DOM.. :o Cheers, Rob. -- Robert Waldie | VP Business Development UK & Europe | Opengear robert.waldie@opengear.com | +44 (0)7766 866159 | http://opengear.com/uk Opengear Ltd. Herschel House, 58 Herschel St, Slough, Berkshire, England, SL1 1PG Registered in England, No. 07413660
On Mon, Jul 18, 2011 at 01:34:31PM +0100, Robert Waldie wrote:
On 18/07/11 12:39 PM, Chris G wrote:
It's the last bit that's difficult as the paragraph by default has a space under it. It's not easy to add a class/id to the paragraph and anyway that seems to be a rather inelegant solution. What I want is a way to say that I *never* want a big margin when there's a UL under a P.
Hi Chris,
Your example rendered in unstyled HTML looks "correct" to my eye, despite the whitespace between the heading/paragraph and list. I wouldn't diverge too far from that layout unless there's a compelling reason.
Yes, my example looks OK but I can't reproduce it in reality using HTML.
If you want to more obviously delineate sections I suggest containing each in a <div>, using a styled <hr> at the end of each, and/or increasing the left margin of <p>.
Of course there are other hacks like setting a negative top margin on <ul> or using Javascript to traverse the DOM.. :o
I've been there! :-) However the difficulty is that I have no easy way to give the <ul> under a paragraph a different margin from a <ul> under a heading - this is the fundamental problem. -- Chris Green
On 18 Jul 14:35, Chris G wrote:
On Mon, Jul 18, 2011 at 01:34:31PM +0100, Robert Waldie wrote:
On 18/07/11 12:39 PM, Chris G wrote:
It's the last bit that's difficult as the paragraph by default has a space under it. It's not easy to add a class/id to the paragraph and anyway that seems to be a rather inelegant solution. What I want is a way to say that I *never* want a big margin when there's a UL under a P.
Hi Chris,
Your example rendered in unstyled HTML looks "correct" to my eye, despite the whitespace between the heading/paragraph and list. I wouldn't diverge too far from that layout unless there's a compelling reason.
Yes, my example looks OK but I can't reproduce it in reality using HTML.
If you want to more obviously delineate sections I suggest containing each in a <div>, using a styled <hr> at the end of each, and/or increasing the left margin of <p>.
Of course there are other hacks like setting a negative top margin on <ul> or using Javascript to traverse the DOM.. :o
I've been there! :-)
However the difficulty is that I have no easy way to give the <ul> under a paragraph a different margin from a <ul> under a heading - this is the fundamental problem.
Well, CSS2 would let you... h1 + ul { margin-top: 0em; } and p + ul { margin-top: 1.5em; } See: http://www.w3.org/TR/CSS2/selector.html And look at: http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors in particular. HTH, HAND. -- Brett Parker
On 18/07/11 12:39, Chris G wrote:
Further, possibly simpler, related question.
How can I set things up using CSS such that:-
Paragraphs snuggle fairly close up under headings, I want them to be obviously associated with the heading above them, the default setup seems to make them closer to the heading below which seems all wrong to me so I habitually reduce the top margin for paragraphs and increase the bottom margin.
Lists have the same spacing below headings that paragraphs do, simple enough by setting the margins the same.
... and this is the difficult bit, I want a list below a paragraph *not* to have a huge vertical space.
When you want to mess around with things like this, it's generally best to first make sure you declare the margins (and padding for some) of all block-level containers yourself, just so that you kow exactly where you are. Then, overruling them in these sorts of cases can be achieved using CSS's "adjacent sibling" rules. If you have CSS like this: h1 { margin: 0; padding: 0; } h1 + p, p { margin: 5px 0 10px 0; padding: 0; } p { margin-top: 10px; padding: 0; } p + ul { margin: 5px 0; padding: 0; } and HTML like this: <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> <ul><li>list 1</li><li>list 1</li></ul> e.g. all paragraphs have a margin of 10px 0 10px 0 (using inheritance), but those adjacent to an h1 have only a top margin of 5px, moving them closer. Then you should get something close to what you're looking for (subject to tweaking numbers, natch). The "+" in "h1 + p" tells the layout engine that that particular style should apply only to adjacent siblings of a particular parent. At this level, all these elements are siblings of "body", but only the first para after an h1 is adjacent to i1, as is only the first list after any paragraph. You can of course leave the default margins and use -ve values instead, but as "adjacent siblingness" is buggy on Safari and non-existent on older version of IE, messing with -ve margins is more likely to be fraught with inconsistencies across browsers. Hope that helps, Simon -- ----------------------------------------------------------- Simon Ransome web: http://nosher.net/ rss: http://nosher.net/images/images.rss
On Mon, Jul 18, 2011 at 02:21:59PM +0100, Simon Ransome wrote:
On 18/07/11 12:39, Chris G wrote:
Further, possibly simpler, related question.
How can I set things up using CSS such that:-
Paragraphs snuggle fairly close up under headings, I want them to be obviously associated with the heading above them, the default setup seems to make them closer to the heading below which seems all wrong to me so I habitually reduce the top margin for paragraphs and increase the bottom margin.
Lists have the same spacing below headings that paragraphs do, simple enough by setting the margins the same.
... and this is the difficult bit, I want a list below a paragraph *not* to have a huge vertical space.
When you want to mess around with things like this, it's generally best to first make sure you declare the margins (and padding for some) of all block-level containers yourself, just so that you kow exactly where you are. Then, overruling them in these sorts of cases can be achieved using CSS's "adjacent sibling" rules.
If you have CSS like this:
h1 { margin: 0; padding: 0; } h1 + p, p { margin: 5px 0 10px 0; padding: 0; } p { margin-top: 10px; padding: 0; } p + ul { margin: 5px 0; padding: 0; }
and HTML like this:
<h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> <ul><li>list 1</li><li>list 1</li></ul>
e.g. all paragraphs have a margin of 10px 0 10px 0 (using inheritance), but those adjacent to an h1 have only a top margin of 5px, moving them closer.
Then you should get something close to what you're looking for (subject to tweaking numbers, natch). The "+" in "h1 + p" tells the layout engine that that particular style should apply only to adjacent siblings of a particular parent. At this level, all these elements are siblings of "body", but only the first para after an h1 is adjacent to i1, as is only the first list after any paragraph.
Brilliant, I didn't know about that '+' syntax in CSS and it's *exactly* what I need. Thank you! :-)
You can of course leave the default margins and use -ve values instead, but as "adjacent siblingness" is buggy on Safari and non-existent on older version of IE, messing with -ve margins is more likely to be fraught with inconsistencies across browsers.
It's virtually only for my own use (Firefox nearly always) so -ve margins might be acceptable. I think it should be possible without such nasties though. Anyway, thank you again, and I'm off to read up about "adjacent sibling" rules in CSS. -- Chris Green
On Mon, Jul 18, 2011 at 02:41:44PM +0100, Chris G wrote:
Then you should get something close to what you're looking for (subject to tweaking numbers, natch). The "+" in "h1 + p" tells the layout engine that that particular style should apply only to adjacent siblings of a particular parent. At this level, all these elements are siblings of "body", but only the first para after an h1 is adjacent to i1, as is only the first list after any paragraph.
Brilliant, I didn't know about that '+' syntax in CSS and it's *exactly* what I need. Thank you! :-)
... and it's done now, really simple too, much neater than any of the horrible bodges I'd previously tried. Plus it works everywhere with no need to do anything particular in the 'source' (i.e. the wiki that generates the HTML). That sibling syntax is something I may well find other uses for too as I often find that indentation for example wants to be different according to what precedes something. Ta! :-) -- Chris Green
I can't quite get my head around this (hopefuly) related question: If I have a table containing rows of cells which may contain checkbox input fields, how can I configure the CSS so that the background colour of the row depends on whether the checkbox is ticked? I guess it's something like tr + td + input[type=checkbox]:checked { background-color: red; } but I haven't quite worked it out yet. Basically I want ticking the checkbox (which is at the far right of a row) to highlight the whole row to make it obvious which row has been selected. It sounds like the right combination of siblings and selectors would do this. -- Mark Rogers // More Solutions Ltd (Peterborough Office) // 0844 251 1450 Registered in England (0456 0902) @ 13 Clarke Rd, Milton Keynes, MK1 1LG
On 19 Jul 14:48, Mark Rogers wrote:
I can't quite get my head around this (hopefuly) related question:
If I have a table containing rows of cells which may contain checkbox input fields, how can I configure the CSS so that the background colour of the row depends on whether the checkbox is ticked?
I guess it's something like tr + td + input[type=checkbox]:checked { background-color: red; } but I haven't quite worked it out yet.
Basically I want ticking the checkbox (which is at the far right of a row) to highlight the whole row to make it obvious which row has been selected. It sounds like the right combination of siblings and selectors would do this.
There is no pseudo element called :checked, as far as I'm aware you can't get the state of a checkbox directly in css. Also, that would be tr > td > input[type=checkbox]. You're going to be stuck with some simple javascript for this I believe. Cheers, -- Brett Parker
On 19 July 2011 15:09, Brett Parker <iDunno@sommitrealweird.co.uk> wrote:
You're going to be stuck with some simple javascript for this I believe.
Fair enough - shame though! -- Mark Rogers // More Solutions Ltd (Peterborough Office) // 0844 251 1450 Registered in England (0456 0902) @ 13 Clarke Rd, Milton Keynes, MK1 1LG
participants (5)
-
Brett Parker -
Chris G -
Mark Rogers -
Robert Waldie -
Simon Ransome