background preloader

CSS Positioning 101

CSS Positioning 101
If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. In what might be a refresher for some, or even an “a-ha!” for others, let’s look at the CSS position property to see how we can use it to create standards-compliant, table-free CSS layouts. Article Continues Below CSS positioning is often misunderstood. Sometimes, in a bug-fixing fury, we apply different position values to a given selector until we get one that works. The CSS specification offers us five position properties: static, relative, absolute, fixed, and inherit. Get with the flow#section1 First, let’s take a step back to recognize the world we’re working in. Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Think of a “box,” as described by the spec as a wooden block—not unlike the ones you played with as a young whippersnapper. Static and relative—nothing new here#section2 In action#section6

Related:  HTML tech stuffLayout

CSS Floats 101 The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don’t fully understand how it works. Article Continues Below Also, in the past, it’s been linked to some pretty nasty browser bugs so it’s normal to get nervous about using the float property in your CSS rule sets. Let’s calm those nerves and ease that frustration. I’ll show you exactly what the float property does to your elements and how incredibly useful it can be once you master it.

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website Advertisement Many companies try to create a great experience for customers. But few are willing to make the changes required to deliver on that promise. Rounded corners and shadowed boxes Rounded corners and shadowed boxes This page was inspired by one created by Arve Bersvendsen. He has many more interesting CSS demos. CSS3 will have properties to make rounded borders, borders consisting of images and boxes with shadows, but with some work you can simulate some of them already with CSS2 — and without any tables or extra mark-up. Of course, rounded borders and shadows will be much simpler with CSS3. For example, to give a paragraph a thick red border with rounded corners, you would need just two lines of CSS3 similar to this:

Understanding CSS Floats Using css floats effectively can be confusing and it’s probably one of the things that trips up most people when they’re first learning css. However once you learn to control floated elements it opens up a whole new world of possibilities in your design and makes developing layouts much simpler. And best of all floats really aren’t that hard to work with once you understand a few key points. What is a Float? A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the ‘clear’ property).— Understanding z-index How to use it The six color boxes (A, a, B, b, C, c) are "draggable", which means you can use your mouse to position them anywhere in the page.The input elements in the colored fieldsets below let you set z-index and position values for each one of these six boxes. These fieldsets are color coded, which means a fieldset's background color matches the background color of the box it is supposed to style. Set and reset

The Mystery Of The CSS Float Property Advertisement Years ago, when developers first started to make the transition to HTML layouts without tables, one CSS property that suddenly took on a very important role was the float property. The reason that the float property became so common was that, by default, block-level elements will not line up beside one another in a column-based format.

Fluid Images Things are looking good so far: we’ve got a grid-based layout, one that doesn’t sacrifice complexity for flexibility. I have to admit that the first time I figured out how to build a fluid grid, I was feeling pretty proud of myself. Article Continues Below But then, as often happens with web design, despair set in. Understanding CSS3 Transitions It was 1997 and I was sitting in a terribly run-down apartment in beautiful Allston, Massachusetts. A typical late night of viewing source and teaching myself HTML followed a day of packing CDs at a local record label for peanuts (hence the run-down apartment). I’m sure you can relate. Article Continues Below One triumphant night, I pumped my fist in sweet victory.

Related:  intensitiesCoding