A List Apart: Articles: Flexible Layouts with CSS Positioning
A List Apart: Articles: Flexible Layouts with CSS Positioning
|
|
Need to spend less time on CSS hacking and more time on design? Dug Falby shares techniques for practical grid-building with CSS positioning.
Similar Posts
- Fluid Layout Using A Grid
- Adaptive Content
- Images In A Fluid Layout
- jQuery Masonry
- Smart Columns with jQuery & CSS
- Text Zooming
Pure CSS + HTML Calendar 2009
As self-proclaimed CSS experts, we must live, eat and breathe CSS – 25 hours a day. What better way to do this than by using a CSS + HTML calendar! Lovingly hand-crafted(tm) by Vladimir Carrer, the Grid Calendar is inspired by the Best of Calendar Design, and can be downloaded for free (can you believe it?)
This reminds me a lot of the designs posted on the 2007 elzr Infodesign challenge, as well as Adam Sporka’s Thumb Calendar which I am personally very fond of.
Perhaps there’s a designer out there with uber talent a lot of spare time who could take the Grid Calendar to the next level. It certainly could use a little more color, and those white spaces between the grids are making the nerve endings of my eyes do the polka dance. While we’re at it, let’s throw in a bunch of AJAX to turn our simple calendar into a leet app. Or maybe not.
Absolute, Relative, Fixed Positioning: How Do They Differ?
Tips, Tricks, and Techniques on using Cascading Style Sheets (CSS) … Absolute Positioning Inside Relative Positioning. Nine Techniques for CSS Image Replacement …A List Apart: Articles: CSS Sprites: Image Slicing’s Kiss of Death
Replace old-school image slicing with CSS … way CSS works, we’re going to take it further: by building a grid of images and …A List Apart: Articles: CSS Sprites: Image Slicing’s Kiss of Death
Replace old-school image slicing with CSS … way CSS works, we’re going to take it further: by building a grid of images and …CSS Layouts Tutorials, Cascading Style Sheets Tutorials, CSS Floats …
Beginners to advanced CSS techniques. … CSS Layouts and Positioning Basics, and Basic Techniques … CSS Positioning …
Those familiar with fluid / elastic layouts know that they can be a little more challenging to implement compared to fixed-width layouts. With the advent of wide-screen monitors, one of the biggest advantages of fluid-width layouts is the ability to maximize available space.
It was only a year ago when 1024×768 was still the dominant screen size. However, as of January 2009, 57% of the population are on desktops higher than 1024×768. The number of users still on 1024×768 has declined sharply from 48% of the previous year to a mere 36%. On the other than, the users on widescreen desktop are rapidly growing, thanks in part to marketing by HDTV makers.
Kayla Knight has written a very good article on the topic of building good websites with fluid layout.
She comes up with 6 techniques to do this, which can be summed up as follows:
She also provides helpful examples and links to all the necessary tools needed to achieve the perfect fluid / elastic layout. With this, designers are armed and ready for the next evolution in layout design.