[css-d] Aligning elements in a 'grid'
Hi all, I have a series of elements (marked up as a UL) that I'd like to display in rows. Each LI has the same width, but a variable height. I'd like a solution for the case in which there are a fixed number of 'columns', and when the number of columns is variable; for the latter, each LI is a fixed width, but the UL's width is variable. Floats aren't suitable for this, due to the variable heights involved. I don't want to add a containing element to represent each row, partly because it's not very 'clean', but also because that isn't possible in the 'variable number of columns' case. Inline-blocks are almost perfect for this scenario (even IE issues can be hacked around) but whitespace then becomes an issue: such space between elements has an effect on the layout. Is there either a solution to the inline-block/whitespace problem, or another approach that will achieve the same layout? Example here: http://www.fiveminuteargument.com/layout-testing.html Note that, in this example, I've removed whitespace around elements in the inline-block example in order to demonstrate the desired layout. But I'd like a solution that doesn't require that. Thanks everyone, - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ANN: hcss/0.1
--- On Sat, 11/20/10, Jonas Galvez jonasgal...@gmail.com wrote:
hcss is markup for css. Runs on
Python 2.2+.
https://github.com/galvez/hcss
It's an interesting approach but I think, until it can fully express all CSS
selectors, it's flawed. How, for example, can you use hcss to generate this CSS?
.container p { line-height: 2; }
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Aligning elements in a 'grid'
On 11/26/10 3:18 AM, Bobby Jack wrote: Hi all, I have a series of elements (marked up as a UL) that I'd like to display in rows. Each LI has the same width, but a variable height. I'd like a solution for the case in which there are a fixed number of 'columns', and when the number of columns is variable; for the latter, each LI is a fixed width, but the UL's width is variable. [...] Inline-blocks are almost perfect for this scenario (even IE issues can be hacked around) but whitespace then becomes an issue: such space between elements has an effect on the layout. Is there either a solution to the inline-block/whitespace problem, or another approach that will achieve the same layout? Example here: http://www.fiveminuteargument.com/layout-testing.html Note that, in this example, I've removed whitespace around elements in the inline-block example in order to demonstrate the desired layout. But I'd like a solution that doesn't require that. I don't have a CSS solution, and will likely have my head chopped off for suggesting this-- but I would note that removing all the closing /li tags gives the same result, and validates... :) Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ANN: hcss/0.1
Bobby Jack wrote:
It's an interesting approach but I think, until it can fully express all CSS
selectors, it's flawed.
Well, it is still a 0.1 release, it's work-in-progress! :)
How, for example, can you use hcss to generate this CSS?
.container p { line-height: 2; }
For cases where the child element can appear anywhere within the
parent element (such as the case above), you can do:
div class=container
p {
line-height: 2px;
}
/div
That is one of the convention I've adopted. For everything where the
hierarchy matters, use tags. But if you need to add selectors that are
supposed to be appended without the modifier, you can use straight
CSS.
Another convention HCSS uses:
div class=a
padding: 5px;
.b {
padding: 10px;
}
#c {
font-size: 15px;
}
/div
Results in:
div.a {
padding: 5px;
}
div.b {
padding: 10px;
}
div#c {
font-size: 15px;
}
This is so you can stack small variations of the same element in the
same scope, for convenience's sake.
HCSS still has some big limitations, which are not that annoying (for
me at least) but should be gone in the future releases anyway:
1) Can't use CSS comments (only HTML comments);
2) Can't have one-line selectors (where the { and } start and end at
the same line);
3) Can't have multiple selectors (seperated by comma).
I'm planning on fixing #2 and #3 in the 0.2 release. Unsure if #1 is
worth it, but shouldn't be too hard to implement.
Thanks a million for the feedback!
-- Jonas
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
