Archive for July, 2007

Free CSS Layouts And Templates

Sunday, July 29th, 2007

As a web-developer you don’t have to re-invent the wheel all the time. If it just has to work, and has to be valid, and has to have a nice, visually appealing design hierarchy, you just can use css-techniques developed in the web-dev-community over the last few years. If you take a look around, you’ll find many templates, which include basic (X)HTML/CSS-markup.

Design: Layout (A List Apart articles)

Sunday, July 29th, 2007

Web page layouts: ways and means and meaning. Grids and rules; columns fixed, liquid, and elastic. Size, color, and contrast. To center or not to center. Layout and genre. Print paradigms and new media approaches. Let the web be the web. (36 articles)

CSS – Creating Liquid Layouts with Negative Margins

Sunday, July 29th, 2007

by Ryan Brill another great ‘A List Apart’ tutorial:

I was recently confronted with the task of creating a two-column liquid layout with a header and footer in which the content needed to come before the sidebar in the source code. I took opportunity to demonstrate an under-used aspect of CSS: negative margins. Negative margins allow us to push the content area away from the sides of the browser, leaving room for the sidebar.

CSS Positioning – Relatively Absolute by The Autistic Cuckoo

Sunday, July 29th, 2007

Web design usually means something more than just fonts, colours and graphical elements. It also implies some sort of layout. A web designer has three available tools for creating a layout:

  • tables,
  • floats,
  • positioning.

Layout tables belong in the last millennium. Floats are often the best solution, especially when you don’t know in advance which column will be the longest. Older browsers, and Internet Explorer, aren’t too good at dealing with floats, though. Besides, that’s a separate topic.

Positioning is perhaps one of the most misunderstood parts of CSS 2. Let us look a little closer at how it works

CSS Float Layouts – by The Autistic Cuckoo

Sunday, July 29th, 2007

Everything Does Not Float

Panta rhei, said Herakleitos, everything is floating. Even if the underlying philosophy, that everything is constantly changing, very much applies to the web, it doesn’t apply to today’s topic. To make an element float we have to say so explicitly, for instance like this: float:left

When we make an element floating, we ask the browser to shift it sideways, either to the left or to the right, as far as it will go.

Those who really understand the previous sentence already know half of what you need to know to use floats. There are three important pieces of information in that sentence, so let us examine them before we tackle the other, somewhat trickier, half.

CSS Positioning – Floats

Sunday, July 29th, 2007

There are a few things you should note regarding floated boxes. For one, the box being floated should have a width defined for it, either explicitly or implicitly. Otherwise, it will fill its containing block horizontally, just like non-floated content, leaving no room for other content to flow around it. As such, floated boxes are always treated as block boxes, even if they are defined using inline elements.

CSS Float basics – What is a float?

Sunday, July 29th, 2007

When you float an element it becomes a block box. This box can then be shifted to the left or right on the current line. The markup options are “float: left”, “float: right” or “float: none”.

Simple Physics

Sunday, July 29th, 2007

Posted at by Henry Woodbury on June 30, 2007 at 12:12 pm   

A simple, interactive Flash application at offers a mesmerizing glimpse into classical mechanics. By adjusting the location of two “planets” and the location and angle of two planes you can send a cascade of bouncy balls flying into space — or into orbit.

It’s like the spare, algorithmic, interactive version of this.

Good Illustrator Mesh Tutorial

Sunday, July 29th, 2007

CSS Float Theory: Things You Should Know

Sunday, July 29th, 2007

The concept of floats is probably one of the most unintuitive concepts in CSS. Floats are often misunderstood and blamed for floating all the context around it, causing readability and usability problems. However, the reason for these problems isn’t the theory itself, but the way the theory is interpreted – by developers