JonnyK Posted July 20, 2012 Share Posted July 20, 2012 Hi guys, I'm looking to create a website with just one page, and on that page is minimal text but quite a few images - let's say 20 images. However, I want to have these images form a square (so obviously 5 across and 5 down). I've seen a number of flash sites do something like this but I was wondering if it would be possible to do it in html? Bear in mind that I'm a total novice when it comes to things like this! Would I be better off just creating one image myself consisting of all 20 images and do it that way? The flash sites I've come across have the ability to actually click on/hover over the individual images so that you can see a larger one - but obviously this won't be possible if I create just one image containing all 20 :/ Appreciate any advice, thanks! Link to comment Share on other sites More sharing options...
niche Posted July 20, 2012 Share Posted July 20, 2012 Create the square with float. http://www.w3schools.com/cssref/pr_class_float.asp Link to comment Share on other sites More sharing options...
ShadowMage Posted July 20, 2012 Share Posted July 20, 2012 Like niche said, use float. Put all the images in a container with a set height/width and overflow set to auto and float the images left (or right, doesn't really matter). The flash sites I've come across have the ability to actually click on/hover over the individual images so that you can see a larger one - but obviously this won't be possible if I create just one image containing all 20Well, actually, it can be done but it involves creating "click zones" using an image map, which is obviously more complex than the above method. Link to comment Share on other sites More sharing options...
WebFerret Posted July 26, 2012 Share Posted July 26, 2012 (edited) Copy the code below into a text editor and have a play with it. Put your images inside the div tags. <html><head><style>.box {float: left;padding: 5px;margin: 5px;width: 250px;height: 250px;background-color: #338833;}</style></head><body><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></body></html> Edited July 26, 2012 by WebFerret Link to comment Share on other sites More sharing options...
thescientist Posted July 27, 2012 Share Posted July 27, 2012 (edited) I'm looking to create a website with just one page, and on that page is minimal text but quite a few images - let's say 20 images. However, I want to have these images form a square (so obviously 5 across and 5 down). technically a 5 x 5 matrix would be 25 images Edited July 27, 2012 by thescientist Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now