Re: [css-d] Size calculations
2009/3/16 Gunlaug Sørtun gunla...@c2i.net: Ib Jensen wrote: Think I got the above about right. Hard to compress a thousand choices into a mail. Thank you very much for the explanation. I must invite my self for a long weekend, for a little chit-chat about developing sites. ;-) -- Regards / Mhv. Ib K. jensen - http://ikjensen.dk __ 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/
[css-d] Size calculations
Hi. I'm looking for some kind of formular to calculate sizes. This is a hypotetical question: I want a 2 column design with header and footer, a left nav- and info-column, and a right content-column. Centered. Lets say the size are: Header and footer : 90% These two columns together: 80% Left column: 20-25% Content column : 80-75% How do I change these measurements to: em -- Regards / Mhv. Ib K. jensen - http://ikjensen.dk __ 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] Size calculations
Ib Jensen wrote: How do I change these measurements to: em What are those hypothetical '%' you want to convert to hypothetical 'em', relative to? That is: what is your hypothetical 100% starting-width? You can't convert anything to 'em' without having an absolute starting point. regards Georg -- http://www.gunlaug.no __ 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] Size calculations
Ib Jensen wrote: I want a 2 column design with header and footer, a left nav- and info-column, and a right content-column. Centered. Header and footer : 90% These two columns together: 80% Left column: 20-25% Content column : 80-75% How do I change these measurements to: em Use ems...and a calculator. Relying on the browser to calculate the percentage is sketchy at best. You probably want something like this: ~~~ !DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd' html head title%TITLE%/title meta http-equiv='content-type' content='text/html;charset=utf-8' style type='text/css' #head-frame,#main-frame,#menu-frame,#foot-frame { padding: 1px 0; /* Fix margin collapsing */ } #page-shell { margin: 0 auto; width: 80em; } #head-frame, #foot-frame { background: #dedede; margin: 0 auto; width: 72em; /* 90% of 80em */ } #page-frame { background: #999; margin: 0 auto; width: 64em; /* 80% of 80em */ } #page-panel { background: #ccc; margin-left: 16em; /* Same as #menu-frame width */ } #main-frame { float: right; width: 48em; /* 75% of 64em */ } #menu-frame { display: inline; /* Fix IE double-margin bug */ float: left; margin-left: -16em; /* Width x -1 */ width: 16em; /* 25% of 64em */ } /* FLOAT BEHAVIOR SWITCH FOR STANDARDS COMPLIANT BROWSERS */ #page-panel:after { clear: both; content: .; display: block; font-size: 1px; height: 0; line-height: 0; overflow:hidden; visibility: hidden; } /* FLOAT BEHAVIOR SWITCH FOR IE */ #page-panel { display: inline-block; } #page-panel { display: block; position:relative; } /style /head body id='www-css_sig-tld' div id='page-shell' div id='head-frame' p%HEAD%/p /div div id='page-frame' div id='page-panel' div id='main-frame' p%MAIN%/p p%MAIN%/p p%MAIN%/p /div div id='menu-frame' p%MENU%/p p%MENU%/p p%MENU%/p p%MENU%/p p%MENU%/p /div /div /div div id='foot-frame' p%FOOT%/p /div /div /body /html ~~~ Hope it helps. --Bill -- !-- ! Bill Brown macnim...@gmail.com ! Web Developologist, WebDevelopedia.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] Size calculations
Bill Brown wrote: /* FLOAT BEHAVIOR SWITCH FOR IE */ #page-panel { display: inline-block; } #page-panel { display: block; position:relative; } I lied: remove the position:relative from that last block. That's an artifact from another template. Sorry. -- !-- ! Bill Brown macnim...@gmail.com ! Web Developologist, WebDevelopedia.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] Size calculations
Ib Jensen wrote: The template should fill a total of 90% of the viewport / screen. I don't know if this clears something. Not really. My viewport / screen is 3840pixel wide on one machine, but it is 1280pixel wide on another machine and 1440pixel wide on yet another. No problem filling all these correctly with one set of percentages - although it will look strangely wide on some viewports / screens. However, my viewports / screens provide 3 different starting-widths for converting to 'em' - and I have no idea what viewport / screen widths end-users have. You have to decide if the 100% starting-width is 800, 1024, 1280, 1600pixel or something else, since you can't convert percentages into 'em' directly for anything but font-size and line-height. If your 100% starting-width is 800pixel, then 800/16='em' will hit right as long as we're dealing with the default font-size for 96dpi. If browsers correct correctly for resolution, then it'll still be correct (in a manner of speaking) for other resolutions. Problem is: browsers are not very good at the various resolution game yet, so you may get more than one actual width as result on higher resolutions - depending on browser. Hope that came through a bit clearer. regards Georg -- http://www.gunlaug.no __ 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] Size calculations
2009/3/15 Bill Brown macnim...@gmail.com: Bill Brown wrote: /* FLOAT BEHAVIOR SWITCH FOR IE */ #page-panel { display: inline-block; } #page-panel { display: block; } I lied: remove the position:relative from that last block. That's an artifact from another template. Sorry. It should be as corrected above your lie ;-) I'll try it out, and se how it looks, and I, maybe be back ! -- Regards / Mhv. Ib K. jensen - http://ikjensen.dk __ 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] Size calculations
2009/3/15 Gunlaug Sørtun gunla...@c2i.net: Ib Jensen wrote: How do I change these measurements to: em What are those hypothetical '%' you want to convert to hypothetical 'em', relative to? That is: what is your hypothetical 100% starting-width? You can't convert anything to 'em' without having an absolute starting point. The template should fill a total of 90% of the viewport / screen. I want the header and footer in the template to fill 90% of the viewport / screen. The left- and content-column in the template should only fill 80% of the viewport / screen. I don't know if this clears something. -- Regards / Mhv. Ib K. jensen - http://ikjensen.dk __ 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] Size calculations
2009/3/15 Gunlaug Sørtun gunla...@c2i.net: Ib Jensen wrote: My viewport / screen is 3840pixel wide on one machine, but it is 1280pixel wide on another machine and 1440pixel wide on yet another. Kind a the same problem here: I'm developing on a 19 widescreen, resolution unknown for the moment. I'm writing this, looking for tips and tricks and seing my own and other sites on a 22 widescreen. You have to decide if the 100% starting-width is 800, 1024, 1280, 1600pixel or something else, since you can't convert percentages into 'em' directly for anything but font-size and line-height. Now you are forcing me do something quit new to me, taking descissions. Problably because I want to much at the same time. But I assume that the mostly used monitor-size is either a 17 or 19 screen, then it should be something around 800 or 1024px. If your 100% starting-width is 800pixel, then 800/16='em' will hit right as long as we're dealing with the default font-size for 96dpi. If browsers correct correctly for resolution, then it'll still be correct (in a manner of speaking) for other resolutions. Problem is: browsers are not very good at the various resolution game yet, so you may get more than one actual width as result on higher resolutions - depending on browser. Hope that came through a bit clearer. I think. That means roughly, that a developer should have at least three screens with different resolutions and X number of browsers installed, on different systems, to in fact have a chance to guess which size of units to use. -- Regards / Mhv. Ib K. jensen - http://ikjensen.dk __ 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] Size calculations
Ib Jensen wrote: The template should fill a total of 90% of the viewport / screen. I want the header and footer in the template to fill 90% of the viewport / screen. The left- and content-column in the template should only fill 80% of the viewport / screen. I don't know if this clears something. If you don't care about IE, or you're not using full-height column backgrounds, you can get away with this: ~~~ !DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd' html head title%TITLE%/title meta http-equiv='content-type' content='text/html;charset=utf-8' style type='text/css' #page-frame,#core-panel {width:90%;margin:0 auto} #head-frame,#core-frame,#foot-frame {display:table;margin:0 auto} #head-frame,#foot-frame {width:90%} #core-frame {width:80%} #head-panel,#core-panel,#foot-panel {display:table-row} #header,#menu,#main,#footer {display:table-cell;vertical-align:top} #head-panel,#foot-panel {background:#ccc;width:100%} #menu {background:#bbb;width:20%} #main {background:#ddd;width:80%} /* Faking display:table-cell for IE as best we can */ #menu,#main {display:inline-block!ie} #menu,#main {display:inline!ie} /style /head body id='www-css_sig-tld' div id='page-frame' div id='head-frame' div id='head-panel' div id='header' p%HEADER%/p /div /div /div div id='core-frame' div id='core-panel' div id='menu' p%MENU%/p p%MENU%/p /div div id='main' p%MAIN%/p /div /div /div div id='foot-frame' div id='foot-panel' div id='footer' p%FOOTER%/p /div /div /div /div /body /html ~~~ Hope it helps. --Bill -- !-- ! Bill Brown macnim...@gmail.com ! Web Developologist, WebDevelopedia.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] Size calculations
2009/3/15 Bill Brown macnim...@gmail.com: Ib Jensen wrote: If you don't care about IE, or you're not using full-height column backgrounds, you can get away with this: I do care about IE ( a lot of faul words ), to a certain limit IE6 and up. And wish to use full-height columns without graphics, just colors. #page-frame,#core-panel {width:90%;margin:0 auto} Now I've had to calculate the other way round. From % to em. ;-) /* Faking display:table-cell for IE as best we can */ #menu,#main {display:inline-block!ie} #menu,#main {display:inline!ie} Is this a way of making a kind of table-layout ?? Hope it helps. --Bill At least I have something to play with. Just got finished with your first suggestion. It showed me that % and em, are two very diiferent units to play with. I've had to recalculate the meassures, to something smaller. So it could fit on _my_ screen, but the original meassures will problably show up differently on another screen. -- Regards / Mhv. Ib K. jensen - http://ikjensen.dk __ 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] Size calculations
Ib Jensen wrote: That means roughly, that a developer should have at least three screens with different resolutions and X number of browsers installed, on different systems, to in fact have a chance to guess which size of units to use. Not at all. You can check all conditions on a screen with high enough resolution, but you may have to keep track of those browsers and how they evolve and respond to changes on the hardware side. The reason I opted for such a large screen-area on my workstation, is that I can simulate nearly all hardware/software induced conditions on it through a few clicks. Most web designers can simulate parts of modified conditions at the user-end by zooming up and down the entire page in a capable browser. First: get the terms, and sizes, right. Resolution is somewhere between 72 and 300dpi and most viewports/screens are between 640 and 3600px wide. Resolution vs pixel-width affect actual screen size, so a 2400px wide screen with 220dpi resolution (not many of those around, but they're coming) will be physically quite small in size. So, forget about 15, 17, 19 and so on for screens. A screen is so and so many screen-pixels wide and tall, regardless of its actual size. This resolution vs. size range can not be covered by web designers by using one size fits all methods - the browsers and end-user settings have to bridge the gap. What we have to do is to allow browsers to do their job - we have to work _with_ the media and not against them, and only decide which limits we have to set so our creations have a chance to survive. The only somewhat safe way to lay out web pages so they work everywhere, is to not lock sizes to anything but viewport - using percentage, and decide what is too wide or too narrow for our creations. 'em' is locked to font-size, so 'em' is in most cases only useful for setting limits - min-width and/or max-width, and those limits should be quite generous. 'px' is also locked, so they're also most useful for setting generous limits. In time browsers and other software will be modified to un-lock both 'em' and 'px' - in a way, in order to make sensible use of higher resolution on screens. Full page zoom is one way to do that, and most browsers already have the basics (for manual setting) in place. Screen-pixels and design-pixels then become relative to each other - as they already are on regular printers, and the software will do the conversion (see wishful thinking in another thread today). For full page zoom browsers seem to go the adaptive zoom route, probably because they can't cover the wide resolution/actual screen size range any other way and make it fit on screen for all end-users. Most fluid-width designs will then work quite well without modifications, but both 'em' sized and 'px' sized designs may run into range problems since they can't really adapt to viewports/screens unless browsers override their fixed width (my browser-preference can already do that). Fixed-width layouts, being it 'px' or 'em', will probably never go out of fashion ... they just won't work very well outside their creators' preferred range. Support for media queries is slowly growing across browser-land, so we are, or will be, able to modify our designs a bit to suit the various conditions. Great care has to be taken here though, as we must know what various browsers actually do under various conditions before we try to improve things. Now, browsers and screen-resolutions can only go one way, upwards, while screen-sizes can and will go both ways. Thus, the future for rendering on flat screens is predictable, although it is hard to say how quickly they evolve and spread. They have to introduce one or more non-flat screens for anything to change. So, IMO, it is best *not* to convert a fluid layout into anything else right now, but instead only control the upper and lower limit for its fluidity so it doesn't become ridiculously and/or unusably wide or narrow. That this control of fluidity can be achieved both forward and in reverse, and in a few other ways, may complicate matters for those who haven't grasped the whole adapt or fail concept. However, rising resolution and both larger and smaller screens and various devices are hitting the market around us, so quick learners will be at an advantage. regards Georg -- http://www.gunlaug.no __ 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] Size calculations
On Sun, 15 Mar 2009 21:12:39 +0100 Came this utterance formulated by Gunlaug Sørtun to my mailbox: Ib Jensen wrote: That means roughly, that a developer should have at least three screens with different resolutions and X number of browsers installed, on different systems, to in fact have a chance to guess which size of units to use. Not at all. You can check all conditions on a screen with high enough resolution, but you may have to keep track of those browsers and how they evolve and respond to changes on the hardware side. The reason I opted for such a large screen-area on my workstation, is that I can simulate nearly all hardware/software induced conditions on it through a few clicks. Most web designers can simulate parts of modified conditions at the user-end by zooming up and down the entire page in a capable browser. First: get the terms, and sizes, right. Resolution is somewhere between 72 and 300dpi and most viewports/screens are between 640 and 3600px wide. Phone and palm browsing is on the increase and screen width there is typically under 400px. Resolution vs pixel-width affect actual screen size, so a 2400px wide screen with 220dpi resolution (not many of those around, but they're coming) will be physically quite small in size. So, forget about 15, 17, 19 and so on for screens. A screen is so and so many screen-pixels wide and tall, regardless of its actual size. This resolution vs. size range can not be covered by web designers by using one size fits all methods - the browsers and end-user settings have to bridge the gap. What we have to do is to allow browsers to do their job - we have to work _with_ the media and not against them, and only decide which limits we have to set so our creations have a chance to survive. The only somewhat safe way to lay out web pages so they work everywhere, is to not lock sizes to anything but viewport - using percentage, and decide what is too wide or too narrow for our creations. 'em' is locked to font-size, so 'em' is in most cases only useful for setting limits - min-width and/or max-width, and those limits should be quite generous. 'px' is also locked, so they're also most useful for setting generous limits. In time browsers and other software will be modified to un-lock both 'em' and 'px' - in a way, in order to make sensible use of higher resolution on screens. Full page zoom is one way to do that, and most browsers already have the basics (for manual setting) in place. Screen-pixels and design-pixels then become relative to each other - as they already are on regular printers, and the software will do the conversion (see wishful thinking in another thread today). For full page zoom browsers seem to go the adaptive zoom route, probably because they can't cover the wide resolution/actual screen size range any other way and make it fit on screen for all end-users. Most fluid-width designs will then work quite well without modifications, but both 'em' sized and 'px' sized designs may run into range problems since they can't really adapt to viewports/screens unless browsers override their fixed width (my browser-preference can already do that). Fixed-width layouts, being it 'px' or 'em', will probably never go out of fashion ... they just won't work very well outside their creators' preferred range. Support for media queries is slowly growing across browser-land, so we are, or will be, able to modify our designs a bit to suit the various conditions. Great care has to be taken here though, as we must know what various browsers actually do under various conditions before we try toimprove things. Now, browsers and screen-resolutions can only go one way, upwards, while screen-sizes can and will go both ways. Thus, the future for rendering on flat screens is predictable, although it is hard to say how quickly they evolve and spread. They have to introduce one or more non-flatscreens for anything to change. So, IMO, it is best *not* to convert a fluid layout into anything else right now, but instead only control the upper and lower limit for its fluidity so it doesn't become ridiculously and/or unusably wide or narrow. That this control of fluidity can be achieved both forward and in reverse, and in a few other ways, may complicate matters for those who haven't grasped the whole adapt or fail concept. However, rising resolution and both larger and smaller screens and various devices are hitting the market around us, so quick learners will be at an advantage. regards Georg -- http://www.gunlaug.no __ 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] Size calculations
2009/3/15 Gunlaug Sørtun gunla...@c2i.net: Ib Jensen wrote: First: get the terms, and sizes, right. Resolution is somewhere between 72 and 300dpi and most viewports/screens are between 640 and 3600px wide. Resolution vs pixel-width affect actual screen size, so a 2400px wide screen with 220dpi resolution (not many of those around, but they're coming) will be physically quite small in size. So, forget about 15, 17, 19 and so on for screens. A screen is so and so many screen-pixels wide and tall, regardless of its actual size. Uuuups. Something that I have completely misunderstood. Thats problably why I sometimes have problems getting the right size of the layout i working with locally. 'em' is locked to font-size, so 'em' is in most cases only useful for setting limits - min-width and/or max-width, and those limits should be quite generous. 'px' is also locked, so they're also most useful for setting generous limits. By this, you mean that, how should I write it: A fluid / Elacstic layout: The skeleton of a layout in % Font-size in % or em A fixed layout: The skeleton of a layout in em or px Font-size in em or px -- Regards / Mhv. Ib K. jensen - http://ikjensen.dk __ 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] Size calculations
Ib Jensen wrote: By this, you mean that, how should I write it: [...] Some say elastic when they mean fluid layouts, while some say elastic when they mean em-sized layouts. Confusing. To cut through; for the basic layout, I mean: 1: Fluid layout: all widths in '%'. (One can also use auto-width in some cases.) - adapt well to various viewports, but can become overly wide and narrow. 2: Conditional fluid layout: all widths in '%', + min-width/max-width for entire layout in 'em' and/or 'px'. - adapt well to various viewports, and can *not* become overly wide or narrow. - if 'em' is used for max-width, I sometimes refer to these as conditional elastic since they behave as fluid and 'em'-sized at the same time. 3: Fixed layout: all widths in 'px'. - can't adapt to anything. 4: Em-sized layout: all widths in 'em'. - can't adapt to anything. Basic layout variants: 5: Fixed - fluid - fixed: overall width in '%', with fixed-width side columns and fluid main column. - adapt well to various viewports, but main column can become overly wide and narrow. - also comes in 2-columns fixed-fluid or fluid-fixed, and in other column-mixes. 6: Conditional fixed - fluid - fixed: overall width in '%', with fixed-width side columns and fluid main column, + min-width/max-width for entire layout in 'em' and/or 'px'. - adapt well to various viewports, and main column can *not* become overly wide or narrow. - also comes in 2-columns fixed-fluid or fluid-fixed, and in other column-mixes. 7: Overly backwards and unnecessary complex adaptive fixed/em-sized layout: width in 'px' or 'em', + max-width in '%' and min-width in 'em' or 'px'. - can adapt to various viewports to a certain degree, but 'em' sized tends to break under font resizing stress unless all font-sizes are left at default. Font-size for all the above in whatever unit, but preferably in '%' and/or 'em' for optimal end-user friendliness. FYI: I most often use a 2 or 6 variation with generous min/max limits. For my personal site I use 6 and mix in conditional elastic for the main column in an otherwise fixed-fluid-fixed layout. A bit of cross-container absolute positioning tops it up. I then add in mediaqueries to reconfigure the entire layout for really small screens, and look to the future for help ;-) In essence: one can mix in layout variations in one layout to kingdom come and get away with it, as long as one understands the adapt or fail concept ... and test well. Not possible to make really old/obsolete browser play along with everything though, so one still has to be pragmatic and make choices for under which conditions ones creation has to work and under which it may be allowed to fail - and how much it should be allowed to fail. However, ones creation should only be allowed to fail for real in those old/obsolete browsers, as one should be able to at least hope that makers of new browser versions know what they're doing and can make _their_ creations work. Think I got the above about right. Hard to compress a thousand choices into a mail. regards Georg -- http://www.gunlaug.no __ 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/