background preloader


Facebook Twitter

How To Create an IE-Only Stylesheet. #40: How z-index Works. #42: All About Floats Screencast. 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. 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. I remember it being a big deal for me when I first "got it". Here is a visual: The relative positioning on the parent is the big deal here. Might not look like a big deal in this small example, but it really is a significant change. Once you "wrap" your head around this concept (rim-shot) you will find little uses for it all over the place, and start noticing examples of other places using it.

How about some examples? 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. How can it help? Quite simply, it can help by providing the functionality it was meant to, layer objects/elements in a specific order. 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. A 960 Grid System Master—that's what you'll be after you've gone through this article. And, although we're going to use the 24-column variant of 960gs, you'll completely understand how the two older types (i.e., 12- and 16-columns) work too, by applying the same principles you'll learn here.

We first need to check the HTML code of the demo, so view its source—if you're using Chrome, Firefox, or Opera, just press ctrl+U; if you're using Internet Explorer, change your browser! That's pretty much all we need to prepare, aside from a semi-functioning brain. As you can see, 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. ‘How to design a portfolio site’ screencast. A Detailed Look at the 960 CSS Framework. CSS frameworks are bloated.

A Detailed Look at the 960 CSS Framework

CSS frameworks are for people who don't know how to code. CSS is too simple to implement a 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. That sounds nice, but how do we do that? There are a lot of articles on the internet blasting or supporting CSS frameworks, but none have any content to help inexperienced readers decide. 1. 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.