On 7/10/12 7:40 PM, "Isabel Santos" <unboun...@gmail.com> wrote:
>Sorry Jeff,
>spoke too soon, tested this solution:
>
><!DOCTYPE html>
><html>
><head>
><style type="text/css" media="screen"><!--
>#wrap {width:60%; margin:0 auto; position:relative;}
>img{width:100%; top:0; margin-left:50%; left:-50%; display:block;
>position:absolute;}
>--></style>
></head>
><body>
><div id="wrap">
> <img src="img/yourimage1.jpg">
> <img src="img/yourimage2.jpg">
></div>
></body>
></html>
>seams to work
>the idea is relatively positioning a wrapper with the dimensions you need;
>Then you can give 100% width to the images so they scale;
>left and margin-left will keep it centered
>
>hope this one helps,
>isabel
>On Tue, Jul 10, 2012 at 11:47 PM, Isabel Santos <unboun...@gmail.com>
>wrote:
>
>> Jeff,
>>
>> the problem is if you need to put images one on top of the other you
>>need
>> to use absolute positioning, wich relies on the position on the page
>> relative to the closest positioned parent and not on the position of the
>> closest parent.
>> The solution is old and has support on most browsers: centering a zero
>> width closest parent (by closest I mean next up in the stack).
>> You have a good exemple here:
>> http://www.wpdfd.com/editorial/thebox/deadcentre4.html
>>
>> hope it helps,
>> isabel
>> On Tue, Jul 10, 2012 at 9:55 PM, Georg <gunla...@c2i.net> wrote:
>>
>>> On 10.07.2012 19:40, Gates, Jeff wrote:
>>>
>>>> Hmmm, I added a max-width of 800px (which is the width of the actual
>>>> image
>>>> and I think it's working!
>>>>
>>>> #past_background div.past5 {
>>>> display: block;
>>>> margin-left: auto;
>>>> margin-right: auto;
>>>> width:60%;
>>>> max-width: 800px;
>>>> border: 1px solid orange;
>>>> }
>>>>
>>>>
>>> If you reverse the width declaration to 'width: 800px; max-width:
>>>60%;',
>>> you will get the same behavior in a container that behaves responsive
>>>the
>>> same way as the images. Although appearance/responsiveness will be the
>>>same
>>> this behavior may be easier to grasp..?
>>> Images should have a 'max-width: 100%' of its container.
>>>
>>>
>>>
>>>> But, of course, I don't understand why. And this is what bothers me
>>>>with
>>>> developing a responsive design. If I create a style and it doesn't
>>>>work I
>>>> play with it until it does (or end up writing this list if nothing I
>>>>do
>>>> works) but I often feel like I'm striking in the dark, hoping to hit
>>>>it,
>>>> if you know what I mean. -g
>>>>
>>>
>>> The original problem lies in that the image on top was/is absolute
>>> positioned to the top/left of its container, and as the container
>>>expands
>>> it stays top/left regardless of centering of "real" image. Making the
>>> container no larger than the real image and centering it, makes
>>>top/left
>>> position the same for both images, so positioned and non-positioned
>>>images
>>> stay and respond the same.
>>>
>>> regards
>>> Georg
Thanks Georg and Isabel!! I appreciate the explanations.
Jeff
______________________________________________________________________
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/
