How to do graphical designs in CSS

[Michiel]

Hi,

recently I've become very interested in using CSS to build my websites. I've read several tutorials and I think I get the idea! I do however have one question about how to use CSS in graphical designs.

In the early days I always used tables to structure different images that provide the lay-out of the design. I began with a big photoshop image, then I used to cut it into smaller pieces and put it into my table structure.

An example of a typical table lay-out:


<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="heading1.gif"></td>
<td><img src="heading2.gif"></td>
<td><img src="heading3.gif"></td>
</tr>
<tr>
<td colspan="2"><img src="welcome.gif"></td>
<td><img src="heading4.gif"></td>
</tr>
</table>


Since the whole concept of using CSS for your website is to put nothing but content in your html, my question is where I should put the layout-images? How can I recreate such a graphical design, combining CSS and html in a proper way?

Thanks in advance for your replies,

Cheers, Michiel

[gsnedders]

You may as well use tables, but you might want to try floating divs (look at the FAQ).

[bradyj]

Fantastic -- I used to do this too, now CSS has made it easier -- instead of cutting up all your layouts to divide up table wise, try building them like photoshop layers, using the CSS:
z-index: 1;

as many numbers as you want, you can then stack images on top of each other rather than having to cut out partial images. As for getting rid of the image tags, using it as a background, I shift the text like so:
text-indent: -5000px;
to the css -- this allows the background image I have applied to show. Examples I'm working on:
Home site (http://www.dotfive.com)(no image tags)
Academy remake (http://www.dotfive.com/astest/)(no image tags)
new clients site (http://www.dotfive.com/faux) (image tags for content only)

It is a new way of thinking to create this way, but I have found that it is:
more reliable for exact look than tables
pixel perfect layouts all the time
simpler to create than cutting up lots of complex images all of the time

As for the last layout, I left the images of their work in the XHTML because it is a part of the content. It's not presentation like the pretty little background layouts and all that, it's the work they actually create, and that is important information that needs to be in the structure. Everything else is not needed.

I have many more I've done as well -- feel free to take it apart, download, steal, learn, and ask questions -- but keep learning this, it'll make you better at web design, faster -- cleaner layouts that are easier to update -- it mixes print design with web design very well:)

[JohnnyPotseed]

I used image slices to create the header for my site at Unifour Solutions (http://www.unifoursolutions.com). Since I couldn't find any tutorials covering this area specifically, I pretty much did it off the cuff. I can't say that this is the correct way of doing it., for my lack of experience precludes me from making such an assumption. I can say it works in current versions of IE6, Mozzila and Opera. I do have some other issues in Opera, but this involves the menu not the header section. I learned a good deal while doing this, but perhaps the most important thing I carried away from it is the importance of how the HTML is nested in regard to the use of CSS to create layers.

As Brady said, if there is anything here you find useful feel free to do with it as you please.......Good Luck
Evan

[bradyj]

You may find it easiest to post up your project, as well. I am willing, as many here are, to build with you as you go, and make recommendations along the way. I'll walk you through why I do what I do, other ideas out there, and + and - of each issue and technique.

Especially if you load the photoshop file up, I'll split it up and show you each individual element, and my code to structure it accordingly.

[mindlessLemming]

[off-topic]

new clients site (image tags for content only)

The red bg that shows while images are loading is insanely intense. It hurt my eyes even on the short period it was showing for. Is it really needed?
:eek:

[bradyj]

[off-topic]

The red bg that shows while images are loading is insanely intense. It hurt my eyes even on the short period it was showing for. Is it really needed?
:eek:

Which one, the swirly grapes or the painting of the people kissing? Neither needed, it's a mockup for the final build. Since this is offtopic, PM me if you got some input as to which one I should dump :thumbsup:

[ronaldb66]

[Back on topic]

There's no standard approach when converting a graphic design into a CSS/HTML solution.
Basically, the starting points should on one hand be the document structure on which the design is to be implemented, and on the other hand the design comp.
In the design, the different layers, components, sections etc. need to be identified; images that are strictly ornamental in nature should be implemented as backgrounds to elements from the document as much as possible, images that belong to the content can of course be handled as such (illustrations, charts, graphs, etc.).

I recently finished "More Eric Meyer on CSS" and in ten real-life projects the process of applying a graphic design onto a document using pure CSS can be experienced while looking over Eric's shoulder, as it were. Definitely recommended reading, in particular the making of CSS Zen Garden design no. 100 (15 Petals (http://www.csszengarden.com/?cssfile=/100/100.css&page=0), design by Dave Shea, CSS by Eric Meyer) was fascinating as Eric breaks the layered comp down into every detail piece by piece and works out the necessary CSS rules to "tack" 'em onto the document.

If you've got a comp and a document (template), we could give it a shot and try to come up with suggestions for a CSS solutuon.

[Michiel]

Hi guys,

thanx for your replies. I've been out of town for some town, so I haven't had the chance to give a reaction.

I would really appreciate it if you would take a look at the website that I want to convert to XHTML/ CSS. It concerns a page that I build some years ago for a student association I'm active in. It's location is www.maeur.nl/site.php.

One problem is that I don't have the photoshop files anymore (stupid .. i know ..). So I'm forced to use the actual gif's.

Well, I'm looking forward to your suggestions on how to convert this page to valid XHTML/ CSS!

Cheers, Michiel

[ronaldb66]

Well, without the original PS layers it's going to be a tough challenge and an optimal solution may not be obtainable, but here are a few ideas:

The large top left graphic can best be create as a whole as a background image, to a div holding the header section.
Alternatively, the bar holding the title, tagline and search box could be split off, using the graphic up to about the search box, with a background color replacing the blue running to the right (some serious pixel and color matching involved here).

The menu on the right can hold a sliced-off part of the main graph as background image, again with a blue background running all the way down.

The footer background image can be constricted to the rounded corner, but a further element inside the footer div would provide the blue horizontal bar.

For the "Activiteiten" box borders and heading, a technique similar to ALA's "Custom Corners & Borders (http://www.alistapart.com/articles/customcorners2/)" technique. If you restrict the width of the box, you can cut some corners (no pun intended), but I would recommend accounting for fluid hight, which shouldn't be too hard.

Anything I missed?