Absolute Positioning Inside Relative Positioning
A page element with relative positioning gives you the control to absolutely position children elements inside of it. To some, this is obvious. To others, this may be one of those CSS "Ah-ha!" 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? I'd be delighted. View Demo Download Files Share On
equal height columns
by Matthew James Taylor on 17 October 2008 Creating equal height columns with CSS is not as easy as it may first seem. This tutorial highlights the display problems that occur with multiple column layouts, and then shows a simple solution that works in all common web browsers. The method shown here is 100% CSS hack-free, image-free and JavaScript-free so it can even be used on the most strictly coded websites. For those who want some action immediately check out my demo pages: 2 column, 3 column, 4 column and 5 column. The problem with equal height columns In the example above we have three columns each with a different amount of content. Separating the column content from it's background colour The first step to solving the equal height problem is to break it into smaller pieces that can be solved separately. A floated container div will always be the height of it's floated contents This is the central principle behind this equal column height method. Three column HTML div structure
Responsive Tables Demo
A quick and dirty look at some techniques for designing responsive table layouts. This was put together in haste (and with the aid of Twitter Bootstrap) for What Do You Know Brisbane hosted by Web Directions. I work for a really great little web design agency in Brisbane, and you should say hello. The Unseen Column This technique, first described by Stuart Curry (@irishstu) involves simply hiding less important columns on smaller screen sizes. Example Code The approach I've presented here assumes you know the index of the columns to be hidden. <table> <thead> <tr> <th>Code</th> <th>Company</th> <th class="numeric">Price</th> <th class="numeric">Change</th> <th class="numeric">Change %</th> <th class="numeric">Open</th> <th class="numeric">High</th> <th class="numeric">Low</th> <th class="numeric">Volume</th> </tr> </thead> <tbody> <tr> <td>AAC</td> <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED. Flip Scroll This technique was first published by David Bushell (@dbushell). No More Tables
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. 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. 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. Where can I learn more? Glad you asked! 2. The background property is one of the most frequently used properties of the CSS spec. 3. Good news. 4. 5. 6. <!
CSS Media Queries
We've covered using CSS media queries to assign different stylesheets depending on browser window size. In that example, we changed the layout of the entire page based on the space available. It isn't required that we make such drastic changes with this technique though, so in this tutorial we'll go over a design tweak with a smaller scope. We'll also cover the syntax for using media queries within a single stylesheet and more examples of that. The CSS media query syntax for calling an external stylesheet is like this: You may be familiar with the media attribute, normally being "screen" or "print" or even a comma separated list, like "screen, projection". Likewise, you can use more advanced CSS media queries like: You may use as many media queries as you would like in a CSS file. Example Let's say we have a fluid width design where the sidebar is 35% of the width of the page. In our example sidebar, we are going have a list of names of the Super Team which function as email links. Types
Responsive Data Tables
In addition to the techniques below, see this roundup of additional explorations of this problem. Garrett Dimon: Data tables don’t do so well with responsive design. Just sayin’. He has a good point. Responsive design is all about adjusting designs to accommodate screens of different sizes. So here’s what we are gonna do… We’re going to use “responsive design” principles (CSS @media queries) to detect if the screen is smaller than the maximum squishitude of our table. We’re being good little developers and using Plain Ol’ Semantic Markup here for our table. <table><thead><tr><th>First Name</th><th>Last Name</th><th>Job Title</th></tr></thead><tbody><tr><td>James</td><td>Matman</td><td>Chief Sandwich Eater</td></tr><tr><td>The</td><td>Tick</td><td>Crimefighter Sorta</td></tr></tbody></table> Our regular CSS is nothing special: The small-screen responsive stuff comes in now. Hey what about IE? <! See it View Demo This isn’t perfect… UPDATE: Other ideas View Demo
Mastering the 960 Grid System
We're already familiar with the 12- and 16-column variants of 960.gs, but did you know that a 24-column alternative exists too? 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, Good questions.
When can I use...
What is appropriate ordering of css selector? eg p.class or .class p
