All CSS Photo Album layout
If you have moved to using CSS instead of tables for layout, then you will probably find that you come up against problems that had a simple solution when using tables, but it is difficult to work out exactly how to get round them using CSS. A photo album – or other listing of images, with a grid of photo thumbnails with captions is one of these issues. In this article we will learn how to display these images using CSS and in a way that offers benefits over and above that which can be achieved with tables.
Advertisement Sliding Billboard
Discover the power of interactive presentations – the Sliding Billboard
! Organize your work greatly in a virtual book, which auto scrolls and
enables your users to slide from page to page or chapter to chapter
naturally. You can present any type of work this way: your portfolio,
photo albums, products index, web shop, ads and much more. Choose from
the 13 cool CSS designs included, so your billboard always looks great and suites your site perfectly.
Overview
As a result of following this article you will not only have
discovered a way in which you can replace tables-based grids for the
display of items like a photo album listing, but will also have learned
to use the useful float property in CSS, which has a whole range of
uses and can be put to use in creating interesting and creative effects
in your designs.
All the code is available for download.
Note: Check also the DMXzone own CSS Image Gallery extension for amazing pure CSS galleries and slideshows with a fluent navigation and image transitions!
Table of Content:
- Old-style layout using tables
- Photo Album layout using CSS
- Creating the document
- Creating space
- Adding a border to the image
- Setting the width of the layout
- Centering the layout
Rachel Andrew is a trained dancer and singer, whose CV lists jobs as diverse as company choreographer for a physical theatre company to chargehand carpenter for “The Mousetrap” at St. Martin’s Theatre in London’s West End. After leaving the theatre when pregnant with her daughter, Rachel started to design sites mainly out of curiosity into how it worked. It didn’t take too long for her to figure out that her skills lay in development as opposed to design and these days she tends to leave the design to designers so she can concentrate on writing code, dismantling computers and installing Linux on anything that stays still long enough.
Rachel has worked in the industry as a webmaster, technical project manager and senior web developer but in September 2001 set up her own company ‘edgeofmyseat.com’, which provides complete web solutions and outsourced development services for design agencies and Internet start-ups who do not have in-house web developers.
As well as managing and doing much of the development on projects for edgofmyseat.com Rachel is a published author and worked as a co-author on the following titles for Glasshaus:
Dynamic Dreamweaver MX ISBN:1904151108
Fundmental Web Design and development Skills: ISBN:1904151175
Dreamweaver MX Design Projects: ISBN:1904151272
Rachel is also a member of the Web Standards Project serving on The Dreamweaver Task Force.
In her spare time Rachel studies for ‘fun’ with the Open University, does family and local history research and spends time with her 5 year old daughter and her other half, Drew McLellan.
See All Postings From Rachel Andrew >>
Reviews
Be the first to write a review
You must me logged in to write a review.
