Re: [css-d] Problems Centering an Image

2012-07-12 Thread Gates, Jeff
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;

[css-d] Problems Centering an Image

2012-07-10 Thread Gates, Jeff
I am trying to center an image within a container in a responsive Wordpress web design. The URL of the problematic page is: http://www.outtacontext.com/wp2/about/past5/ I have put an orange border around the container to help show you the problem. When the viewport gets very wide, the image is no

Re: [css-d] Problems Centering an Image

2012-07-10 Thread Georg
On 10.07.2012 17:19, Gates, Jeff wrote: I am trying to center an image within a container in a responsive Wordpress web design. The URL of the problematic page is: http://www.outtacontext.com/wp2/about/past5/ Add... a.nounderline {display: table; margin: 0 auto; position: relative;} ...and

Re: [css-d] Problems Centering an Image

2012-07-10 Thread Gates, Jeff
On 7/10/12 12:34 PM, Georg gunla...@c2i.net wrote: On 10.07.2012 17:19, Gates, Jeff wrote: I am trying to center an image within a container in a responsive Wordpress web design. The URL of the problematic page is: http://www.outtacontext.com/wp2/about/past5/ Add... a.nounderline {display:

Re: [css-d] Problems Centering an Image

2012-07-10 Thread Tom Livingston
Add... a.nounderline {display: table; margin: 0 auto; position: relative;} ...and it will center in all browsers that support positioning on CSS table. regards Georg Thanks Georg. The problem with that is the image no longer resizes as the viewport gets smaller. Jeff Didn't

Re: [css-d] Problems Centering an Image

2012-07-10 Thread Gates, Jeff
On 7/10/12 12:52 PM, Tom Livingston tom...@gmail.com wrote: Add... a.nounderline {display: table; margin: 0 auto; position: relative;} ...and it will center in all browsers that support positioning on CSS table. regards Georg Thanks Georg. The problem with that is the image no

Re: [css-d] Problems Centering an Image

2012-07-10 Thread Tom Livingston
Yes, Tom. I used this CSS on the container around the [two] images (the on and off images): #past_background div.past5 { display: block; margin-left: auto; margin-right: auto; width:60%; } The problem is is that I can't use that on the images because, for some reason, I can only

Re: [css-d] Problems Centering an Image

2012-07-10 Thread Gates, Jeff
On 7/10/12 1:26 PM, Tom Livingston tom...@gmail.com wrote: Yes, Tom. I used this CSS on the container around the [two] images (the on and off images): #past_background div.past5 { display: block; margin-left: auto; margin-right: auto; width:60%; } The problem is is that I can't use

Re: [css-d] Problems Centering an Image

2012-07-10 Thread Georg
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

Re: [css-d] Problems Centering an Image

2012-07-10 Thread Isabel Santos
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:

Re: [css-d] Problems Centering an Image

2012-07-10 Thread Isabel Santos
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