95 nice CSS Layouts


I’ve just checked out Code-Sucks.com which contains 95 well done CSS-layouts for free download. You’ll also find some website templates and code snippets for CSS, JavaScript and PHP.
You can choose between fixed and faux layouts with one or more columns. All layouts are W3C validated and have structured, minimalistic code.

Article postedPosted in @ 08/28/08

Using -moz-properties and staying W3 compliant


Mozilla has introduced some nice CSS-properties (extensions) with the Gecko-engine which is used by Firefox. As those properties were made “in-house”, they aren’t W3 compliant — the properties have their own syntax (@-moz, :-moz and -moz) and so they won’t be accepted by the W3C CSS Validation Service. But you don’t have to pass on the “-moz-properties” because there’s a simple workaround that let’s you use the properties and staying W3 compliant. If you’re using Firefox, just select any text on this site and you’ll see the -moz-property “::-moz-selection” in action.
I’m using a separate CSS-file that only includes -moz-properties. This Firefox-specific CSS-file is only included (additionally to the standard-CSS-file) if the user is browsing with Firefox. This inclusion/exlcusion can be achieved by using some simple lines of PHP.


Article postedPosted in @ 06/25/08

Using two background-images with CSS


You may have come across the problem that you wanted to have two different backgrounds on your website. For example, you have one background-image that is centered (a big graphic that has “repeat:no-repeat”) and another image that is a gradient or a pattern that repeats itself (“repeat:repeat-x”) horizontally. In order to use two background-
images on your entire website you don’t need a DIV that has “height:100%;
width:100%;margin:0px auto”
and so on. There’s a simple standard possibility that allows you to do exactly this.


Article postedPosted in @ 06/04/08

Separating your CSS into parts


When starting a new web-project it’s very helpful if you have some guidelines in mind how to structure the CSS-code because a CSS-file usually contains hundreds of lines. So building up a CSS with a structure may help a lot because you will be able to navigate your CSS-file very quickly. Here’s an approach of how your CSS could look like. Every web designer has his own style and techniques so this article shall just be a small help to improve the style of your CSS-coding.


Article postedPosted in @ 05/23/08

The CSS Box Model


This is a quick introduction into the world of CSS (Cascading Style Sheets) and its matrix called box model. This article adresses beginners in the fields of webdesign and CSS-development. In order to work with the following technique, you should be familiar with the basics of HTML-coding.
The methods of developing websites with the use of tables, frames or iframes are obsolete because the sourcecode of those techniques lacks quality (not XHTML conform, unnecessary sourcecode, not suitable for search engines and so on). You could be familiar with the use of tables in order to design your websites so at the beginning it may be a little difficult to switch to CSS.


Article postedPosted in @ 05/18/08

CSS-Layouts online


I’ve finished some readymade CSS-layouts which are available for download now. You can use them for your personal and commercial projects. The layouts have been tested on various browsers and are already browser-optimized so they can be “used-as-seen”.
The code of the HTML/CSS-files is handcoded so there aren’t any unnecessary lines or spaces. The layouts-section is ever-growing so there will be more layouts soon.

Article postedPosted in @ 04/09/08