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 <[email protected]> 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 <[email protected]> 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
>>
>>
>> ______________________________**______________________________**
>> __________
>> css-discuss [[email protected]]
>> http://www.css-discuss.org/**mailman/listinfo/css-d<http://www.css-discuss.org/mailman/listinfo/css-d>
>> List wiki/FAQ --
>> http://css-discuss.incutio.**com/<http://css-discuss.incutio.com/>
>> List policies --
>> http://css-discuss.org/**policies.html<http://css-discuss.org/policies.html>
>> Supported by evolt.org --
>> http://www.evolt.org/help_**support_evolt/<http://www.evolt.org/help_support_evolt/>
>>
>
>
______________________________________________________________________
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/
