Measuring and sizing UIs, 2011-style. 7 December, 2011 For years we used pixels to lay out web pages. Then, not so long ago, we were dabbling with ems to make our pages elastic. Now, in 2011, most of us are adopting a responsive approach and using fluid grids and percentages. These methods seem to have all happened sequentially, with us each time dropping the last. I’ve decided, though, that the best builds use aspects of all previous methods; fixed, elastic and fluid. Using percentages… Let’s forget responsive design for a second. Now, fluid grids are a little tricky as they’re based around full grid systems. If your designer sends you a two-column design then all you need to do is work out not how big the respective columns are, but instead work out how much bigger one is than the other. Design is about proportions, not absolutes, and in ignoring actual pixel measurements in favour of relative ones you can ensure that designs are not tethered to numbers, but to proportions.
…or using nothing at all Using ems Line-heights Nothing. CSS3′s ‘space’ and ‘round’ Values for background-repeat. If you’ve seen the code for CSS3 border images then you’re probably familiar with the space and round values for the border-image-repeat property. Well, in the CSS3 spec, the well-known background-repeat property now includes those two new values (in addition to repeat, repeat-x, repeat-y, and no-repeat — all of which most CSS developers will be thoroughly familiar with). To demonstrate what these new values do, here are some screenshots and accompanying explanations. Value: repeat First, for comparison, here’s the code using a value of repeat: And naturally, you could express it in shorthand, like this: (The values transparent and 0 0 are just example values for background-color and background-position, but those aren’t really necessary.) And here’s the way it would look in your browser (this is a screen shot): Value: space Next, here’s the code in shorthand that uses a value of space: And here’s how it would look in a supporting browser (this is a screen shot): So what’s happening here?
Things Worth Noting About CSS Attribute Selectors. The main reason CSS attribute selectors have been avoided up to this point is their complete lack of support in IE6. But since IE6′s market share is continuing to slowly but steadily decline, it’s becoming safer to use them. I’m not going to go through the basics of CSS attribute selectors and their syntax.
There are some pretty good resources explaining them, which I’ll link to at the bottom of this post. So if you don’t have at least some grasp of what this CSS feature is all about, please check those out first. This article will go a little further and focus on some interesting facts and bugs surrounding attribute selectors that you may not have known. You Don’t Have to Specify an Actual HTML Element Normally when you see examples showing attribute selectors in action with accompanying code, you’ll see something like this: That’s perfectly valid CSS, and allows you to use the attribute selector in a more general way. “id” Is Not Equal to #id Suppose you have the following HTML: Center Multiple DIVs with CSS. At some point, you may have a situation where you want to center multiple elements (maybe <div> elements, or other block elements) on a single line in a fixed-width area.
Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center. There really should be a similar simple way to center multiple elements evenly spaced. It would be nice if CSS had a property called “box-align” which you could set to “center” then the child elements would be centered evenly within their parent. Well, you can achieve something similar by taking advantage of CSS’s flexibity with “recasting” elements (for lack of a better term). View a demo of what I’ll be describing in this short tutorial. The Usual Way Normally, in such a situation, you would just float the boxes, then add left and right margins to space them out accordingly. Use inline-block and control white space Drawbacks / Final Thoughts. Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser.
By Matthew James Taylor on 26 July 2008 A lot of people want centered menus on their website but for the CSS novice this task seems impossible. If you do a search online you will find a few centering methods but most of these rely on CSS hacks, JavaScript or non-standard CSS rules that are not supported by all browsers (display:inline-block; is an example).
In this post I'm going to show you my secret method of achieving centered tabs that does not use any CSS hacks and will work in all the common web browsers. It is also compatible with my perfect liquid layouts. Let's start with a basic example then I'll explain how it works. Centered Menu Basic Example Below you should see four horizontally centered tabs in this column of text, the second tab is set as active. See some more advanced centered CSS menu examples Centered Menu HTML The HTML used for centered menus is semantically structured and very basic. Centered Menu CSS Below is the CSS used to center the tabs across the page. Safari Mac.