[css-d] Any order columns with liquid layout
Hello everybody, I've been playing around a little with negative margins to show two or three columns in different order they are in the HTML code. I've used the information on a few articles and examples on positioniseverything, LayoutGala, A list apart, Meyer's web, etc. In all cases, to calculate the appropriate negative margins, widths need to be fixed, as far as I have understood from the examples and articles. What I'm trying to achieve is to show the navigation (fixed with on em) at the left of the main section (I'd like it to be liquid, with a max- and a min-width on em), while it actually comes after it on the code: bodysection id=main.../section navul.../ul/nav/body Is there any method described somewhere which would allow to do that? Or has somebody tried/succeeded doing something like that, please? Three columns instead of two, of course, would be even better. :-) Thank you in advance. Regards, Ángel P.S.: I'm using HTML5 and CSS3 and, for this design, I don't care about IE (any version) or old browsers. I'm just looking for the best simple way to achieve the described result. -- Angel Martin Alganza Departamento de Genetica, Universidad de Granada Full contact data at http://www.ugr.es/~ama/ PGP Public key at http://www.ugr.es/~ama/ama-pgp-key -- () ASCII Ribbon Campaign - http://www.asciiribbon.org/ /\ Against all HTML e-mail and proprietary attachments Please avoid sending me Word or PowerPoint attachments http://linux.sgms-centre.com/advocacy/no-ms-office.php __ 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] Any order columns with liquid layout
I've been playing around a little with negative margins to show two or three columns in different order they are in the HTML code. I've used the information on a few articles and examples on positioniseverything, LayoutGala, A list apart, Meyer's web, etc. In all cases, to calculate the appropriate negative margins, widths need to be fixed, as far as I have understood from the examples and articles. What I'm trying to achieve is to show the navigation (fixed with on em) at the left of the main section (I'd like it to be liquid, with a max- and a min-width on em), while it actually comes after it on the code: bodysection id=main.../section navul.../ul/nav/body Is there any method described somewhere which would allow to do that? Or has somebody tried/succeeded doing something like that, please? Three columns instead of two, of course, would be even better. :-) I'm not sure I understand what you're trying to achieve. But if you have a navigation bar sized in EMs and want to style it with a min/max-width in EMs it won't work. Because the nav will never reach the min/max values. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Any order columns with liquid layout
Angel Martin Alganza wrote: What I'm trying to achieve is to show the navigation (fixed with on em) at the left of the main section (I'd like it to be liquid, with a max- and a min-width on em), while it actually comes after it on the code: Regards, Ángel It is going to look a little peculiar, as Thierry mentioned. This is 38em min/960px max. Only in a 640px window will the nav block come close to touching block one. Please see: http://chelseacreekstudio.com/ca/cssd/3.html Best, ~d -- desktop 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/
Re: [css-d] Any order columns with liquid layout
Hello Thierry, On Thu, Jun 17, 2010 at 08:33:13AM -0700, Thierry Koblentz wrote: I'm not sure I understand what you're trying to achieve. But if you have a navigation bar sized in EMs and want to style it with a min/max-width in EMs it won't work. Because the nav will never reach the min/max values. I don't. I want a navigation bar with fixed width (let say 10em) which flotes left to the main section (which is the one I want to have min/max widths). The thing is that I want the main section (not the nav bar) to adapt to the window width, but only to a certain max width (I do not want it to be wider than let say 30em, to make it easy to read). Thank you and regards, Ángel -- Angel Martin Alganza Departamento de Genetica, Universidad de Granada Full contact data at http://www.ugr.es/~ama/ PGP Public key at http://www.ugr.es/~ama/ama-pgp-key -- () ASCII Ribbon Campaign - http://www.asciiribbon.org/ /\ Against all HTML e-mail and proprietary attachments Please avoid sending me Word or PowerPoint attachments http://linux.sgms-centre.com/advocacy/no-ms-office.php __ 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] Any order columns with liquid layout
I'm not sure I understand what you're trying to achieve. But if you have a navigation bar sized in EMs and want to style it with a min/max-width in EMs it won't work. Because the nav will never reach the min/max values. I don't. I want a navigation bar with fixed width (let say 10em) which flotes left to the main section (which is the one I want to have min/max widths). The thing is that I want the main section (not the nav bar) to adapt to the window width, but only to a certain max width (I do not want it to be wider than let say 30em, to make it easy to read). I think this should work *exactly* like you want: http://www.ez-css.org/test/dare.html -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Any order columns with liquid layout
Hello David, Thank you for your answer. On Thu, Jun 17, 2010 at 12:05:25PM -0400, David Laakso wrote: This is 38em min/960px max. It's the main content what I'm wondering if it would be possible to make it flexible between let say 20em and 40 em. I would like the other columns to stay fixed (10em) and only main to adapt between the limits. http://chelseacreekstudio.com/ca/cssd/3.html I'm trying to not use percentages, but em, since I don't want the content to spread too much when the window is large. I want it to have certain flexibility, but not through the point were the main content has more than about 40em width (when reading become very uncomfortable). Again thank you, and regards, Ángel -- Angel Martin Alganza Departamento de Genetica, Universidad de Granada Full contact data at http://www.ugr.es/~ama/ PGP Public key at http://www.ugr.es/~ama/ama-pgp-key -- () ASCII Ribbon Campaign - http://www.asciiribbon.org/ /\ Against all HTML e-mail and proprietary attachments Please avoid sending me Word or PowerPoint attachments http://linux.sgms-centre.com/advocacy/no-ms-office.php __ 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] Any order columns with liquid layout
Hello Thierry, On Thu, Jun 17, 2010 at 09:47:55AM -0700, Thierry Koblentz wrote: I think this should work *exactly* like you want: http://www.ez-css.org/test/dare.html Not really. What I want is closer to http://mendel.ugr.es/~ama/es/ but with the main section flexible between limits (mainly max-width). Regards, Ángel -- Angel Martin Alganza Departamento de Genetica, Universidad de Granada Full contact data at http://www.ugr.es/~ama/ PGP Public key at http://www.ugr.es/~ama/ama-pgp-key -- () ASCII Ribbon Campaign - http://www.asciiribbon.org/ /\ Against all HTML e-mail and proprietary attachments Please avoid sending me Word or PowerPoint attachments http://linux.sgms-centre.com/advocacy/no-ms-office.php __ 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] Any order columns with liquid layout
David Laakso wrote: Angel Martin Alganza wrote: I'm trying to not use percentages, but em, since I don't want the content to spread too much when the window is large. I want it to have certain flexibility, but not through the point were the main content has more than about 40em width (when reading become very uncomfortable). Again thank you, and regards, Ángel Use whatever you want. What is comfortable for you may not be so comfortable for your next-door neighbor, her husband, her mother or her father, or her children. Please see: http://chelseacreekstudio.com/ca/cssd/3a.html At 116.5dpi in a window wider than 1200 Georgia yields the center column at around 68 to 80 characters [including spaces] per line. At 116.5dpi in windows 1024 through 640 Georgia yields the center column at somewhat fewer characters [including spaces] per line. Best, ~d -- desktop 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/
Re: [css-d] Any order columns with liquid layout
I think this should work *exactly* like you want: http://www.ez-css.org/test/dare.html Not really. What I want is closer to http://mendel.ugr.es/~ama/es/ Sorry, I thought you mentioned a *two* column layout. but with the main section flexible between limits (mainly max-width). On the page I posted I forgot to remove the EM value, check again and you'll see that that main section is fluid with min/max values. What you want to do is feasible with a nested table, but who wants to do that? :-( -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Any order columns with liquid layout
Thierry, Perhaps the OP was confused because your td id=nav isn't closed properly. You have missed out /td just before /tr My 2 pence contribution here! I don't understand the question though! hth --- On Thu, 17/6/10, Thierry Koblentz n...@tjkdesign.com wrote: I think this should work *exactly* like you want: http://www.ez-css.org/test/dare.html Not really. What I want is closer to http://mendel.ugr.es/~ama/es/ Sorry, I thought you mentioned a *two* column layout. but with the main section flexible between limits (mainly max-width). On the page I posted I forgot to remove the EM value, check again and you'll see that that main section is fluid with min/max values. What you want to do is feasible with a nested table, but who wants to do that? :-( __ 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] Any order columns with liquid layout
Perhaps the OP was confused because your td id=nav isn't closed properly. You have missed out /td just before /tr You're right, thx for the heads up. It's fixed now. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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/
