WP CSS question

NobleSavage · July 28th, 2010, 02:32 PM

I'm working on a site where I want to be able to float images left or right AND have the text wrap around. I select the float in the image uploder and it adds the class .alignleft. .aligncenter,or .alignright.

I added this in my css file:

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

based on this turorial Wrapping Text Around Images WordPress Codex

Still doesn't work. When I preview the post or page in the visual editor it shows the text wrapping, but when I publish the text does not float around the images.

Any ideas?

glowlite · July 28th, 2010, 10:09 PM

Are you using Ctrl+F5 for a fresh reload (view) after editing your CSS ?
Just a thought ...

CraK · July 28th, 2010, 11:04 PM

If you are trying to align the images inside a post, I assume you have a class called "content" or "entry" or something like that.

You can use something like ...

Code:

#content img {
    margin: 0;
    max-width: 640px;
overflow: hidden;
}
#content .attachment img {
    max-width: 900px;
}
#content .alignleft,
#content img.alignleft {
    display: inline;
    float: left;
    margin-right: 24px;
    margin-top: 4px;
}
#content .alignright,
#content img.alignright {
    display: inline;
    float: right;
    margin-left: 24px;
    margin-top: 4px;
}
#content .aligncenter,
#content img.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#content img.alignleft, 
#content img.alignright, 
#content img.aligncenter {
    margin-bottom: 12px;
}

Edit to fit your own needs.

NobleSavage · July 28th, 2010, 11:29 PM

Thanks Crack. Actually, just talked to the guy who designed the theme and he says he knows what the problem is and will fix it tomorrow.

July 28th, 2010, 02:32 PM	#1 (permalink)
NobleSavage Serious Contributor Join Date: Jan 2006 Location: 127.0.0.1 Posts: 1,683	WP CSS question I'm working on a site where I want to be able to float images left or right AND have the text wrap around. I select the float in the image uploder and it adds the class .alignleft. .aligncenter,or .alignright. I added this in my css file: img.alignright {float:right; margin:0 0 1em 1em} img.alignleft {float:left; margin:0 1em 1em 0} img.aligncenter {display: block; margin-left: auto; margin-right: auto} a img.alignright {float:right; margin:0 0 1em 1em} a img.alignleft {float:left; margin:0 1em 1em 0} a img.aligncenter {display: block; margin-left: auto; margin-right: auto} based on this turorial Wrapping Text Around Images WordPress Codex Still doesn't work. When I preview the post or page in the visual editor it shows the text wrapping, but when I publish the text does not float around the images. Any ideas? __________________ I use and have been very happy with Hosthead! Russian Teens YoungPorn18

July 28th, 2010, 10:09 PM	#2 (permalink)
glowlite Where are my pants? Join Date: Jan 2007 Posts: 84	Are you using Ctrl+F5 for a fresh reload (view) after editing your CSS ? Just a thought ... __________________ ::: It doesn't matter where you've been, only where you're going. :::

July 28th, 2010, 11:29 PM	#4 (permalink)
NobleSavage Serious Contributor Join Date: Jan 2006 Location: 127.0.0.1 Posts: 1,683	Thanks Crack. Actually, just talked to the guy who designed the theme and he says he knows what the problem is and will fix it tomorrow. __________________ I use and have been very happy with Hosthead! Russian Teens YoungPorn18