css
Get flash to fully experience Pearltrees
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…
Measuring and sizing UIs, 2011-style
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 :
CSS3′s ‘space’ and ‘round’ Values for background-repeat
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.
Things Worth Noting About CSS Attribute Selectors
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.
Center Multiple DIVs with CSS
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.
