WordPress.org

1. mickeyshout
   Member
   Posted 4 months ago #

   Hey, I set up my site and positioned my images using vspace and hspace commands, and everything looks fantastic in IE ... but in Firefox, the space between the image and the text is non-existent. I discovered through web searches that Firefox doesn't recognize vspace and hspace, and that I'm supposed to do this in my style sheet. Problem is, I have no idea how... I really need the absolute basics and code examples. What do I put into my style sheet to make images align either left or right or center, with a 20 pixel horizontal space and a 4 pixel vertical space between the image and the text -- and then what sort of code do I use in my posts to call that info from the style sheet? Thanks!

   Oh--I want to be able to do this without affecting the alignment or spacing of any of the basic images that are already part of the Deep Silent 1.6 theme I am using.

   Here's the url of my site, showing a page with an image:

   http://crazymancrazy.com/band/julian-root-guitar-and-vocals/

2. Otto42
   Moderator
   Posted 4 months ago #

   I assume you mean the images inside of your posts? Just add this to your theme's stylesheet:

   .post img {
   margin-top:4px;
   margin-bottom:4px;
   margin-right:20px;
   margin-left:20px;
   }

   As for alignment, your theme already has the left and right alignment classes in there, just use the normal WP editor to align left or right and it'll happen automatically.

3. mickeyshout
   Member
   Posted 4 months ago #

   Thanks! I'll give this a try.

   I can't use the WP align left align right functions tho--tried them and experienced great frustration. They always squash the photo horizontally. Don't know why, but they change the size so the horizontal dimension is way too narrow, while leaving the vertical dimension the same. So, I stopped using them and started specifying with code.

   How do I specify with code now?

   Again, MUCH THANKS!

   P.S.--I also want this to work in Pages as well as Posts. Do I need to put anything different/additional in my style sheet?

4. alchymyth
   Member
   Posted 4 months ago #

   for whatever reason, the .alignleft und .alignright in the theme have a width attached to them. that would obviously change the size of your images.
   style.css:
   

   .alignleft{
   	float:left;
   	width:150px;
   }
   .alignright{
   	float:right;
   	width:200px;
   }

   if you remove the width and put a margin declaration in, it should work alright.

   something like the following in the style.css:
   

   img .alignleft{
   	float:left;
   	margin: 4px 20px 4 px 0px;
   }
   img .alignright{
   	float:right;
   	margin:4px 0px 4px 20px;
   }

5. mickeyshout
   Member
   Posted 4 months ago #

   Thanks! I replaced

   .alignleft{
   float:left;
   width:150px;
   }
   .alignright{
   float:right;
   width:200px;
   }

   with

   .alignleft{
   float:left;
   margin: 4px 20px 4px 0px;
   }
   .alignright{
   float:right;
   margin:4px 0px 4px 20px;
   }

   and now it works great! You can see it here...

   http://crazymancrazy.com/band/julian-root-guitar-and-vocals/

   Much appreciated, Otto and alchymyth!!!

Reply

You must log in to post.