May/091
CSS Element Sizing
While working on our new UI at $work we ran in to issues using the YUI layout manager as its very quirky and hard to customize. So, I ended up writing an entirely new layout manager. As part of this I found that the way I thought elements resized was nothing like reality. I’m a big jQuery fan so this diagram below refers to jQuery methods, but the concept applies to CSS in general.
As you can see the height of an element represent only the internal height of the element, not taking in to account the margin, border, or padding. This I already knew, but I didn’t know how the corresponding jQuery methods fit in here. jQuery.height() has the same value as the CSS height attribute. jQuery.innerHeight is the CSS height plus the CSS top and bottom padding. jQuery.outerHeight() includes the CSS height, the top and bottom padding, and the top and bottom border. And, finally, jQuery.outerHeight(true) works the same as jQuery.outerHeight(), but also includes the top and bottom margin.
May/090
CSS Element Positioning
I spent a good day trying to completely understand how CSS positioning works. There are a lot of misconceptions and superstitious out there and I found many people answering questions about CSS positioning with answers that were completely false. So, I had to dispel the mystery. I think that w3schools.com explains the possible values for the CSS position property the best.
- static Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations).
- relative An element with position: relative moves an element relative to its normal position, so “left:20″ adds 20 pixels to the element’s LEFT position.
- absolute An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties.
So, relative positioning is EASY. Wherever the element would have been positioned in static positioning, is the 0,0 position for the relative element. Any top or left adjustments will be in relation to this point.
Absolute posotioning is where people get confused, it seems. When an elements position is abolute, its top and left positions are relative to it’s parent element’s top-most and left-most position, disregarding the parent element’s padding, as shown to the right.
May/091
Setting an Element’s Outer Size
When setting an element’s width or height you are setting the inner-most width and height, without taking in to account the padding, border, or margin. When writing application-like web sites this is not the behavior you want – usually you want exact control of the entire width and height of the element. Here’s a very simple jQuery plugin that I wrote to make this very easy to do.
var difference = this.outerWidth(true) - this.width();
return this.width( newWidth - difference );
};
jQuery.fn.setOuterHeight = function( newHeight ) {
var difference = this.outerHeight(true) - this.height();
return this.height( newHeight - difference );
};
Then all you have to do is use obj.setOuterWidth(…) instead of obj.width(…) to resize the entire element.
Iron Man
Planet Perl Iron Man Posts
- 学生諸君、Perlを勉強したまえ（ただし書き付き）
- Perl, PHP, corporate – continued.
- Doxygen を github-pages にあげるのをお気楽にやる方法
- The consequences of inclimate weather –or– Take an interest
- Pod パーザいろいろ
- Task::Kensho - Die besten CPAN-Module ausgewählt von der Enlightened Perl Organization
- on testing
- Heavy Boots of Lead
- Advanced Benchmark Analysis II: Probing strengths and weaknesses
- Ironboy is coming soon