Saturday, November 30, 2013

Disable large media queries - Twitter Bootstrap responsive layouts

All you have to do to find "container" in bootstrap.css and bootstrap-responsive, css and change
@media (min-width: 768px) {
  .container {
    width: 750px;
  }

@media (min-width: 992px) {
  .container {
    width: 780px; 


@media (min-width: 1200px)
->   @media (min-width: 1400px)

 {
  .container {
    width: 780px;


 .container,
  .navbar-static-top .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    width: 1170px;
  }
  .span12 {
    width: 1170px;
  }
  .span11 {
    width: 1070px;
  }
  .span10 {
    width: 970px;
  }
  .span9 {
    width: 870px;



 make it 780px wide :)

Grid System

http://960.gs/

http://www.getskeleton.com/

Monday, August 12, 2013

function - arguntent types

Now let's say we want to make sure that the caller always gets a numeric value back, even if the input wasn't of the right type.
To achieve that, we need to check the type of the argument that was passed in. If it wasn't a number, we probably shouldn't try to multiply it. We'll just return 0 in that case.

var cube = function (x) {
     if (typeof(x) !== 'number') return 0;
    return x * x * x;
};

// Once you uncomment the type check in line 2,
// the cube() function should return 0.
cube("test");

Sunday, August 11, 2013


> CSS: http://jigsaw.w3
> org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww
> turningleafwebanddesign.com%2Fhops%2Ftest-page.html [ Ignore any properly
> formed CSS 3 rules that are flagged ]

> HTML: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww
> turningleafwebanddesign.com%2Fhops%2Ftest-page.html [ Just correct the
> errors you have control over ]

> Validating:

> CSS: http://jigsaw.w3.org/css-validator/
> HTML: http://validator.w3.org/#validate_by_uri+with_options
> Unicorn - W3C's Unified Validator: http://validator.w3.org/unicorn/ 

Friday, August 2, 2013

rock scissors paper

var userChoice = prompt("Do you choose rock, paper or scissors?");
 var computerChoice = Math.random();

    if (computerChoice < 0.34)
        {
            computerChoice = "rock";
        }
    else if(computerChoice <= 0.67)
        {
            computerChoice = "paper";
        }
    else
        {
            computerChoice = "scissors";
        }

    var compare = function(choice1, choice2)
    {
      if (choice1 === choice2)
      {
     return "The result is a tie!";
      }
// CHOICE1 = ROCK
      if (choice1 === "rock")
      {
          if (choice2 === "scissors")
          {  return "rock wins";
          }
          else {  return "paper wins";
          }
        }
//CHOICE1 = PAPER       
    if (choice1 ==="paper")
    {
       if (choice2 === "rock")
       { return "paper wins";
       }
       else { return "scissors wins";
       }
    }  
// choice1 = scissors
 if (choice1 === "scissors")
   {
       if (choice2 === "rock")
       { return("rocks wins");
       }
       else { return ("scissors wins");
       }
   }
   
    };
   
    compare(userChoice, computerChoice);

Thursday, July 18, 2013

javascript notes

1. Confirm and prompt
console.log("I am ok"); 
We can make pop-up boxes appear!
confirm("I am ok");
prompt("Are you ok?");
2. Data types

a. numbers (e.g. 4.3, 134)

b. strings (e.g. "dogs go woof!", "JavaScript expert")

c. booleans (e.g. false, 5 > 4)
3. Conditionals

If the first condition is met, execute the first code block. If it is not met, execute the code in the else block. See the code on the right for another example


Data types

a. numbers - just use them like regular numbers

b. strings - anything between a " " is a string. Words have to be strings.

c. booleans - can only be true or false.
Variables
We store data values in variables. We can bring back the values of these variables by typing the variable name.
Manipulating numbers & strings

a. numbers - comparison operators, modulo
b. strings - length, substring
console.log( )
Prints into the console whatever we put in the parentheses.

---->Functions

var nameString = function (name) {
    return  console.log( "Hi. I am"+" " + name);
   
};
 nameString("eli");

 // alt ex

var orangeCost = function(price){
    console.log(price *5);
};

orangeCost(5);


// Parameter is a number, and we do math with that parameter

// alt ex
var timesTwo = function(number) {
    return number * 2;
};

// Call timesTwo here!
timesTwo(5);

Wednesday, July 17, 2013

Some sites to help you learn coding:

Treehouse is the best way to learn how to design and develop for the web and
iOS: http://teamtreehouse.com/
Code Academy: http://www.codecademy.com/#!/exercises/0
Online Editor to Teach HTML/CSS (Mozilla): https://thimble.webmaker
org/en-US/
Learn To Code: 10 Free And Fantastic Online Resources To Hone Your Skills:
http://www.makeuseof
com/tag/learn-code-10-free-fantastic-online-resources-hone-skills/
Make your web site faster: https://developers.google
com/speed/pagespeed/insights

55+ Extremely Useful Online Generators for Designers: http://www.balkhis
com/web-designs-resources/55-extremely-useful-online-generators-for-designers

Additionally:

How to Make a Web Page:

Knockout Tutorial: Build Dynamic, Interactive Web Pages Easily - http://www
elated.com/articles/knockout-tutorial/

Getting started with HTML: http://www.w3.org/MarkUp/Guide/
Comprehensive intro for HTML and CSS: http://htmldog.com/
Good reference for HTML, CSS and JavaScript: http://reference.sitepoint.com/
BASIC HTML & CSS for NON-WEB DESIGNERS: http://www.dontfeartheinternet.com/
Basic HTML Code / Tags For Simple Web Page: http://www.ibdhost
com/help/html/

HTML Examples: http://www.w3schools.com/html/html_examples.asp
Beginner's HTML Tutorial: http://www.htmlbasix.com/
How to Create a Webpage: http://www.make-a-web-site.com/
So, you want to make a Web Page!: http://www.pagetutor.com/html_tutor/index
html
Covers the basics of web standards-based design in HTML and CSS: http://dev
opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc
====================================

Choosing a Hosting Company? Use The Following Criteria:

http://www.webdesignbooth
com/choosing-a-hosting-company-use-the-following-criterias/
http://www.webhostingtalk.com/
The Best Web Hosting Services: http://www.makeuseof
com/pages/best-web-hosting-services?utm_campaign=newsletter&utm_source=2012-1
-12
Web Hosting Jury: http://www.webhostingjury.com/
Poll: Who Is the Best Web Host?: http://webmasterformat
com/find-a-host/poll-who-is-the-best-host

http://www.hosting-shopper.com/
http://www.rankpulse.com/www.siteground.com
http://b2evolution.net/web-hosting/top-quality-best-webhosting.php
Free DNS services to the Internet community: http://www.everydns.com/

Set Up a Lightweight Windows Web Server Quickly With Uniform Server:
http://www.makeuseof
com/tag/set-lightweight-windows-web-server-quickly-uniform-server/

Additionally:

Useful Tools/Info:

Google Web Toolkit (GWT): https://developers.google.com/web-toolkit/
Webmaster Tools: https://accounts.google
com/ServiceLogin?service=sitemaps&passive=1209600&continue=https://www
google.com/webmasters/tools/&followup=https://www.google
com/webmasters/tools/
Web Design Tips: http://www.webweaver.nu/html-tips/
Webmaster Frequently Asked Questions: http://www.thesitewizard.com/faqs/
Has someone stolen your content? Click to Get it Removed by DMCA Fast!:
http://www.dmca.com/takedowns.aspx?ad=cps

Backlink Generator: http://www.backlinkgenerator.net/
---------------
Sitemap Generators:

Create your Google Sitemap Online: http://www.xml-sitemaps.com/
How to Make a Site Map Freely in the Easiest and Quickest Way: http://www
sitemapx.com/how-to-make-a-site-map.html
http://www.web-site-map.com/
http://www.makeasitemap.com/
http://tools.webmasters.sk/sitemap-creator.php
http://www.automapit.com/

http://code.google.com/p/sitemap-generators/wiki/SitemapGenerators
Creating Sitemaps: http://support.google.com/webmasters/bin/answer
py?hl=en&answer=183668

> Might help:
>
> FitText.js plugin (FitText is a jQuery plugin that makes your font-sizes
> flexible, allowing headlines to automatically-expand to fit the available
> space): http://fittextjs.com/
> Adapt.js - Adaptive CSS: http://adapt.960.gs/
>
> responsivepx – screen-size testing tool: http://responsivepx.com/
>
> Sizing (Web) components (13Jul2013): https://medium.com/p/8f433689736f
> In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
> Choosing Dimensions for Your Web Page Layout: http://www.elated
> com/articles/choosing-dimensions-for-your-web-page-layout/
> How to create flexible sites quickly using standards like CSS and XHTML:
> http://www.ibm.com/developerworks/web/library/wa-rapid/
> Designing for the Web: Resolution and Size: http://sitepointcom.createsend4
> com/t/y/l/ydlyuyd/birtthtw/h/
> Care With Font Size: http://www.w3.org/QA/Tips/font-size
Good luck.

Tuesday, May 28, 2013

mysql notes

start mysql : $ sudo service mysql start

reconfig password
sudo dpkg-reconfigure mysql-server-5.5

replacing missing configuration files after removing a package

sudo apt-get remove --purge  [apache2 apache2-utils] 
 
sudo apt-get install [apache2]
 
 

Sunday, May 26, 2013

BUG LOCALHOST

apt-get purge libapache2-mod-php5 php5 && \
    apt-get install libapache2-mod-php5 php5
 
I justed removed the file again using 'rm -f 
conf.d'. It was gone. Then run  sudo apt-get autoremove 
libapache2-mod-php5 php5 /  sudo apt-get install libapache2-mod-php5 
php5. 
Same situation: conf.d is a broken symlink, php.ini is missing. Apache 
is running, but php is not working at all (downloading php-files) 
 
 
sudo service apache2 restart|stop|start  

Thursday, May 16, 2013

Type rendering

Type rendering: review, and fonts that render well

December 17, 2010

This is our seventh and final post in an ongoing series about type rendering on the web. Read the first, second, third, fourth, fifth, and sixth posts.
We’ve done a lot of research on type rendering, all of which has helped us understand why text looks the way it does on the web, and we hope you’ve enjoyed learning with us. Let’s review everything so far, and then look at a selection of fonts we trust to render well.
Type rendering is the product of many layers of technology. Operating systems, web browsers, font smoothing preferences, font files and outlines, hinting, and type design philosophy: All of these play a role in translating the beautifully drawn shapes of our favorite typefaces into pixellated screen text. So the next time you see a web font that looks excellent (or awful), consider the mix of responsible technologies at play.
No one way of rendering is “correct.” Users, as well as designers, have preferences and comfort zones when it comes to reading on screen. Some people believe this is a matter of familiarity — that we read best what we read most — and there’s no denying that the introduction of an unfamiliar rendering style can be met with resistance, even if that style is popular elsewhere.
Consider the debut of Safari for Windows — a marginal case we didn’t mention in the post about web browsers, but an intriguing bit of history. In that early version of the browser, Apple circumvented Windows OS text rendering engines by including its own OS X-style rendering directly within Safari. But Windows users didn’t like it: to their eyes, it looked thick, blurry, and unlike any other text on their operating system. While it remains an option, it’s now disabled by default.
A font’s rendering is mostly about its design intentions. The way a font looks on screen has as much — or more — to do with how it was designed to be used as it has to do with a technical preparation like hinting. Low contrast, open counters, and simple outline geometry are critical to a web font’s performance at low resolution — say, for paragraph text. But these same features make for odd-looking headline type.
Hinting is arduous, expensive, and only matters for a dwindling population of web users. Hinting, as you may recall, helps a font’s vector outlines conform to the pixel grid, and can involve anything from minor adjustments to size-specific, pixel precise instructions.
As Windows browsers begin to adopt Directwrite — which relies on TrueType instructions much less than previous Windows rendering engines — and screen resolution increases, the need for hinting is waning. Although the fruit of these advancements is a long way off, we can expect font rendering at all sizes to naturally improve. Meanwhile, we should heap praise on foundries who invest in hinting despite its shelf life.

Fonts that render well

Typekit users know that we regularly update the fonts in our library whenever our foundry partners release improvements. Today, we’ve also updated our lists of Paragraph and Headline fonts based on everything that we’ve learned and discussed in this series of blog posts.
From left to right: Minion Pro, Myriad Pro, DejaRip, FF Meta Serif Web Pro, and FF Dagny Web Pro
All of the fonts tagged Paragraph have been manually hinted to look great on screen at text sizes in every major browser/OS mix. Use these recommendations to make informed decisions about how well a font will render, knowing that they are backed up by Typekit’s font diagnostic tools.
Type rendering on the web is the result of many factors, and understanding these factors is the first step toward improving the way our web projects look, and read, on screen. While this series is concluding, we will continue to research new developments in type rendering, and share what we learn along the way. And as we look to expand Typekit’s library, we are paying careful attention to rendering quality and working closely with our foundry partners to ensure that their fonts meet our — and your — high standards.



Tuesday, May 14, 2013

-webkit-font-smoothing



In addition to the CSS3 text-rendering property AMK mentioned, there is also a Webkit (Chrome) specific hack for antialiasing: -webkit-font-smoothing: antialiased; (I believe the default value is subpixel-antialiased) which is nice to use since Webkit webfont rendering can be less than ideal on Windows machines in particular. A bit more info can be found here.

Wednesday, May 8, 2013

html5shiv

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
 
http://code.google.com/p/html5shiv/ 

Monday, May 6, 2013

css reset

 
 /*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
/* For modern browsers */
.cf:before, .cf:after {  content:"";    display:table; }
.cf:after {  clear:both;  }
/* For IE 6/7 (trigger hasLayout) */  .cf {  zoom:1;  }
 
 
 
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Wednesday, May 1, 2013

instaling photoshop cs6


Hello,

I've been trying to install CS6 on Ubuntu 10.04 using wine 1.5 (apparently wine 1.5 is only available for more recent os).
I ended up adding odbc32.dll and odbcint.dll using dll- fixer http://www.dll-files.com/dllindex/dll-files.shtml?odbcint  to correct the glitches

#wine setup
sudo add-apt-repository ppa:ubuntu-wine/ppa
sudo apt-get update
sudo apt-get install wine1.5

#change wine prefix
rm -rf .wine
WINEARCH=win32 WINEPREFIX=~/.wine winecfg

#get winetricks script
wget http://kegel.com/wine/winetricks

#setup dependencies
sh winetricks -q atmlib gdiplus ie6 vcrun2005sp1 vcrun2008 fontsmooth-rgb corefonts msxml3 msxml6 vcrun2010

# Configure wine install prefix and architecture
export WINEPREFIX=$PREFIX
export WINEARCH=win32
#
# Install dll files
winetricks atmlib
# Message from previous gdiplus install tryout:
# Please download NDP1.0sp2-KB830348-X86-Enu.exe from download.cnet.com/NET-Framework-1-0-GDIPLUS-DLL-Security-Update/3000-10250_4-10732223.html and place it in $HOME/.cache/winetricks/gdiplus, then re-run this script.
cp $DIRECTORY/CS6/DLL\ FILE/NDP1.0sp2-KB830348-X86-Enu.exe $HOME/.cache/winetricks/gdiplus/.
winetricks gdiplus
winetricks msxml3
winetricks msxml6
winetricks dotnet20
# dotnet20 install completed, but installed file $PREFIX/dosdevices/c:/windows/Microsoft.NET/Framework/v2.0.50727/mscorlib.dll not found
cp $DIRECTORY/CS6/DLL\ FILE/mscorlib.dll $PREFIX/dosdevices/c:/windows/Microsoft.NET/Framework/v2.0.50727/.
winetricks vcrun2005sp1
winetricks vcrun2008
# vcrun2008 install completed, but installed file $PREFIX/dosdevices/c:/Program Files/Common Files/Microsoft Shared/VC/msdia90.dll not found
cp $DIRECTORY/CS6/DLL\ FILE/msdia90.dll $PREFIX/dosdevices/c:/Program Files/Common Files/Microsoft Shared/VC/.
winetricks vcrun2010 


open setup. exe using wine

Friday, April 19, 2013

installing new fonts

https://wiki.ubuntu.com/Fonts
http://www.fontsquirrel.com/

There are various locations in GNU/Linux in which fonts can be kept. These locations are defined in /etc/fonts/fonts.conf; standard ones include /usr/share/fonts, /usr/local/share/fonts, and /home/<username>/.fonts (where <username> is your user name).
The easiest way to install a truetype font is to press alt-F2 and enter the following code (this will open nautilus in the right directory):
gksu nautilus /usr/share/fonts/truetype

Then create a new directory, name the directory whatever you like (choose a name that you remember if you ever need to backup your fonts personal fonts). Copy the fonts into that directory and finally rebuild the font information files by pressing alt-F2, mark 'run in terminal' so you can see the progress and entering the following code:
sudo fc-cache -f -v
 
 
 

Download and install all the Google Web Fonts in Ubuntu

 
TypeCatcher allows you to search, browse, and download Google webfonts for off-line use. You can preview fonts with adjustable size and text.

Install TypeCatcher in ubuntu
Open the terminal and run the following commands
sudo add-apt-repository ppa:andrewsomething/typecatcher
sudo apt-get update && sudo apt-get install typecatcher


 
 
done!!!! 

Monday, April 8, 2013

css - margin colapse

Vertical margin collapse

When two block-level elements are stacked on top of one another in normal document flow, their margins collapse. If the top and bottom margins of the two elements are equal in value, that value is used. If not, the greater of the two values is used to define the space between the elements.

This prevents paragraphs, headings, and other typographic elements from having "double-spacing" between the elements. It can, however, have unintended consequences for your layouts if you're not careful as the vertical margins of all elements collapse, not just textual elements.

This can be particularily tricky when you consider parent and child elements. Without something to keep the margins from touching (such as padding or a border), those margins collapse as well.

This means that if you set a top margin on a heading or paragraph inside a container element to hold it away from the top edge of the container, you're not guarenteed that you'll get the results you're after unless you account for margin collapse.

Xdebug

a free and open source  - a swiss army knife tool for PHP developers.
xdebug is a PHP extension created by Derick Rethans, one of the PHP core developers.
We will have a closer look at one of xdebug’s main features, namely tracing, profiling, debugging, and code coverage.

Installing the xdebug extension

First of all, we need to install xdebug. As I write this article, the current version is 2.0.1.
Since the internal PHP APIs may change between different PHP releases, you must make sure
that the version of xdebug you are installing matches the PHP version you are using.
xdebug does not work with any PHP versions before 4.3, and will probably not yet work with PHP 6.
This is not a real problem, however, since PHP 4 will reach its end of life in 2008,
and PHP 6 will probably not be available before the end of 2008. This gives you enough
time to get used to xdebug so you can use it as a helpful tool when it comes to migrating your PHP code
to work with the next major or minor PHP release

Installing on Unix

Before we dig into xdebug’s features, let us get the installation done.
On Unix, you can try installing xdebug through PECL, the PHP extension community library.
The PECL installation does not work on all systems, though. If the PECL installation does not
work out for you, you must compile xdebug from source. But first, try the PECL installation:
pecl install xdebug
If the PECL installation does not work for you, you need to compile xdebug from source.
In addition to a C compiler, you will need appropriate versions of the
usual build tools (Autoconf, Automake and Libtool). If they are not already installed
on your system, you can usually install them by running apt-get install build-essential

Furthermore, two helper programs, phpize and php-config that are a part of PHP, are required.
If you have not compiled PHP from source, you will probably have to install
the developer packages using your distribution’s package manager.
On Ubuntu or Debian, you can install the PHP development tools using a command like
apt-get install php5-dev.
Please note that phpize and php-config must match the PHP version you are using,
so do not just copy them to your system from some other PHP installation. When your development tools are in place, you can download and compile xdebug:

wget http://xdebug.org/link.php?url=xdebug201
tar -xzf xdebug-2.0.1.tgz
cd xdebug-2.0.1
phpize
./configure --enable-xdebug --with-php-config=/usr/bin/php-config
make
cp modules/xdebug.so /usr/lib/apache2/modules/xdebug.so
The php-config path may be different on your system,
and depending on the your Apache installation directory,
you may need to copy xdebug.so to another directory.
Instead of copying the file, you can of course create a link as well.

Installing on Windows

If you are a Windows user, you can download a compiled DLL from xdebug.org.
Select the PHP version you are using and click the appropriate link in the Windows modules section in the right column of the page.
You must use the non-debug version of PHP with xdebug. If you have downloaded PHP from php.net,
debugging should not be enabled. When in doubt, check the Debug Build entry in the phpinfo() output.
I would recommend putting the downloaded DLL into PHP’s extension directory ext, which should be a subdirectory of your PHP directory. You can put the DLL to any directory, provided that you state the full path to the DLL in php.ini.

Activating the xdebug extension

Now you have the xdebug extension ready, either as a shared object on Unix or a DLL on Windows.
To activate xdebug, you must add an entry to php.ini. On Windows, use:
zend_extension_ts="c:\php\ext\php_xdebug-2.0.1-5.2.1.dll"
On Unix, use:
zend_extension="/usr/lib/apache2/modules/xdebug.so"
instead. The path to PHP’s extension directory or Apache’s module directory may differ on your system. Make
sure you specify the full absolute path, not a relative path.
Please note that on Windows, we use zend_extension_ts, which means that a
thread-safe extension is loaded, whereas on Unix, we a non-threadsafe extension is loaded.
Depending on your system setup,
you must decide for yourself wether you need a thread safe or non-thread-safe extension.
If you are not sure wether your PHP installation is thread-safe,
check the Thread Safety entry in the phpinfo() output.
You should not load any other Zend extensions while working with xdebug,
because they would probably use the same internal mechanisms in the Zend engine,
which usually calls for trouble. Not all Zend extensions work together with xdebug.
Since you will probably use xdebug on a development system rather than a live system, this is
no serious limitation. The most important rule is to not mix xdebug with other PHP debugger extensions.
Having restarted your web server because we changed php.ini, you can check
the output of phpinfo() or run php -m at the command line.
In each case, xdebug must be listed twice, once as a PHP extension, and as a Zend extension as well.

Take care when you are updating PHP with xdebug installed. If the internal APIs change between the PHP
versions (which does not happen on every new version, but will certainly happen when you are close to a project deadline), the new version of PHP will probably not start or at least give you funny errors.
If need be, you can always get away with disabling xdebug, at least temporarily, to get an updated
PHP version to work and re-enable xdebug as soon as a new version is released that works with the newer API version.
There are quite some php.ini switches to configure xdebug,
but most of them have sensible deafult values,
so we can start using xdebug without worrying about configuration settings right now.
We will take a look at the most important configuration settings as we need to.

 



How browsers calculate unit values Using ems


Using ems

If ems are used in the font-size property, their value is calculated as a multiple of the parent element's font size. This eventually leads back to the device's default font size, set by either the device or the user.
This can make it very difficult to accurately predict what the calculated value will be for multiply nested elements. While this is generally not a problem regarding fonts (after all, the goal is to make elements relative to each other, not to know exactly what their calculated size will be), it can make it difficult to know which value to set for box model properties if you're approximating values based on default document font size.
If, on the other hand, ems are used for any other property, their value is calculated as a multiple of that element's font size, NOT the parent.

Using percentages

For the most part, percentages are pretty straightforward. Values are calculated based on the overall value of the parent element. For example, if you gave a block-level element a width of 100%, it would stretch as wide as possible, and only be restricted by the parent element.
For nested elements, you need to remember that a percentage is calculated relative to the parent, no matter how deep the element is. This can actually be very tricky in complicated layouts, as it is sometimes difficult to remember exactly which element the percentage is based on.
It's even more difficult when you mix percentages and other values. For example, if you set an element's width to 80% and set 20px worth of padding you need to remember that those values are cumulative. The total width of the element would be 80% of its parent, plus the 40px worth of horizontal padding.


One day soon, we'll be able to use root ems ("rem"). Root ems will allow you to set a value that is calculated based on the document's default font size, not the parent elements. This will give you additional flexibility when using ems within layout values, and make it easier to create em-based layouts.