MonK-eYe

Some HTML elements have a dimension, a layout. Like <html>, <body>, <table>, <img>, <hr>, … <marquee>.

But other elements do not get an default dimension and that can cause problems of overlap, collapsing and whatnot. To prevent that, you need to give those elements a special property to set the HasLayout to true and prevent the ugly problems.

This is a very nice article on how to do that.

Another source on this subject: http://www.brunildo.org/test/InlineBlockLayout.html

#haslayout #css

Text 3
Notes zen coding, for the lazy people

Zen HTML the power of Zen HTML for me is in the:

1. selectors : # id . class > child + sybling

example:

div # name . class > h1 . title + p . intro
will render to:

< div id=” name ” class=” class “>

< h1 class=” title “></ h1 >

< p class=” intro “></ p >

</ div >

2. aliases : * multiplier $ index + prefabs

example * :

p *3
will render to:

< p ></ p >

example $*n:

select>option #item$*3
will render to:

< select >

< option id=”item1” ></ option >

< option id=”item2” ></ option >

< option id=”item3” ></ option >

</ select >

example +:

dl +
will render to:

< dl >

< dt ></ dt >

< dd ></ dd >

</ dl >

… check it out on http://code.google.com/p/zen-coding/

#zen-coding #HTML

Text

Todd Dominey, creator of SlideShowPro, joins Jeffrey Zeldman and Dan Benjamin to discuss making the transition from indy designer to employee to to business owner, his pioneering blog What Do I Know, Flash, HTML5, and more.

Links for this episode:

Text

Paul Ford joins Jeffrey Zeldman and Dan Benjamin to discuss the web, the future of publishing, microsites, branding , community, and more.

Links for this episode:

Text

We’re mixing it up for today’s episode of The Big Web Show. Instead of interviewing one or more amazing web innovators per our standard practice, Dan Benjamin and Jeffrey Zeldman interview each other.

Links for this episode:

Link nav bars

I am not very articulated about this subject jet, because there is so much said and done on the nav bar. Stay real!

But i love his imagery

typical nav bar

fully click with block display

#nav #css

Text

Jeffrey Zeldman and Dan Benjamin talk with Rich Ziade about how Arc90 manages the balance between product development and client services, and how to build a reputation when your client services agreements prevent you from having a public portfolio.

Links for this episode:

Photos

Soon baby, soon!

Dady is done with the cart design, now onto the harder stuff…

cabinets, electricity, plumbing and everything else that is on mommies long list of 2Do. Pregnancy madness! … smashing times

Text pseudo class notation, step 1 :nth types

From The Bible of CSS, W3C Proposed Recommendation

Example:

To represent all h2 children of an XHTML body except the first and last, one could use the following selector:
body > h2:nth-of-type(n+2):nth-last-of-type(n+2)
In this case, one could also use :not(), although the selector ends up being just as long:
body > h2:not(:first-of-type):not(:last-of-type)

This is not about W3C geek talk, but it is about mentality. Somewhere in this quote, its telling me this person who took the trouble of adding another option to this selection puzzle is feeling guilty about the mathematical first solution.

In my opinion, the 2nd selector is way more clear and should be favored for lots of reasons.

Anyway, these :nth type of pseudo classes are giving me an itch. And thats a fine thing in my book.

#notation #CSS #pseudo class

Text specificity or the importance of style declarations

When you style up your HTML with CSS, there can be more styles working on the same element. The specificity defines which rule wins.

example css rules:

body p.intro { color: red;}  // specificity (0,0,1,2)

p {color: gray;} // specificity (0,0,0,1)

#intro p {color: yellow;} // specificity (0,1,0,1)

What rule is dominant? That is the most important one, the one with the highest specificity. In this example, the style rules for a paragraph within the intro div are turning yellow, because the specificity of #intro p is the highest: 0,1,0,1 because of the use of the ID selector #intro

HIGH and LOW specificity

Every style rule can be made more important by adding more weight to the specificity. The (a,b,c,d) specificity is broken down to 4 weights, in order of importance:

a- inline styles // most important
b- #ID’s
c- .classes, [attributes], :pseudo-classes
d- <element> types and :pseudo elements

ALL combinators are ingnored and have a specificity of zero. As you can see the inline styles are king over any rule, so be carefull to use them. They can only be beaten by the !important style rule.

#specificity