EvoBloggito
Free XHTML/CSS Template for Use with Photoshop 4-Column Grids
Author: Ray Gulick; Published: Jun 1, 2009; Category: CSS, Design/Development; Tags: CSS, Download, Template, XHTML; No Comments
A couple of days ago, we made some 4-column grid Photoshop templates available. By popular demand (OK, 2 people asked; but we’ve had hundreds of downloads) we’re furnishing a basic, barebones XHTML/CSS template to be used with the Photoshop grids. The template and style sheet match up with the Photoshop file "1024browserbase_960.psd." To use this XHTML/CSS for the other Photoshop grid templates available, adjust column widths and margins in the style sheet as appropriate, using the information on the Photoshop templates as a guide.
To point out the obvious (if you’ve looked at the template), the style sheet contains minimal styling, and cannot be considered a completed or comprehensive style sheet: it contains just enough styling to make the example elements behave, and it makes no attempt to be pretty. It supports the basic 4-column grid structure, but is only a starting point for your own website based on the Photoshop grid templates. It’s not meant to be a template per se, but a basic "framework" you can use as a starter. The major page areas that are defined are the header, navigation, content (with maincontent and sidebar) and footer. Depending on your design, the homepage XHTML/CSS may be significantly more complex than the "inside page" example provided.
Use and modification of these templates requires a basic understanding of XHTML/CSS and Photoshop. We would love to have you point us to websites you create using these templates, or hear your feedback here on our blog. This template has been tested in Mac and Windows Firefox 3.0, Safari 3.2.3, IE6, and IE7. As with the Photoshop grids, the template is available under a Creative Commons license, to be used and abused in anyway you see fit. The documents validate as XHTML 1.0 Strict and CSS level 2.1.
Download XHTML/CSS 4-Column Template»
Related Posts
Keeping Safari (and Chrome) Hacks Out of Your Stylesheets
Creating a Faux Double Background with Absolute and Relative Position
Web Designer, Web Developer: What’s the Difference?
The Optimal Line Length Principle Applied to Web Design
Oops! There Goes Another Accessibility Mistake
Leave a Comment
Comments are welcome; even from those who disagree with me (especially from those who disagree). To see them published, put your name in the "Name" field, rather than the name of your business or keywords. Also, a comment that shows you read the post increases the chances your comment will be recognized as a legitimate comment and not spam. ;-)
Recent Posts
- Recent website launches: all WordPress, all the time
- Child Themes: A Sanity-saving Approach to Redesigning/Hacking WordPress Themes
- WordCamp Albuquerque: beyond expectations by any measure (and some code)
- WordCamp ABQ presentation: Build a powerful CMS with custom fields and custom post types
- What makes a good CMS?
- How to List Upcoming Events and Events Archive with Custom Post Types
- Why I’m abandoning a land line altogether: bye bye Qwest!
- Hilltop Landscaping: what a company blog should look like
Recent Comments
- Do I think Google mines the data? Of course! I'm sure they mine all the data on on Why Your Primary Business Email Account Should be Gmail
- So what if you're in a business or operating a web site that is or may be in com on Why Your Primary Business Email Account Should be Gmail
- I've stumble a website recently, its a WordPress blog with personalized plumbing on Wanted: A Plumber Who Wants to Grow His Local Business
- Thank you for this. on Quick Tutorial: Simple PHP and CSS to Highlight Current Navigation Section
- It's great to read something that's both enjoyable and provides pragmatic soluti on Because The Light is Better Here
- Great tutorial it works great! Thanks! on Quick Tutorial: Simple PHP and CSS to Highlight Current Navigation Section
