Jump to content


Photo
- - - - -

Equal Spacing between images


  • Please log in to reply
3 replies to this topic

#1 LukeB

LukeB

    Super Member

  • Members
  • 139 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 19 September 2011 - 07:36 PM

Im looking to be able to create equal spacing between images in a sidebar widget. Ive put them in a html text widget and just used the following code and then repeated it.
The xx The Maccabees Jamie xx
However i find that it doesn??™t provide nice neat looking gaps between images and the image on the right is never fully in line with the right hand side of the sidebar. What im trying to achieve can be seen on http://prettymuchamazing.com/ under On Deck which is half way down the page in the right sidebar. http://www.danceyrselfclean.com/ Best Regards Luke Boobyer

#2 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 19 September 2011 - 09:53 PM

Better to make a list rather than a table.

Here is the CSS they have used on each image to make it line up like that:

 
	#sidebars #on_deck li {
	float: left;
	margin: 0 6px 6px 0;
	}

This code affects each list item, which has the image inside it. Your's will be simililar but have different ids of course.

Use Google Chrome to right-click and "inspect" any element to view it in the source and the CSS associated with it.

#3 LukeB

LukeB

    Super Member

  • Members
  • 139 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 23 September 2011 - 03:25 PM

Ok cheers i changed it to a list rather than a table but im still unable to find the correct css needed to achieve equal spacing, even when using firebug

#4 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 23 September 2011 - 05:06 PM

The css isn't working for you because you simply placed a bunch of link tags `` without the list element. For instance on the other site they have the structure:
  • ...
which is necessary to have the css work from Jimmy's suggestion. you would want #text-15 ul li { float:left; margin: 0 6px 6px 0; }