/CSS/ Integrate your images into grids
19/10/2009 | Filed under Develop > CSS
Craig Grannell looks at the difficulties of working with grid-based layouts that include images and columns – and comes up with some simple solutions
We’ve covered grids before in .net, most recently in issues 174 and 175. Images, however, have so far been absent from the tutorials and, as anyone who’s worked with grids probably knows, images can merrily wreak havoc on a grid-based layout. This month’s tutorial, therefore, looks at integrating images (and also columns) into a strict grid-based structure. Two methods are provided: one for an entirely pixel-based layout, and another for a flexible grid.
You may have just read ‘entirely pixel-based layout’ and wondered how far that goes. The answer is – all the way. You might not realise it, but we’re actually in the middle of another switch in the way fonts are dealt with on-screen – one that could prove controversial in some quarters, and therefore probably won’t become ubiquitous for a while.
Return of the pixel
In the past many web designers, coming from print backgrounds, used points (pt) to size fonts. They were duly given a slap and began using pixels (px), which was great until it arose that Internet Explorer wouldn’t zoom fonts sized that way. Designers worldwide sighed, swore at Microsoft and started arguing about a solution. In the end, most went with a combination of percentages and ems, setting a ‘baseline’ size of 62.5 per cent and then using ems a tenth of the target pixel size to size fonts. For a while, everyone was almost happy.
Now, however, a combination of factors are causing a rethink regarding font sizing. The most important is the way in which three of the four major browsers – Internet Explorer, Firefox and Opera – now deal with zooming. Rather than merely zooming text, these browsers now offer a full-screen zoom by default (although Firefox and Internet Explorer continue to offer text-only zooming as a legacy method). This means that if you find the onscreen content a wee bit small, everything can be zoomed – including images. Assuming Safari follows suit (which will mean Google’s Chrome should do as well), cunning trickery to size fonts will become pretty much redundant. Note that mobile devices such as the iPhone also make use of full-screen zooming, and they’re likely to rapidly increase in popularity over the coming months.
About the author:
Name: Craig Grannell
Site: www.snubcommunications.com
Areas of expertise: Information architecture, site concepts, graphics, interface and front-end design
Clients: Swim~, Rebellion, IDG
What would your ideal car be? One that uses air for fuel
Click here to download the support files
Click here to download tutorial PDF
Bonus links! More CSS articles over at Computer Arts: Design a liquid layout, make global styles in Dreamweaver and magazine-style layouts.
Bookmark with:
