0

I am very new to html and css coding and recently i created my own website using wordpress.

In one of the pages in wordpress i wanted to add images next to each other separated with a small space; something that i did successfully but unfortunately the images are not horizontally aligned. The second and third images are positioned further down from the first image.

The html coding that i used without making any changes to css is the following:

<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_1.jpg"><img style="float: left;" src="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_1-150x150.jpg" alt="Image_1" width="150" height="150" hspace="10" />
</a>
<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_2.jpg"><img style="float: left;" src="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_2-150x150.jpg" alt="Image_2" width="150" height="150" hspace="10" />
</a>
<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_3.jpg"><img style="float: left;" src="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_3-150x150.jpg" alt="Image_3" width="150" height="150" hspace="10/" />
</a>

Any help will be much appreciated.

Many Thanks Demis

Demis
  • 117
  • 1
  • 16

3 Answers3

0

You need to write little CSS to do the Work. Here is detailed info how to do it.

Community
  • 1
  • 1
Kasmetski
  • 697
  • 6
  • 10
0

Have you checked if there isn't already some other CSS rules that affect your elements in page? Also, as a side note, you have an extra slash (/) in your hspace attribute on your third image

Also, this example will help you http://jsfiddle.net/0fe0w32s/ ?

HTML

<a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator.jpg" class="my_image"><img style="float: left;" src="http://high-resolution-photos.com/stock_photos/royalty_free_3.jpg" alt="Northern_Ireland_MDM_Indicator" />
</a>
<a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas.jpg" class="my_image"><img style="float: left;" src="http://www.gettyimages.com/CMS/Pages/RoyaltyFree/StaticContent/113198687.jpg" alt="Northern_Ireland_School_Service_Areas" />
</a>
<a href="http://www.example.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg" class="my_image"><img style="float: left;" src="http://www.royaltyfreeimages.net/wp-content/uploads/2010/09/royalty-free-images-mushroom-500x375.jpg" alt="PCs_Gross_Wage" />
</a>

CSS

.my_image {
    display: block;
    float: left;
    margin-right: 10px;
}

.my_image img {
    width: 150px;
    height: 150px;
}

Edit 2: please, remove the BR tags that are present in the containing paragraph so that your final code will look like this

<p><a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator.jpg"><img style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator-150x150.jpg" alt="Northern_Ireland_MDM_Indicator" height="150" hspace="10" width="150">
    </a>
    <a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas.jpg"><img style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas-150x150.jpg" alt="Northern_Ireland_School_Service_Areas" height="150" hspace="10" width="150">
    </a>
    <a href="http://www.example.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg"><img style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/PCs_Gross_Wage-150x150.jpg" alt="PCs_Gross_Wage" height="150" hspace="10" width="150">
    </a>
</p>
Markus W Mahlberg
  • 19,711
  • 6
  • 65
  • 89
punctweb
  • 45
  • 6
  • Hello punctweb, I have done this as well but with no luck. It must be something that prevents the images from aligning horizontally – Demis Apr 19 '15 at 20:46
  • Thanks punctweb bit I still have the same issue. It is quite tricky and probably i need to change something in the style css sheet. I used a customised theme in wordpress – Demis Apr 19 '15 at 21:55
  • @Demis Maybe it will be a lot easier to solve this if you show us some live / online examples of your project – punctweb Apr 19 '15 at 22:29
  • Punctweb please see attached link where the issue exists. http://www.infosyntaxis.com/services/gis-mapping-analytics – Demis Apr 19 '15 at 23:42
  • Punctweb I tried your code again but with same results. I just added the html code of the images one next to the other and worked. I dont know why this worked. Please see post above – Demis Apr 20 '15 at 21:12
  • @Demis I think something in your code (a plugin maybe?) was adding BRs for new lines, in that specific paragraph... Since now you have no new lines over there (the tags are one after another) there are no BRs inserted, hence the display is as you want it to be – punctweb Apr 21 '15 at 07:56
0

@ Punctweb

for some reason the following code worked Punctweb. I just added the images next to each other. although i think this code doesnt look very correct

<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator.jpg"><img class=" alignnone" style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator-150x150.jpg" alt="Northern_Ireland_MDM_Indicator" width="150" height="150" hspace="10" /></a> <a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas.jpg"><img class=" alignleft" style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas-150x150.jpg" alt="Northern_Ireland_School_Service_Areas" width="150" height="150" hspace="20" /></a> <a href="http://www.mywebsite.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg"><img class=" alignleft" style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/PCs_Gross_Wage-150x150.jpg" alt="PCs_Gross_Wage" width="150" height="150" hspace="0" />
Demis
  • 117
  • 1
  • 16