Archive for the ‘CSS’ Category

Print stylesheet – the definitive guide

Saturday, August 11th, 2007

A print stylesheet formats a web page so when printed, it automatically prints in a user-friendly format. Print stylesheets have been around for a number of years and have been written about a lot. Yet so few websites implement them, meaning we’re left with web pages that frustratingly don’t properly print on to paper.

It’s remarkable that so few websites use print stylesheets as:

  • Print stylesheets enormously improve usability, especially for pages with a lot of content (such as this one!)
  • They’re phenomenally quick and easy to set

CSS Layouts

Saturday, August 11th, 2007

These CSS Layout offers full Grade-A browser support. That means that these CSS Layout will look and behave the same in internet browsers like Internet Explores 6 (IE6), Internet Explorer 7 (IE7), Firefox, Opera, Safari and so on. Since Search Engine Optimization (SEO) is very important to websites, these CSS layout has been optimized to give you the best possible search engine results. Use these CSS Layout anywhere you wish. It is perfect for Website templates, Blog themes, Content Management Systems (CMS) or as a starting point for your Web projects. Use these CSS Layout to optimize your Web Development workflow. These CSS Layouts are done in Pure CSS, not tables.

CSS Float Theory: Things You Should Know

Friday, August 3rd, 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 and browsers.

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”.