I have a request to do a site where the photos on the homepage are arranged, so that the don 't align evenly. Kind of in a circle. Is it possible to use css? I was thinking flash or one big image.

  • Yes it can be done, but how many photos. The more photos the trickier it gets... David Leininger over 8 years ago

2 answers


I've set up an example of a circular layout here (well, kindof, with a little tweaking...). I haven't browser testet it though but it's a start. You should be able to build some kind of formula for positioning based on the radius of the circle and the width of the images, feel free to do the math :)

It works like this:

alt text

It's important to remember that you should try to keep the semantics intact. A gallery is often "a list of linked images", and therefore it should be a <ul> (or <ol>) with just that, an <a> and <img>. Alltough I admit that in the example code I've provided above has some unsemantic class-names.

Answered over 8 years ago by Jens Hedqvist
  • The page you posted has a slightly different layout, more of a diamond shape with the list bullet still showing. Anyway, +1 for the effort and the idea behind it. :) o.k.w over 8 years ago
  • Yep I know. That's why I said that it is a circle "kindof, with a little tweaking...". I didn't have the time to tweak it. :) Jens Hedqvist over 8 years ago
  • To get rid of the bullet, you would just change the list to <dl> David Mermelstein over 8 years ago
  • Ooooor, set the LI to list-style: none? :) Jens Hedqvist over 8 years ago

Thanks for the idea. This looks great. I am debating whether or not to go down the css with javascript road with this slightly more complex layout. http://www.denamermelstein.com/images/home-pics-layout.jpg.

My other option would be with flash. When the images are rolled over, a popup with film title and year will appear then will link to a full page with the movie and description.

Answered over 8 years ago by David Mermelstein