-1

Am making changes on a home page. i have background images and links to the image as buttons.

However when creating divs for each image i found out that the best way was to add div for each image as that will allow me to position the images side by side. i was told to use a class, however with class i would not able to put images side by side.:

this is my finished page as you can see the 7 images on the middle of the screen.

however if you open this in Firefox it comes out all messy :/

what is the best solution for this to have it positioned like the link i provided. but in all browsers. is divs the best way?

This is my js fiddle with the code: http://jsfiddle.net/uJhvk/

e.g

 <div id="testimage">
  <div id="a1"><a href="">Awards</a></div>
 </div>

any help will be grateful.

al123
  • 561
  • 9
  • 25

1 Answers1

1

http://jsfiddle.net/ahallicks/uJhvk/1/

I've added floats to #testimage2-6 and margins to the last two to space them out

float: left;clear: both;

on #testimage2 to make it sit on a new line

Alex
  • 7,320
  • 1
  • 18
  • 31
  • should i make them to a class or leave it as divs – al123 Jan 28 '14 at 13:08
  • 1
    It's not exactly clean code as it is, but I'm not one to judge ;-) You could add a class for the floating elements so you don't have to repeat code. That's the basic usage off classes. If you're going to use them for more than one element give it a class! – Alex Jan 28 '14 at 13:09
  • On #testimage4 you need a clear:both; and float: left; – Alex Jan 28 '14 at 14:20
  • when i do that to image 6 it messes the whole page up. as the image view below moves like 200px up :/ – al123 Jan 28 '14 at 14:25
  • You need to add the float:left; in for testimage5 and testimage6 (a margin) and the clear: both; to #content-bottom – Alex Jan 28 '14 at 14:28
  • THANKS ALEX! yeah it was adding clear:both; to content-bottom!! – al123 Jan 28 '14 at 14:42