Difference between revisions of "Css"

From Wiki2
Line 1: Line 1:
===floats and clears===
===floats and clears===
http://css-tricks.com/all-about-floats/
http://css-tricks.com/all-about-floats/
 
clearing floats
*The Empty Div Method is, quite literally, an empty div. <div style="clear: both;"></div>
*The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements
*The Easy Clearing Method uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like "clearfix" to it. Then apply this CSS:
<code lang="css"}
.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
</code>
===Resposive web design frameworks===
===Resposive web design frameworks===
http://gumbyframework.com/ built on saas
http://gumbyframework.com/ built on saas

Revision as of 11:41, 10 May 2014

floats and clears

http://css-tricks.com/all-about-floats/ clearing floats

  • The Empty Div Method is, quite literally, an empty div.
  • The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements
  • The Easy Clearing Method uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like "clearfix" to it. Then apply this CSS:

<code lang="css"} .clearfix:after {

  content: "."; 
  visibility: hidden; 
  display: block; 
  height: 0; 
  clear: both;

}

Resposive web design frameworks

http://gumbyframework.com/ built on saas

http://gumbyframework.com/docs/claymate/#!/

http://www.getskeleton.com/

color schemes

http://www.color-wheel-pro.com/color-schemes.html https://kuler.adobe.com/#create/fromacolor

tutorials

http://www.designer-daily.com/tutorial-how-to-code-your-psd-into-a-html-css-layout-15632
http://css.maxdesign.com.au/index.htm
missing manual tutorials in c://tim/books/teck/missing...