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;
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
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
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:
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
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
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
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
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
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:
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
11 matches
Mail list logo