While working on your resumes, many of you experienced the strange phenomenon of your code only occasionally ‘listening’ to your commands to adjust margin and padding to change placement. Inconsistencies regarding the result of paddingand margin are almost always due to the display setting of the element. We’ve already dealt with two types of display: inline and block. Inline elements, such as <span>, allow additional content to be displayed on the same horizontal line, but ignore commands like ‘width’ and ‘height’ and only adjust padding/margins horizontally. Block elements, like <div>, respond as one would predict to margin and padding rules, but block elements do not allow other elements to be displayed on the same line.
So, a new type of display setting is available: inline-block. An element set to ‘display:inline-block;‘ will listen to rules regarding width, height, padding and margin, but will also allow other elements to appear on the same line.
Here’s an excellent round-up of the display property, and specifically how inline-block works, which I recommend you read before Monday’s class:
http://css-tricks.com/almanac/properties/d/display/
Additionally, as we’ve mentioned in class, centering content can be tough. We’ve done the easy way (margin: 0 auto;), but that doesn’t always work. Here’s a great description of how to deal with centering issues:
http://css-tricks.com/centering-css-complete-guide/
Our next assignment regards layout, and I’ll ask each of you to sketch out three layouts (two ‘traditional,’ one creative). So start paying attention to the layout strategies of the Websites you check out. There are some kind of interesting ideas on Pinterest:
http://www.pinterest.com/symoimo/creative-web-layout-inspiration/
I’ll achieve some of our more bizarre layouts in part by utilizing the CSS ‘transform’ property, described here:
http://css-tricks.com/almanac/properties/t/transform/