[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
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
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] general check :: noah learner
On Tue, Jul 14, 2009 at 11:11:53PM -0400, David Laakso wrote: BTW, red on green may be difficult for some users, too. Impossible to distinguish by certain types of color blind people, actually. Ángel __ 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] stand-down
On Wed, Jul 22, 2009 at 10:11:34PM -0400, David McGlone wrote: Awesome, another Linux user here. I assumed just about everyone here were MS users. Why would anybody with a minimum of technical computer skills use any MS software? Cheers, Ángel __ 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] CSS replacement for table layouts
On Wed, Dec 10, 2008 at 05:10:45PM -0700, Geoff Hoffman wrote: Sorry for the long post, but I've been thinking about this for over a year now, and it's been asked many times before without a viable answer that is actually reliably workable in a production environment. The bottom line is, I still have to resort to using tables for grid-based layouts, because I have had no luck making div tags work in certain circumstances. Particularly I am referring to 3x3 grid layouts where I need to have repeating backgrounds in a tic-tac-toe type of a setup: Doesn't something as extremely simple and so fast to code as this example I've just put together meet that? http://mendel.ugr.es/~ama/tmp/3x3.html Regards, Ángel signature.asc Description: Digital signature __ css-discuss [EMAIL PROTECTED] 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] CSS replacement for table layouts
Hi Éric, everybody, On Thu, Dec 11, 2008 at 11:53:49AM +0100, Éric Vesque wrote: Your solution seems to work only in Opera, other browsers don't like ids begining by numbers. It was such a quick thing that I didn't bother to check it out in any other browser than the one I use most of the time while browsing with graphics (I also use Elinks for just text browsing :-). I have rewritten your page with some more stuff in order to have valid html (the div#conteneur has nothing to do with validation). You may see it at http://www.banturle.com/divers/grille3x3.html Thanks for that. But what have you added the div for? ul is already an html element one can style with CSS. Cheers, Ángel signature.asc Description: Digital signature __ css-discuss [EMAIL PROTECTED] 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] CSS replacement for table layouts
On Thu, Dec 11, 2008 at 12:20:10PM -0800, David Hucklesby wrote: Your solution is very close, Angel. Some very minor tweaks got it working this end in all my browsers - As I already said, it was a couple of minutes typing to just show that what the OP claimed he was trying for years (even asking on different fora and so on) was as simple as a floated list. Nice demo. Thanks. Just wanted to show how easy the OP requirements could be meet on a few lines of code. That's all. It's unfortunate, but IE is so prevalent we do need to test with that browser -- even IE 5 is important, as recent IE versions revert to IE 5.5 rendering in quirks mode. If a visitor comes via the Google cached version, they get quirks in any IE version. Yikes! I don't care about IE unless I get paid for it ;-) and so, of course, I was not going to try to get the 3x3 demonstration working on it (I even have to remote log to a W2k3 server to fire up IE, which I only do at the end of all my web developments just to see if the site looks sufficiently good there (of course I usually don't try to get web sites to look identical in web browsers and InfernalEngine, it's enough for me if the site is readable and doesn't look too ugly ---again, unless I get paid to fix it on IE, when I take the time to make an special CSS loaded using condicional comments for the IE). Cheers, Ángel signature.asc Description: Digital signature __ 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/
