background preloader


Facebook Twitter

How To Create an IE-Only Stylesheet. #40: How z-index Works. #42: All About Floats Screencast. Even more-so than z-index (which we covered a few weeks ago), the float property is known to cause episodes of hair-pulling and monitor-punching. It seems simple enough in theory, but there are plenty of quirks to watch out for. We go from start to finish in this screencast defining what float is, how it works, how and why to clear them, and some browser differences. Links from video: All About Floats. What is "Float"?

All About Floats

Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called "text wrap". Here is an example of that. In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it.

In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them. Setting the float on an element with CSS happens like this: There are four valid values for the float property. What are floats used for? Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts. Floats are also helpful for layout in smaller instances.

This same layout could be accomplished using relative positioning on container and absolute positioning on the avatar as well. Absolute Positioning Inside Relative Positioning. A page element with relative positioning gives you the control to absolutely position children elements inside of it.

Absolute Positioning Inside Relative Positioning

To some, this is obvious. To others, this may be one of those CSS "Ah-ha! " Moments. 10 CSS-Lifesavers For Efficient Web Design. 10 CSS-Lifesavers For Efficient Web DesignCSS has been hailed and cursed by many web designers and developers around the world.

10 CSS-Lifesavers For Efficient Web Design

On one hand, it makes our lives easier by separating content from style, which makes the entire process much more organized and easier to deal with. On the other hand, CSS has it's fair share of quarks, misunderstandings, and overall issues that bare some explanation. Today, we will go over 10 CSS lifesavers and tips for a more efficient web design process. 1. Learn how to use z-index properly The z-index property can be extremely useful when utilized properly. The secret to using z-index properly, is positioning. Check out the where can I learn more section below for some great links and screencasts on z-index.

Mastering the 960 Grid System. We're already familiar with the 12- and 16-column variants of, but did you know that a 24-column alternative exists too?

Mastering the 960 Grid System

In this article, you'll master the 960 grid system by dissecting the 24-column version demo. If you've only used 960gs before for Photoshop mockups, consider this your lucky day. By the end of this article, you'll be able to convert your designs to HTML and CSS in no time at all. Introduction. Driving the 960 Grid System. CSS frameworks are unflexible, overbloated and confusing.

Driving the 960 Grid System

Whoever said that, never used a CSS framework, or at least the 960 Grid System. I used to think that too, some time ago, but I did use the 960 Grid System to draw my templates. I didn’t care about the CSS, the columns, etc. All I used were the Photoshop templates with a preset grid of 960 pixels, which was pretty convenient for designing purposes. ‘How to design a portfolio site’ screencast. Posted on 13 July 2009 • 19 comments A few weeks ago Ryan asked me if I’d like to do a two-part screencast on designing online portfolios, and I thought it’d be a great idea, especially as — at the time — I was just putting the finishing touches to this new site.

‘How to design a portfolio site’ screencast

I also thought it’d be a good way of showing you some of the techniques I used rather than just writing about it on the blog. So, if you’d like to see me rambling on and looking rather red-faced indeed (I blame a combination of a crappy iSight camera, an unbearably hot week, and my wild-man beard), head over to Think Vitamin to check it out: By the way, if there’s anything particular you’d like to ask about the new site (why i did certain things, how I did certain things, etc.) that isn’t covered in the screencasts, please feel free to leave a comment below and I’ll answer as much as I can, either in a reply or a separate blog post. © 2005 – 2014 Elliot Jay Stocks. A Detailed Look at the 960 CSS Framework. CSS frameworks are bloated.

A Detailed Look at the 960 CSS Framework

Prototyping With The Grid 960 CSS Framework. Grid 960 is a CSS Framework that enables developers to rapidly prototype designs.

Prototyping With The Grid 960 CSS Framework

They are excellent tools for creating mock ups. Why? Because they do all the heavy lifting allowing you to get faster results. The 960 Grid System Made Easy. The first time I discovered the 960 Grid System, I was immediately excited about the possibilities of implementing complex layouts so easily.

The 960 Grid System Made Easy

However, since I was fairly new to web design at the time, when I downloaded the files, I quickly became overwhelmed at how complicated the whole thing seemed. With all this code, how could this be the easy way to create a layout? This article is for web designers and front-end web developers who are interested in grid-based layout systems but are at a loss on how to decipher them. We’ll focus specifically on the 960 Grid System, but after reading this guide, you’ll find that most of the other grid systems out there are similar and will make much more sense after you understand a few basic principles.