Image alignment help please

[philip41]

Hi guys, hopefully someone can point me in the right direction to getting my images lined up side by side, without using tables preferably.

I am updating the content on our site http://www.broadwaterconservatories.co.uk/edwardian-conservatories/ I would like to have the images side by side then text set out below.

I have found a site that has the sort of layout I like, http://www.conservatoryinnovations.co.uk/ I have also had a look at the source code, I have did copy it to my page but the images just end up starting on a new line, so i reverted back to my original code, this does the same thing.





Phil.

 

[gord]

You're style here is making them appear on different lines:

#content .alignnone, #content img.alignnone {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

Try display: inline-block; and remove the margin settings which is centralising the image.

You might not want to clear the floats either. You could float the images but I try and avoid float unless I have to use it.

 

[Decelo]

--

 

[philip41]

Hello Gord,

Thanks for helping out, I have, I think, made the adjustments you mention, however does not seem to have worked, I know this has got to be me not knowing what the hell I am doing.

You will now see I have two options, one works the other does not.

Does it matter at all which i use.

By the way it is the larger images that matter, the tiny one is going to the bin.

Thanks

Phil.

 

[philip41]

--

First of Haaaai! I'm from Bognor

Secondly the code for you website is an absolute mess, no wonder you're struggling to sort it out. You seem to be using way too many unnecessary tags, you need to re-write pretty much the whole front end.

I had a look and if you change the code inside the "entry-content" div to this, it will put the images alongside each other. Still the code is pretty messy and wouldn't pass the web standards but neither would the rest of your site


No wonder you decided to delete your post, too late.

First of all I am sorry that Wordpress write such terrible code , front end, I am the end user, the work i am trying to do is from within the wordpress control panel, perhaps this is why i am having a lot of trouble.

Please do not be shy, if you can honestly help then please do.

Phil.

 

[Lydzor]

In the HTML within the thumbnails div for the page just remove <br> as shown here:

<div id="thumbnails">
<a href="http://www.broadwaterconservatories.co.uk/wp-content/uploads/2011/03/medium-Edwardian.jpg">
<strong> </strong>
</a>
<a href="http://www.broadwaterconservatories.co.uk/wp-content/uploads/2011/03/medium-Edwardian.jpg">
<img class="alignnone size-medium wp-image-710" height="226" width="300" alt="Edwardian Conservatory" src="http://www.broadwaterconservatories.co.uk/wp-content/uploads/2011/03/medium-Edwardian-300x225.jpg" title="Edwardian Conservatory in Sussex">
</a>
[COLOR="Red"]<br>[/COLOR]
<a href="http://www.broadwaterconservatories.co.uk/wp-content/uploads/2011/03/medium-Edwardian.jpg">
<strong> </strong>
</a>
<a href="http://www.broadwaterconservatories.co.uk/wp-content/uploads/2011/03/medium-Edwardian.jpg">
<img class="alignnone size-medium wp-image-710" height="226" width="300" alt="Edwardian Conservatory" src="http://www.broadwaterconservatories.co.uk/wp-content/uploads/2011/03/medium-Edwardian-300x225.jpg" title="Edwardian Conservatory in Sussex">
</a>
<p></p>
</div>

 

[philip41]

Thank you, however when I go into wordpress control panel to edit the <BR> out it is not in there, this is driving me nuts.

 

[Lydzor]

Sorry I don't have any experience with Wordpress so can't really offer any advice.

 

[philip41]

Sorry I don't have any experience with Wordpress so can't really offer any advice.

Thats quite alright, thanks anyway.