Jump to content

Placing Images in a Circle

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.steveacedo.com/

Hi, I wanted to try doing something kinda silly for my website and recreate the old Space Jam site (https://www.spacejam.com/1996/) for my landing page. I've created the images for each planet and linked them to their respective pages, but I can only seem to arrange them aligned with one another. Is it possible to have them in a circular formation, like on the original site? Thanks

Edited by cowboymmmbop
title change
Link to comment
  • cowboymmmbop changed the title to Placing Images in a Circle
  • Replies 4
  • Views 434
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

They used custom HTML Table code to achieve this.

Add a Code Block >> paste this code

<table width="500" border="0">
<tbody><tr>
<td colspan="5" align="right" valign="top">
</td></tr>
<tr>
<td colspan="2" align="right" valign="middle">
<br>
<br>
<br>
<a href="cmp/pressbox/pressboxframes.html"><img src="img/p-pressbox.gif" height="56" width="131" alt="Press Box Shuttle" border="0"></a>
</td>
<td align="center" valign="middle">
<a href="cmp/jamcentral/jamcentralframes.html"><img src="img/p-jamcentral.gif" height="67" width="55" alt="Jam Central" border="0"></a>
</td>
<td align="center" valign="top">
<a href="cmp/bball/bballframes.html"><img src="img/p-bball.gif" height="62" width="62" alt="Planet B-Ball" border="0"></a>
</td>
<td align="center" valign="bottom">
<br>
<br>
<a href="cmp/tunes/tunesframes.html"><img src="img/p-lunartunes.gif" height="77" width="95" alt="Lunar Tunes" border="0"></a>
</td>
</tr>
<tr>
<td align="middle" valign="top">
<br>
<br>
<a href="cmp/lineup/lineupframes.html"><img src="img/p-lineup.gif" height="52" width="63" alt="The Lineup" border="0"></a>
</td>
<td colspan="3" rowspan="2" align="right" valign="middle">
<img src="img/p-jamlogo.gif" height="165" width="272" alt="Space Jam" border="0">
</td>
<td align="right" valign="bottom">
<a href="cmp/jump/jumpframes.html"><img src="img/p-jump.gif" height="52" width="58" alt="Jump Station" border="0"></a>
</td>
</tr>
<tr>
<td align="center" valign="bottom">
<a href="cmp/junior/juniorframes.html"><img src="img/p-junior.gif" height="57" width="49" alt="Junior Jam" border="0"></a>
</td>
<td rowspan="2" align="center" valign="top">
<br>
<br>
<a href="https://shop.looneytunes.com/spacejam96?utm_source=SpaceJam1996&amp;utm_medium=Website&amp;utm_campaign=Theatrical2021" target="_blank"><img src="img/p-studiostore.gif" height="72" width="94" alt="Warner Studio Store" border="0"></a>
</td>
</tr>
<tr>
<td>
</td>
<td align="center" valign="top">
<a href="cmp/souvenirs/souvenirsframes.html"><img src="img/p-souvenirs.gif" height="83" width="83" alt="Stellar Souvenirs" border="0"></a>
</td>

<td align="center" valign="bottom">
<br>
<br>
<br>
<br>
<a href="cmp/sitemap.html"><img src="img/p-sitemap.gif" height="67" width="104" alt="Site Map" border="0"></a>
</td>
<td align="center" valign="middle">
<a href="cmp/behind/behindframes.html"><img src="img/p-behind.gif" height="63" width="67" alt="Behind the Jam" border="0"></a>
</td>
</tr>
</tbody></table>

If it doesn't work, keep the code & share link to page where you added the code, we will test another style code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/15/2022 at 11:19 PM, cowboymmmbop said:

This seems to be working really well so far! I think I've added all the content I want to https://www.steveacedo.com/ by changing the urls in the code. Now that everything is in place, how can I align it to the center? I noticed it's a bit offset to the left. This code has been very helpful, though, I really appreciate you grabbing it for me.  Thank you so much!

You have a spacer block on left, try remove it.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.