Re: [css-d] float: left; height: 100%?
On Wed, Jan 06, 2010 at 11:57:46AM -0800, Thierry Koblentz wrote: Looks like a proper use for a table to me - with a background colour on the table cells. HTH Could this also be done with a definition list and then styling the dt tag? We don't know much about the data but I agree, a DL could be another way to go (definitely not a table). When using a DL it would be the DDs that would need background styling, not the DTs though (see David's suggestion). Thanks, I just tried following your suggestion and switching to a dl, but have the same problem that the dt background doesn't extend the full height of the dd, http://www.sfu.ca/~jdbates/tmp/css/201001060/ The app I'm working on currently uses a table, e.g. http://ica-atom.org/demo/informationobject/show/isad/288 - I'm trying to switch to markup which is more ammenable to restyling with CSS, while still supporting the old look Is the old look acheivable with CSS, without using a table? __ 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] float: left; height: 100%?
On Wed, Jan 06, 2010 at 11:57:46AM -0800, Thierry Koblentz wrote: Looks like a proper use for a table to me - with a background colour on the table cells. HTH Could this also be done with a definition list and then styling the dt tag? We don't know much about the data but I agree, a DL could be another way to go (definitely not a table). When using a DL it would be the DDs that would need background styling, not the DTs though (see David's suggestion). Thanks, I just tried following your suggestion and switching to a dl, but have the same problem that the dt background doesn't extend the full height of the dd, That's because you're styling the wrong elements :) The elements you apply a background to are the only ones that do not need to be styled (the DTs), Use the DLs for the grey background and the DDs for the white one. Thanks a lot Thierry, I think this would've worked I ended up using the technique from, http://positioniseverything.net/articles/onetruelayout/equalheight Like so - http://www.sfu.ca/~jdbates/tmp/css/201001220/ AFAICT, the only difference between this technique and your suggestion is that with this technique, the dds can can have transparent background Thanks again! __ 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] float: left; height: 100%?
Jack Bates wrote: How can I style the following, div class=field h3Name/h3 div Value /div /div - so it displays with the name on the left, the value on the right, and a grey background behind the name? http://www.sfu.ca/~jdbates/tmp/css/201001050/screenshot.png Looks like a proper use for a table to me - with a background colour on the table cells. HTH Peter www.peredur.net __ 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] float: left; height: 100%?
Looks like a proper use for a table to me - with a background colour on the table cells. HTH Could this also be done with a definition list and then styling the dt tag? __ 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] float: left; height: 100%?
Looks like a proper use for a table to me - with a background colour on the table cells. HTH Could this also be done with a definition list and then styling the dt tag? We don't know much about the data but I agree, a DL could be another way to go (definitely not a table). When using a DL it would be the DDs that would need background styling, not the DTs though (see David's suggestion). -- Regards, Thierry | www.tjkdesign.com __ 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] float: left; height: 100%?
J.M. Knowles wrote: Could this also be done with a definition list and then styling the dt tag? Yeah. I had a look at that. Semantically it would be best: but I couldn't see a way of doing it offhand. Then, whilst I was playing, it occurred to me that it was strange that the OP gave the actual HTML like that. Then it occurred to me that this looks a bit, or a lot actually, like a homework question. That annoyed me. So I stopped looking. I don't mind people asking for help with homework, but I think they should be up-front about it and expect to get only pointers to solutions. If my suspicions are correct, this is tantamount to getting someone to do their homework for them, by deception. That's the only reason I can think of for the actual HTML being important. Apologies to the OP if the HTML is actually not important and is being used for some completely different purpose. Cheers Peter __ 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] float: left; height: 100%?
On 06.01.2010 06:03, Jack Bates wrote:
How can I style the following,
div class=field
h3Name/h3
div
Value
/div
/div
- so it displays with the name on the left, the value on the right, and
a grey background behind the name?
http://www.sfu.ca/~jdbates/tmp/css/201001050/screenshot.png
I almost have it working, http://www.sfu.ca/~jdbates/tmp/css/201001050/
- but the grey background isn't as tall as a long value, as it is in the
above screenshot : (
How can I get the background to extend the full height of the value (in
case the value is taller than the name)?
Is there a better way to do this?
.field h3
{
width:50px;
float: left;
}
.field div {
width:250px;
float: left;
}
--
Boray Eris
pidizayn.com http://www.pidizayn.com/
__
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] float: left; height: 100%?
On Wed, Jan 06, 2010 at 11:57:46AM -0800, Thierry Koblentz wrote: Looks like a proper use for a table to me - with a background colour on the table cells. HTH Could this also be done with a definition list and then styling the dt tag? We don't know much about the data but I agree, a DL could be another way to go (definitely not a table). When using a DL it would be the DDs that would need background styling, not the DTs though (see David's suggestion). Thanks, I just tried following your suggestion and switching to a dl, but have the same problem that the dt background doesn't extend the full height of the dd, http://www.sfu.ca/~jdbates/tmp/css/201001060/ The app I'm working on currently uses a table, e.g. http://ica-atom.org/demo/informationobject/show/isad/288 - I'm trying to switch to markup which is more ammenable to restyling with CSS, while still supporting the old look Is the old look acheivable with CSS, without using a table? __ 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] float: left; height: 100%?
On Wed, Jan 06, 2010 at 11:57:46AM -0800, Thierry Koblentz wrote: Looks like a proper use for a table to me - with a background colour on the table cells. HTH Could this also be done with a definition list and then styling the dt tag? We don't know much about the data but I agree, a DL could be another way to go (definitely not a table). When using a DL it would be the DDs that would need background styling, not the DTs though (see David's suggestion). Thanks, I just tried following your suggestion and switching to a dl, but have the same problem that the dt background doesn't extend the full height of the dd, That's because you're styling the wrong elements :) The elements you apply a background to are the only ones that do not need to be styled (the DTs), Use the DLs for the grey background and the DDs for the white one. -- Regards, Thierry | www.tjkdesign.com __ 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] float: left; height: 100%?
Jack Bates wrote:
How can I style the following,
div class=field
h3Name/h3
div
Value
/div
/div
- so it displays with the name on the left, the value on the right, and
a grey background behind the name?
Dunno.
Have you tried:
.field
{
border-bottom: .1px solid;
background: #aaa; -- :: add rule
}
.field div {background: #fff;} --- :: add rule set to style sheet
Best,
~d
--
http://chelseacreekstudio.com/
__
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/
