Re: [css-d] responsive design
Am 17.06.2013 16:44 schrieb Olivia A: But for the web page layout by default, (with no media query applied) , when i resize down the pages "a propos.php" and "enregistrement.php"; the two containers (below the long picture ) which are floated elements don't float as it should, but instead there is one container falling down underneath the other one.This only occur when i resize down the browser. At the moment I look at your example pages, the 2nd container is below the 1st one even without resizing (Firefox 21.0 on Windows 7). And this is actually the expected behaviour, as the total width of them is more than 100%. You have widths of 49% + 2% + 49% = 100%, plus 10px padding on both containers, which makes totally 40px padding horizontally. So both containers have a total width of 100% + 40px. I made the same mistake when I started with web design. I was used to the InDesign-/QuarkXPress box model which has the padding inside the total width. In CSS, the padding is added to the total width. You could add a css rule as follows, to change the box model: .container1, .container2 { box-sizing: border-box; } Anyway I believe to have read that browser support for border-box is not quite perfect (IE8 seems to have problems). I'd personnally change the padding to %, so you can sum up to exactly 100%, such as: .container1, .container2 { width:45%; padding:2%; } .container1 { margin-right:2%; } HTH Markus __ css-discuss [css-d@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] responsive design
Markus Ernst wrote: > I believe to have read that browser support for border-box is not > quite perfect (IE8 seems to have problems). I'd personnally change the > padding to %, so you can sum up to exactly 100%, such as: > > .container1, .container2 > { > width:45%; > padding:2% > } > .container1 > { > margin-right:2% > } Is there definite evidence that browser arithmetic is this precise ? Might it not be better to force the sum of the dimensions to be just less than 100%, in order to allow for possible rounding errors in converting from percent into internal units ? Certainly in my own designs I always aim for a sum of the order of not more than 99.8%. Philip Taylor __ css-discuss [css-d@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] background image AND background color?
Fiddling with trying to combine a background image with background color applied to the same element and hoping to vary either one or both opacity. Is this possible to do…I guess what I'm looking for is to do with CSS, images and color what you can do with Photoshop layers. Thank you! John __ css-discuss [css-d@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] background image AND background color?
Background: #cco url('image.png') 0 0 no-repeat; — Sent from Mailbox for iPhone On Tue, Jun 18, 2013 at 8:22 PM, COM wrote: > Fiddling with trying to combine a background image with background color > applied to the same element and hoping to vary either one or both opacity. > Is this possible to do…I guess what I'm looking for is to do with CSS, images > and color what you can do with Photoshop layers. > Thank you! > John > __ > css-discuss [css-d@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-discuss [css-d@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] background image AND background color?
On Tue, Jun 18, 2013 at 8:22 PM, COM wrote: > Fiddling with trying to combine a background image with background color > applied to the same element and hoping to vary either one or both opacity. > > Is this possible to do…I guess what I'm looking for is to do with CSS, images > and color what you can do with Photoshop layers. > > Thank you! > > John Anything is possible. Scalable Vector Graphics [svg images], CSS rgba transparency, and CSS linear-gradients --among other contemporary methods ... open a lot of new doors and windows that do not require PhotoShop. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@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/