/CSS/ Create layouts with floating boxes
25/04/2007 | Filed under Develop > CSS
Based on the 2000AD Books website, Craig Grannell reveals how to generate a floating-boxes layout that’s ideal for an online portfolio. Even better, you can rework the result again and again
This edition, I am going to nobble three flying creatures with one hefty rock. Firstly, the main theme is using floating boxes to create a layout for accessing further content, based on the one at 2000AD Books. On that site, covers are displayed in reverse-chronological order of release date and the thumbnails provide access to further information on each title. When you place the cursor over one of the covers, the colour of its border changes to a vibrant hue, so it’s obvious that it’s clickable. Secondly, the system is adaptable, so it can be used for a range of sites!
The third ‘bird’ is reworking this system into a portfolio, so that you can have a specific example to play with. Note that because the gallery code is modular, you can totally rework the layout if you wish.
Click here to download the support files.
Click here to download the tutorial PDF.
Comments
ShoX / 25/04/2007 / 14:15 / http://shox.wordpress.com
very very good ...
I ever missed the code-examples and files you were talking about.
Very nice!
tankfully regards
ShoX
phill / 29/04/2007 / 14:48 / http://www.mediadesignusa.com
Nice Tutorial. I have used a similar technique in the past. I appreciate the javascript info on full resolution images displayed on roll over. I'm gonna try that the next time I do a portfolio page. Thanks.
Craig Grannell / 03/05/2007 / 17:23
Glad you both found it useful!
ken / 07/05/2007 / 18:05
since the hour of the piper has come then men re to be ver strong for them not to be wiped away be the piper of R n B
Mike / 08/05/2007 / 11:39 / http://www.feinkostseite.de/index.php
Very useful informations, thanks.
Liam Giles / 13/05/2007 / 21:19 / http://www.spindogs.co.uk
Great tutorial, thanks guys.
Werner Viljoen from South Africa / 16/06/2007 / 17:59
Thanx for the great tutorials and please keep up the good work. Much appreciated.
tomek / 27/06/2007 / 13:52 / http://www.profesjonalna-reklama.pl
Great css tutorial, thanks a lot!
Jen / 01/07/2007 / 03:37 / http://www.freebiescout.com/ps3guide.html
OOoh I really like the idea of the boxes becoming highlighted. I'm looking for new, non-standard ways of directing traffic flow around my sites. This looks like something I'd like to try (so much better than CLICK HERE!).
Joop / 02/08/2007 / 15:16 / http://www.mediafeeds.nl
I do like the Idea and the simplicity, but for me it doesn't function the way I would Like. The jumping to the top image works a little bit confusing. But on the other hand there are some simple solutions to avoid this effect
