CSS does the width include the padding? – Stack Overflow

by ⋅ Link

CSS does the width include the padding? – Stack Overflow

  • IE used to use the more-convenient-but-non-standard “border-box” box model. In this model, the width of an element includes the padding and borders. For example:
    #foo { width:10em; padding:2em; border:1em }
    would be 10em wide.

  • In contrast, all standards-fearing browsers default to the “content-box” box model. In this model, the width of an element does not include padding or borders. For example:
    #foo { width:10em; padding:2em; border:1em }
    will actually be 16em wide: 10em + 2em padding for each side, + 1em border for each edge.

If you use a modern version of IE with valid markup, a good doctype, and appropriate headers it will adhere to the standard. Otherwise, you can force modern standards-compliant browsers to use “border-box” via:

* {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box
}

The first declaration is needed for Opera, the second is for Firefox, the third is for Webkit and Chrome.

Here’s a simple test I made years ago for testing what box-sizing declaration your browser supports:http://phrogz.net/CSS/boxsizing.html

Note that Webkit (Safari and Chrome) do not support the padding-box box model via any declaration.

Css padding percentage value

by

When you use percents on the margin/padding then it is relative to it’s OWN WIDTH only. Not height. Not even if you do margin-top:100%. The computed value will be 100% of it’s width.

For exmaple, if you did margin-top:50%; and the width on the element was 800px, it would move it down 400px

참고 사항 (height 에 percentage 값으로 지정하는 경우)

height:100% implies the element is going to have the 100% height of its parent container.

height:auto means, the element will have flexible height i.e. its height will depend upon the height of children elements of it

what is asterisk (*) for in css

by ⋅ Link

It is a wildcard, this means it will select all elements within that portion of the DOM.

For example, if I want apply margin to every element on my entire page you can use:

* {
    margin: 10px;
}

You can also use this within sub-selections, for example the following would add a margin to all elements within a paragraph tag:

p * {
    margin: 10px;
}

Your example is doing some css trickery to apply consecutive borders and margins to elements to give them multiple coloured borders. For example, a white border surrounded by a black border.

Perfect Full Page Background Image | CSS-Tricks

by ⋅ Link

Perfect Full Page Background Image | CSS-Tricks

Four techniques are explored on accomplishing a full page background image that conforms to our exceptions: no white space, scales as needed, retains aspect ratio, centered, and more.

google analytics

by ⋅ Video


http://searchbusinessanalytics.techtarget.com/definition/Google-Analytics 에서 참조

Google Analytics is a free Web analytics service that provides statistics and basic analytical tools for search engine optimization (SEO) and marketing purposes. The service is available to anyone with a Google account. Google bought Urchin Software Corporation in April 2005 and used that company’s Urchin on Demand product as the basis for its current service.

Google Analytics features include:

• Data visualization tools including a dashboard, scorecards and motion charts, which display changes in data over time.

• Segmentation for analysis of subsets, such as conversions.

• Custom reports.

• Email-based sharing and communication.

• Integration with other Google products, such as AdWords, Public Data Explorer and Website Optimizer.

Google Analytics is geared toward small and medium-sized retail websites. The service has limitations that make it less suited to more complex websites and larger enterprises. For example, the system collects data through a JavaScript page taginserted in the code of pages the user wants to collect data on. The page tag functions as a Web bug to gather visitor information. However, because it’s reliant oncookies, the system can’t collect data for users who have disabled them. Google also uses sampling in its reports rather than analyzing all available data. 

Furthermore, some security experts have raised concerns about privacy issues in Google Analytics. Through the Google Analytics Dashboard, users can collect information on people whose websites link to social networking sites such asFacebook and Twitter. 

There are a number of commercial products for enterprises that require more advanced Web analytics, including those from Omniture, Webtrends, IBM’s Cognos product line and Oracle WebCenter.

CSS3 Mastery | Nettuts+

by ⋅ Link

CSS3 Mastery | Nettuts+

Find yourself persistently putting off learning new technologies, like CSS3? Then now’s your chance to catch up! In this session, we’ll teach you the ins and

http://net.tutsplus.com/sessions/css3-mastery/

::after css3 pseudo element

by ⋅ Video

Summary

The CSS ::after pseudo-element matches a virtual last child of the selected element. Typically used to add cosmetic content to an element, by using thecontent CSS property. This element is inline by default.

Syntax

element:after  { style properties }  /* CSS2 syntax */

element::after { style properties }  /* CSS3 syntax */

The ::after notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :after introduced in CSS 2.

Examples

Simple usage

Let’s create two classes, one for boring paragraphs and one for exciting ones. We can then mark each paragraph by adding a psuedo element to the end of it.

<p class="boring-text">Here is some good old boring text.</p>
<p>Here is some moderate text that is not either boring or exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.
Just hit the edit button to add new live samples, or improve existing samples.</p>
.exciting-text::after {
   content:    "<- now this *is* exciting!"; 
   color:      green;
}

.boring-text::after {
   content:    "<- BORING!";
   color:      red;
}

Sample Example 2

.ribbon{
    position:relative;
    width:50px;
    height:50px;
    background-color: #3BA8E7;
}
.ribbon:after{
    position:absolute;
    content: " ";
    width:50px;
    height:50px;
    top:20%;
    left:50%;
    background-color: #1578B1;
}

Live Sample : http://jsfiddle.net/Tripad/fbQTr/3/

Tooltips

The following example shows the use of the ::after pseudo-element in conjunction with the attr() CSS expression and a data-descr custom data attribute to create a pure-CSS, glossary-like tooltip. Checkout the live preview below, or you can see this example in a separate page.

<p>Here is the live example of the above code.<br />
  We have some <span data-descr="collection of words and punctuation">text</span> here with a few
  <span data-descr="small popups which also hide again">tooltips</span>.<br />
  Dont be shy, hove over to take a <span data-descr="not to be taken literally">look</span>.
</p>
    span[data-descr] {
        position: relative;
        text-decoration: underline;
        color: #00F;
        cursor: help;
    }

    span[data-descr]:hover::after {
        content: attr(data-descr);
        position: absolute;
        left: 0;
        top: 24px;
        min-width: 200px;
        border: 1px #aaaaaa solid;
        border-radius: 10px;
        background-color: #ffffcc;
        padding: 12px;
        color: #000000;
        font-size: 14px;
        z-index: 1;
    }