Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Center area post/pages (http://forum.bytesforall.com/forumdisplay.php?f=32)
-   -   [SOLVED] Images not aligning across page (http://forum.bytesforall.com/showthread.php?t=14038)

RichardG May 5, 2011 06:53 AM

[SOLVED] Images not aligning across page
 
I have palced 3 images across a page using the image loader but the middle is always raised above the left and right images. How can I get them level? I said I would help a friend and they are getting upset that I am struggling to achieve this. Please can someone help?
Thankyou

lmilesw May 5, 2011 07:02 AM

Here is a link to an article that describes one method. You can also accomplish this with floats but I think this one is a bit easier.

RichardG May 5, 2011 09:29 AM

Thanks Larry

Have been fiddling since you posted and cannot get it to align correctly. What is the floating option?
Thanks Richard

lmilesw May 5, 2011 11:06 AM

Can you post the code you are using and a link to the site?

RichardG May 5, 2011 01:08 PM

Larry

Code and link as requested

[caption id="attachment_129" align="alignleft" width="200" caption="Chain necklace - silver chain and felted wool"]<a href="http://barbaraspence.co.uk/wp-content/uploads/2011/03/IMGP08881.jpg" target="_blank"><img class="size-medium wp-image-129" title="Chain necklace" src="http://barbaraspence.co.uk/wp-content/uploads/2011/03/IMGP08881-300x225.jpg" alt="Chain necklace - silver chain and felted wool" width="200" height="200" /></a>[/caption]

[caption id="attachment_125" align="alignright" width="200" caption="Ball necklace - silver, acrylic and felted wool"]<a href="http://barbaraspence.co.uk/wp-content/uploads/2011/03/IMGP0869.jpg" target="_blank"><img class="size-medium wp-image-125" title="Ball necklace" src="http://barbaraspence.co.uk/wp-content/uploads/2011/03/IMGP0869-300x225.jpg" alt="Ball necklace - silver, acrylic and felted wool" width="200" height="200" /></a>[/caption]

[caption id="attachment_125" align="aligncenter" width="200" caption="Threaded brooch - silver, silk and steel pin"]<a href="http://barbaraspence.co.uk/wp-content/uploads/2011/03/IMGP07684.jpg" target="_blank"><img class="size-medium wp-image-128 " title="Threaded brooch" src="http://barbaraspence.co.uk/wp-content/uploads/2011/03/IMGP07684-300x225.jpg" alt="Threaded brooch - silver, silk and steel pin" width="200" height="200" /></a>[/caption]

http://barbaraspence.co.uk/textile-jewellery

I really appreciate all your help. Thank you

lmilesw May 5, 2011 06:11 PM

If you set them all to align left they will line up. You have one set to align center and one to align right which messes things up. You can also set them all to align none and then use the inline-block display as shown below. I also added right margins to the first two images to space them a bit.
HTML Code:

<div style="display: inline-block;margin-right:20px;">
[caption id="attachment_129" align="alignnone" width="200" caption="Chain necklace - silver chain and felted wool"]<a href="http://barbaraspence.co.uk/wp-content/uploads/2011/03/IMGP08881.jpg" target="_blank"><img class="size-medium wp-image-129 " title="Chain necklace" src="http://barbaraspence.co.uk/wp-content/uploads/2011/03/IMGP08881-300x225.jpg" alt="Chain necklace - silver chain and felted wool" width="200" height="200" /></a>[/caption]
</div>

<div style="display: inline-block;margin-right:20px;">
[caption id="attachment_125" align="alignnone" width="200" caption="Ball necklace - silver, acrylic and felted wool"]<a href="http://barbaraspence.co.uk/wp-content/uploads/2011/03/IMGP0869.jpg" target="_blank"><img class="size-medium wp-image-125  " title="Ball necklace" src="http://barbaraspence.co.uk/wp-content/uploads/2011/03/IMGP0869-300x225.jpg" alt="Ball necklace - silver, acrylic and felted wool" width="200" height="200" /></a>[/caption]
</div>

<div style="display: inline-block;">
[caption id="attachment_125" align="alignnone" width="200" caption="Threaded brooch - silver, silk and steel pin"]<a href="http://barbaraspence.co.uk/wp-content/uploads/2011/03/IMGP07684.jpg" target="_blank"><img class="size-medium wp-image-128 " title="Threaded brooch" src="http://barbaraspence.co.uk/wp-content/uploads/2011/03/IMGP07684-300x225.jpg" alt="Threaded brooch - silver, silk and steel pin" width="200" height="200" /></a>[/caption]
</div>


RichardG May 6, 2011 06:10 AM

Larry you are a star and a hero. If I wasn't in the uk I'd give you a big kiss!

How can I thankyou?

By making a contribution? Also are you available to create websites?

Many Thanks for all your time and help.
Richard

lmilesw May 6, 2011 06:45 AM

Quote:

How can I thankyou?
You just did.
Quote:

By making a contribution? Also are you available to create websites?
Yes and Yes
Quote:

Many Thanks for all your time and help.
My pleasure.


All times are GMT -6. The time now is 03:03 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.