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 j...@coffeeonmars.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 j...@coffeeonmars.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/
