good css and html5

8/12/2019 Good Css and Html5

1/23

>5 comments (/css3/create-fluid-layouts-html5-and-css3-3142768#comments-list)Mar 6, 2014 14:47 pm

Tweet

151 39

Like

80

C SS3 T UT OR IAL

Imgenes y Fotos Stockes.123rf.com

Navega Nuestra Extensa Coleccin y. Compra un Paquete de Crdito Hoy!

Sponsored byIntel HP

Essential JavaScr ipt: the topfive MVC frameworks

/javascript/essential-javascript-top-five- mvc-rameworks-11122767)

Create fluid layouts with HTML5 and

CSS3>

6

Share
http://www.googleadservices.com/pagead/aclk?sa=L&ai=Ch7G8pdYlU9CbH6PQigeXhYHYDo2ogrcEtdyfxJwB1b6p4NcCEAEgqIODJFDjt-o8YOXK5YO0DqABlZWd_gPIAQHgAgCoAwHIA58EqgTEAU_QXmfzkjzgif0TK9iDKcaWT0DB7OIZWt5uXZg2IDsyHKl2OhnIUgI6Es8LplJoEZhrL31a79Hkypa2g-GmJyGTs9xTGdr-Pn-d3HsK4HbGM8MHt0qWbKxZksF3C6nsvknUNb0eAfKe4VwiPscCwNGWAKJM0BzUoW5AU_5GwGlZgKG7QOzE-BLk7LwiyLjKyvaD2idyQgLDjud4Y7a0WhTKEt0o9DAUNd8ezykjRuI_gXr8sMo59ZLiuQuyf2lg4mniEa3gBAGIBgGAB9Pq4gE&num=1&cid=5GjMBE-G7zoCOSHmKFkRIndP&sig=AOD64_1ess1bTA9202uap3TdcA5iZM1MHw&client=ca-pub-3560785102412960&adurl=http://es.123RF.com/%3Fsrc%3Dgoogtrackad96http://www.creativebloq.com/javascript/essential-javascript-top-five-mvc-frameworks-11122767http://www.creativebloq.com/graphic-design/ustwo-release-pixel-perfect-precision-handbook-2-5132769http://www.creativebloq.com/javascript/essential-javascript-top-five-mvc-frameworks-11122767http://www.googleadservices.com/pagead/aclk?sa=L&ai=Ch7G8pdYlU9CbH6PQigeXhYHYDo2ogrcEtdyfxJwB1b6p4NcCEAEgqIODJFDjt-o8YOXK5YO0DqABlZWd_gPIAQHgAgCoAwHIA58EqgTEAU_QXmfzkjzgif0TK9iDKcaWT0DB7OIZWt5uXZg2IDsyHKl2OhnIUgI6Es8LplJoEZhrL31a79Hkypa2g-GmJyGTs9xTGdr-Pn-d3HsK4HbGM8MHt0qWbKxZksF3C6nsvknUNb0eAfKe4VwiPscCwNGWAKJM0BzUoW5AU_5GwGlZgKG7QOzE-BLk7LwiyLjKyvaD2idyQgLDjud4Y7a0WhTKEt0o9DAUNd8ezykjRuI_gXr8sMo59ZLiuQuyf2lg4mniEa3gBAGIBgGAB9Pq4gE&num=1&cid=5GjMBE-G7zoCOSHmKFkRIndP&sig=AOD64_1ess1bTA9202uap3TdcA5iZM1MHw&client=ca-pub-3560785102412960&adurl=http://es.123RF.com/%3Fsrc%3Dgoogtrackad96http://www.googleadservices.com/pagead/aclk?sa=L&ai=Ch7G8pdYlU9CbH6PQigeXhYHYDo2ogrcEtdyfxJwB1b6p4NcCEAEgqIODJFDjt-o8YOXK5YO0DqABlZWd_gPIAQHgAgCoAwHIA58EqgTEAU_QXmfzkjzgif0TK9iDKcaWT0DB7OIZWt5uXZg2IDsyHKl2OhnIUgI6Es8LplJoEZhrL31a79Hkypa2g-GmJyGTs9xTGdr-Pn-d3HsK4HbGM8MHt0qWbKxZksF3C6nsvknUNb0eAfKe4VwiPscCwNGWAKJM0BzUoW5AU_5GwGlZgKG7QOzE-BLk7LwiyLjKyvaD2idyQgLDjud4Y7a0WhTKEt0o9DAUNd8ezykjRuI_gXr8sMo59ZLiuQuyf2lg4mniEa3gBAGIBgGAB9Pq4gE&num=1&cid=5GjMBE-G7zoCOSHmKFkRIndP&sig=AOD64_1ess1bTA9202uap3TdcA5iZM1MHw&client=ca-pub-3560785102412960&adurl=http://es.123RF.com/%3Fsrc%3Dgoogtrackad96http://twitter.com/search?q=http%3A%2F%2Fwww.creativebloq.com%2Fcss3%2Fcreate-fluid-layouts-html5-and-css3-3142768https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fwww.creativebloq.com%2Fcss3%2Fcreate-fluid-layouts-html5-and-css3-3142768&text=Create%20fluid%20layouts%20with%20HTML5%20and%20CSS3%20%40CreativeBloQ&tw_p=tweetbutton&url=http%3A%2F%2Fwww.creativebloq.com%2Fcss3%2Fcreate-fluid-layouts-html5-and-css3-3142768


2/23

Ben Frain explains h ow to create fluid layouts by convert ing

pixel-based grids to proportions.

When I first started making websites at the end of the 1990s, layout

structures were table-based. More often than not, sectioning up screen

real estate was done with percentages. For example, a left navigation

column might be 20 percent whilst the main content area would be 80

percent. There weren't the vast differences in browser viewports we see

today, so these layouts scaled well across the limited range of viewports.

Nobody much cared that sentences looked a little different on one screen

compared to another. However, as CSS-based designs took over, it

enabled web-based designs to more closely mimic print. With that

transition, for many (including myself), proportionally based layoutsdwindled for many years in favor of their rigid, pixel-based

counterparts.

But like all things, proportional designs have come back around. The

Mini, permed hair (I wish!) and flaredjeans have all made their

comebacks over the years. Now, it's time for proportional layouts to

make a re-appearance.


3/23

As I mentioned, since the 'table layout' days, I've had little call to use

proportional layouts. Ty pically, I've been asked to code HTML and CSS

that best matches a design composite that almost always measures

950-1000 pixels wide. If the layout was ever built with a proportional

width (say, 90 percent), the complaints would have arrived quickly: "It

looks different on my monitor". Web pages with fixed, pixel-based

dimensions were the easiest way to match the fixed, pixel-based

dimensions of the composite.

Even in more recent times, when using media queries to produce a

tweaked version of a layout specific to a certain popular device such as

an iPad or iPhone, the dimensions could still be pixel-based, as the

viewport was known. However, while developers might enjoy the

possibility of re-charging a client each time they need a site tweaked for

today's newest gizmo, it's not exactly a future-proof way of building web

pages. As more and more varied viewports are being introduced, weneed some way of provisioning for the unknown.

Whilst media queries are powerful, we are now aware of somelimitations. Any fixed-width design, using only media queries to adapt

for different viewports, will merely 'snap' from one set of CSS media

query rules to the next with no linear progression between the two.

Software: Text editor, browser

Project time:1-2 hours

Skills: Learn why proportional layouts are necessary for responsive

design, convert pixel-based element widths to proportional percentages,

convert pixel-based typography sizes to their em-based equivalent,

understand how to find the context for any element

Support file(http://mos.creativebloq.com/tutorials/2012/netmag-

create-fluid-layouts-with-html5-and-css3.zip)

01. Fixed layouts aren't future-proof

02. Why proportional layouts are essential

for responsive designs
http://mos.creativebloq.com/tutorials/2012/netmag-create-fluid-layouts-with-html5-and-css3.zip


4/23

Instead, we want to create a design that flexes and looks good on all

viewports, not just particular ones specified in a media query. I'll cut to

the chase: we need to switch our fixed, pixel-based layouts to fluid,

proportional ones. This will enable elements to scale relative to the

viewport until one media query or another modifies the sty ling.

Ethan Marcotte wrote the definitive article

(http://www.alistapart.com/articles/responsive-web-design/) on

Responsive Web Design at A List Apart. Whilst the tools he used (fluid

layout and images, and media queries) were not new, the application and

embodiment of the ideas into a single coherent methodology was. For

many working in web design, his article was the genesis of new

possibilities new ways to create web pages that offered the best of

both worlds: a way to have a fluid flexible design based on a proportional

layout, whilst being able to limit how far elements could flex with media

queries. Putting them together forms the core of a responsive design,

creating something truly greater than the sum of its parts.

For the foreseeable future, any design composite you receive or create is

likely to have fixed dimensions. Currently we measure (in pixels) the

element sizes, margins, and so on within the graphics files from

Photoshop, Fireworks, and so on. We then punch these dimensions

directly into our CSS. The same goes for text sizes. We click on a text

element in our image editor of choice, note the font size, and then enter

the value (again, often measured in pixels) into the relevant CSS rule. So

how do we convert our fixed dimensions into proportional ones?

03. Proportional layouts and media queries

04. Amending a design from a fixed to a

proportional layout

05. A formula to remember
http://www.alistapart.com/articles/responsive-web-design/


5/23

It's possible I'm coming off as too much of an Ethan Marcotte fanboy,

but at this point it's essential that I provide another large tip of the hat

(it should probably be a bow, maybe even a kneel) to him. In Dan

Cederholm's excellent book, Handcrafted CSS

(http://handcraftedcss.com/), Mr. Marcotte contributed a chapter

covering fluid grids. In it, he provided a simple and consistent formula

for converting fixed width pixels into proportional percentages:

target context = result

Does that smell a bit like an equation to you? Fear not, when creating a

responsive design, this formula soon becomes your new best friend.

Rather than talk any more theory, let's put it to work converting the

fixed-dimension design for the fictional movie website And The Winner

Isn't... (http://www.andthewinnerisnt.com/index.html) to a fluid

percentage-based layout.

At the minute, the basic markup structure of the site looks like this:

06. Embracing Fluid Layouts

1.

2.

3.

4.

5.

6. navigation1

7. navigation2

8.

9.

0.

1.

2. 3. here is the

sidebar

4.

5.

6.
http://december.com/html/4/element/div.htmlhttp://december.com/html/4/element/div.htmlhttp://december.com/html/4/element/p.htmlhttp://december.com/html/4/element/p.htmlhttp://december.com/html/4/element/div.htmlhttp://december.com/html/4/element/div.htmlhttp://december.com/html/4/element/div.htmlhttp://december.com/html/4/element/ul.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/ul.htmlhttp://december.com/html/4/element/div.htmlhttp://december.com/html/4/element/div.htmlhttp://december.com/html/4/element/div.htmlhttp://www.andthewinnerisnt.com/index.htmlhttp://handcraftedcss.com/


6/23

What's important to note here is the CSS we are currently using to set

the widths of the main structural (header, navigation, sidebar, content,

and footer) elements. I've omitted many of the styling rules so we can

concentrate on structure:

7. here is the

content

8.

9.

0.

1. Here is the

footer

2.

3.

1. #wrapper {

2. margin-right: auto;

3. margin-left: auto;

4. width: 960px;

5. }

6. #header {

7. margin-right: 10px;

8. margin-left: 10px;

9. width: 940px;

0. }

1. #navigation {

2. padding-bottom: 25px;

3. margin-top: 26px;

4. margin-left: -10px;

5. padding-right: 10px;

6. padding-left: 10px;

7. width: 940px;

8. }

9. #navigation ul li {

0. display: inline-block;

1. }

2. #content{



5. float: right;

6. width: 698px;

7. }

8. #sidebar {9. border-right-color: #e8e8e8;

0. border-right-style: solid;

1. border-right-width: 2px;





6. float: left;

7. width: 220px;

8. }

9. #footer {

0. float: left;1. margin-top: 20px;



4. clear: both;

5. width: 940px;

6. }
http://december.com/html/4/element/div.htmlhttp://december.com/html/4/element/div.htmlhttp://december.com/html/4/element/p.htmlhttp://december.com/html/4/element/p.htmlhttp://december.com/html/4/element/div.htmlhttp://december.com/html/4/element/div.htmlhttp://december.com/html/4/element/p.htmlhttp://december.com/html/4/element/p.html


7/23

All the values are currently set using pixels. Let's work from the

outermost element and change them to proportional percentages using

the target context = resultformula.

All our content currently sits within a div with an ID of #wrapper. You

can see by the CSS above that it's set with automatic margin and a width

of 960 px. As the outermost div, how do we define what percentage ofthe viewport width it should be?

We need something to 'hold' and become the context for all theproportional elements (content, sidebar, footer, and so on) we intend to

contain within our design. We therefore need to set a proportional value

for the width that the #wrappershould be in relation to the viewport

size. For now, let's knock off a nought and roll with 96 percent and see

what happens. Here's the amended rule for #wrapper:

And here's how it looks in the browser window:

07. Setting a context for proportional

elements

1. #wrapper {

2. margin-right: auto;3. margin-left: auto;

4. width: 96%; /* Holding outermost DIV */

5. }


8/23

So far, so good! 96 percent actually works quite well here, although we

could have opted for 100 or 90 per cent whatever set the design

within the viewport in the most aesthetically pleasing manner.

Changing from fixed to proportional gets a little more complicated as we

move inwards. Let's look at the header section first. Consider the

formula again: target context = result. Our #header div(the target)

sits within the #wrapper div(the context). Therefore, we take our

#header(the target) width of 940 pixels, divide it by the width of the

context (the #wrapper), which was 960 px, and the result is

.979166667. We can turn this into a percentage by moving the decimal

place two digits to the right and we now have a percentage width for the

header of 97.9166667. Let's add that to our CSS:

The site with a #wrapper width setting of 96%>

1. #header {



4. width: 97.9166667%; /* 940 divided by 960 */


9/23

And as both the #navigationand the #footerdivs also have the same

declared width, we can swap both of those pixel values to the same

percentage-based rule.

Finally, before we take a peek in the browser, let's turn to the

#contentand #sidebardivs. As the context is still the same (960 px),we just need to divide our target size by that figure. Our #contentis

currently 698 px, so divide that value by 960 and the answer is

.727083333. Move the decimal place and we have a result of

72.7083333 percent that's the width of the #content divin

percentage terms.

Our sidebar is currently 220 px but there's also a 2 px border to

consider. I don't want the thickness of the right-hand border to expand

or contract, so that will stay at 2 px. Because of that, I need to subtract

its thickness from the width of the sidebar, then perform the same

calculation. Divide the target (now 218 px) by the context (960 px) and

the answer is .227083333. Shift the decimal and we have a result of

22.7083333 percent for the sidebar.

After amending all the pixel widths to percentages, the relevant CSS

looks like this:

5. }

A ds by Media P lay er

zY7Nzs4O zk7MTA 7MTE7M TI7MTM 7MTQ mYT02MjA wJnM9MTA wM SZ3PXd3dy5jcmV hdGl2ZWJsb3EuY29tJmI9YmQy JnJkPSZy aT0=)

1. #wrapper {

2. margin-right: auto;

3. margin-left: auto;4. width: 96%; /* Holding outermost DIV */

5. }

6. #header {



9. width: 97.9166667%; /* 940 divided by 960 */

0. }

1. #navigation {

2. padding-bottom: 25px;


4. margin-left: -10px;


6. padding-left: 10px;

7. width: 72.7083333%; /* 698 divided by 960 */

8. }


0. display: inline-block;
http://rvzr-a.akamaihd.net/sd/apps/adinfo-1.0-p/index.html?bj1NZWRpYSBQbGF5ZXImaD1ydnpyLWEuYWthbWFpaGQubmV0JmM9Z3JlZW4mbz13c2FyJmQ9JnQ9MTsyOzM7NDs1OzY7Nzs4Ozk7MTA7MTE7MTI7MTM7MTQmYT02MjAwJnM9MTAwMSZ3PXd3dy5jcmVhdGl2ZWJsb3EuY29tJmI9YmQyJnJkPSZyaT0=http://sin1.g.adnxs.com/click?U-QQcXMq2T7T6IK4emfXPh-F61G4HuU_0-iCuHpn1z5U5BBxcyrZPoDfNXdwsgsn61tjDk3JhE861yVTAAAAAIMFJABfAAAA2gYAAAIAAADOs7sAie8EAAAAAQBVU0QAVVNEANQBPAAozgAA8YcAAQUCAQIAAIwApigMDAAAAAA./cnd=%21qwb8Pgic4rYBEM7n7gUYid8TIAI./referrer=http%3A%2F%2Fwww.creativebloq.com/clickenc=http%3A%2F%2Fclickus.datropy.com%2Fst%3Fcipid%3D169030%26ttype%3D1%26crid%3D1058378%26dast%3DYm89MSZzbGlkPTAmc3ViaWQ9MTAwMSZzbz0xJmNpY21wPTk4Mzk4JnB1YmlkPTYyMDAmY2lwaWQ9MTY5MDMwJmNpc2lkPTJCNkQ3QzlFQTM5MjE0MDc1MTA3OTk3NzgmY2lyaWQ9MkI2RDdDOUVBMzkyMTQwODU4Mzg1NTMxMSZjaXVpZD0tNTEyMzM1OTk2ODQxMjM3MTY0OSZjcmlkPTEwNTgzNzgmZXhjaWQ9MjImbW10PS0xJmNudHJ5PTk4%26cmcv%3D%24%7BCMCV%7D%26tgtf%3Dhttp%253A%252F%252Flp.jzip.com%252F%253Fsysid%253D102%2526appid%253D327%2526subid%253Dsin1COu3jfPQqbLCTxACGIC_17mHzuyFJyINMTE3LjIwMi42Ni44NSgBMLqul5kF


10/23

The following screenshot shows the result in Firefox with the viewport

around 1000 px wide:

1. }

2. #content{



5. float: right;

6. width: 72.7083333%; /* 698 divided by 960 */

7. }

8. #sidebar {

9. border-right-color: #e8e8e8; border-right-style:

solid; border-right-width: 2px; margin-top: 58px;

0. margin-right: 10px;1. margin-left: 10px;

2. float: left;

3. width: 22.7083333%; /* 218 divided by 960 */

4. }

5. #footer {

6. float: left;




0. clear: both;

1. width: 97.9166667%; /* 940 divided by 960 */

2. }


11/23

Let's take some time out from the layout to consider the issue of decimalprecision. Some critics of responsive design techniques (for example, see

this article by James Pearce (http://tripleodeon.com/2010/10/not-a-

mobile-web-merely-a-320px-wide-one/)) argue that entering numbers

such as .550724638 em into stylesheets is daft. You may wonder

yourself why they aren't simply rounded to something more sensible.

The counter-argument is that unrounded values are a more accurate

answer to the question being asked. Providing a browser with the mostaccurate answer should make it more able to display that answer in the

most accurate manner.

The developing fluid layout, viewed in Firefox>

08. Can't we just round the numbers?
http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one/


12/23


13/23

Furthermore, if I expand my viewport, the margin between the links

doesn't increase proportionally. Let's take a look at the CSS associated

with the navigation and try and figure out why:

Notice the problem with the s ite navigation?>

1. #navigation {

2. padding-bottom: 25px;3. margin-top: 26px;

4. margin-left: -1.0416667%; /* 10 divided by 960 */

5. padding-right: 1.0416667%; /* 10 divided by 960 */

6. padding-left: 1.0416667%; /* 10 divided by 960 */

7. width: 97.9166667%; /* 940 divided by 960 */

8. background-repeat: repeat-x;

9. background-image: url(../img/atwiNavBg.png);

0. border-bottom-color: #bfbfbf;

1. border-bottom-style: double; border-bottom-

width: 4px;

2. }

3. #navigation ul li {4. display: inline-block;

5. }

6. #navigation ul li a {

7. height: 42px;

8. line-height: 42px;



14/23

Our third rule, the #navigation ul li a, still has a pixel-based margin

of 25 px. Let's go ahead and fix that with our trusty formula. As the

#navigation divis based on 940 px, our result should be 2.6595745

percent. So we'll amend the code as follows:

That was easy enough! Let's just check all is okay in the browser...

0. text-decoration: none;

1. text-transform: uppercase;

2. font-family: Arial, "Lucida Grande", Verdana, sans-

serif;

3. font-size: 27px;

4. color: black;

5. }


2. height: 42px;


4. margin-right: 2.6595745%; /* 25 divided by 940 */

text-decoration: none;



serif;

7. font-size: 27px;

8. color: black;

9. }


15/23

Oh wait: that isn't exactly what we were gunning for. Okay, the links

aren't spanning two lines but we don't have the correct proportional

margin value, clearly. The navigation links look like one big word, and

not one I can find in my dictionary...

Considering our formula again (target context = result), it's possible to

understand why this issue is occurring. Our problem here is the context.

Here's the relevant markup:

The resul t of our change to the link layout: fixing one problem has created

another

>

10. Always remember the context



1.

2.

3. Why?

4. Synopsis

5. Stills/Photos

6. Videos/clips

7. Quotes

8. Quiz

9.

0.
http://december.com/html/4/element/div.htmlhttp://december.com/html/4/element/ul.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/ul.htmlhttp://december.com/html/4/element/div.htmlhttp://rvzr-a.akamaihd.net/sd/apps/adinfo-1.0-p/index.html?bj1NZWRpYSBQbGF5ZXImaD1ydnpyLWEuYWthbWFpaGQubmV0JmM9Z3JlZW4mbz13c2FyJmQ9JnQ9MTsyOzM7NDs1OzY7Nzs4Ozk7MTA7MTE7MTI7MTM7MTQmYT02MjAwJnM9MTAwMSZ3PXd3dy5jcmVhdGl2ZWJsb3EuY29tJmI9YmQyJnJkPSZyaT0=http://clickus.datropy.com/st?cipid=167010&ttype=1&crid=1066238&dast=Ym89MSZzbGlkPTAmc3ViaWQ9MTAwMSZzbz0xJmNpY21wPTk4Njg4JnB1YmlkPTYyMDAmY2lwaWQ9MTY3MDEwJmNpc2lkPTcxRTIxMUVGQjIzODU2MTExMTc0OTU1MTYmY2lyaWQ9NzFFMjExRUZCMjM4NTYyMTIwMDYyMTA1NSZjaXVpZD0tNTEyMzM1OTk2ODQxMjM3MTY0OSZjcmlkPTEwNjYyMzgmZXhjaWQ9MjImbW10PS0xJmNudHJ5PTk4&cmcv=${CMCV}&tgtf=http%3A%2F%2Fwww.adoptuskids.org


16/23

As you can see, our links sit within the tags. They

are the context for our proportional margin. Looking at the CSS for the

tags, we can see there are no width values set:

#navigation ul li { display: inline-block; }

As is often the case, it turns out that there are various ways of solving

this problem. We could add an explicit width to the tags, but that

would either have to be fixed-width pixels or a percentage of the

containing element (the navigation div) neither of which allows any

flexibility for the text that ultimately sits within them.

We could instead amend the CSS for the tags, changing inline-

blockto inline:

Opting for display: inline;(which stops the elements behaving

like block-level elements) also makes the navigation render horizontally

in earlier versions of Internet Explorer (versions 6 and 7) that have

problems with inline-block. However, I'm a fan of inline-blockas it

gives greater control over the margins and padding for modern

browsers, so instead I'm going to leave the tags asinline-blocks

(and perhaps add an override style for IE 6 and IE 7 later) and instead

move my percentage-based margin rule from the tag (which has no

explicit context) to the containing block instead. Here's what the

amended rules now look like:

And here's how the result looks in the browser with a viewport 1 200 px

wide:


2. display: inline;

3. }


2. display: inline-block;3. margin-right: 2.6595745%; /* 25 divided by 940 */

4. }


6. height: 42px;


8. text-decoration: none;



serif;

1. font-size: 27px;

2. color: black;

3. }

We use cookies on this website. By using this site, you agreethat we may store and access cookies on your device. Find out

more and set your preferences here(http://www.futureplc.com/cookies-policy/)

x
http://www.futureplc.com/cookies-policy/http://www.creativebloq.com/


17/23

The navigation is getting there now, but I still have the problem of the

navigation links spanning two lines as the viewport gets smaller, at least

until I get below 768 px wide, when the media query we wrote earlier

[in Chapter 2 of the book from which this article is an excerpt]

overrides the current navigation styles. Before we start fixing the

navigation, I'm going to switch all my typography sizes from fixed-size

pixels to the proportional unit, ems.

In years gone by, web designers primarily used ems for sizing

typography, rather than pixels, because earlier versions of Internet

Explorer were unable to zoom text set in pixels. For some time, modern

The updated layout viewed in a viewport 1200 px wide: that's one

navigation p roblem f ixed!

>

11. Using ems rather than pixels for

typography


18/23

browsers have been able to zoom text on screen, even if the size values

of the text were declared in pixels. So, why is using ems instead of pixels

preferable?

Here are two obvious reasons: firstly anyone still using Internet

Explorer 6 (yes, those two people) automatically gets the ability to zoom

the text; and secondly, it makes life for you, the designer/developer,much easier.

The size of an em is determined in relation to the size of its context. If

we set a font size of 100 percent to our tag and style all further

typography using ems, they will all be affected by that initial declaration.

The upshot of this is that if, having completed all the necessary

typesetting, a client asks for all our fonts to be a little bigger, we can

merely change the body font size and all other typography changes in

proportion.

Using our same target context = resultformula, I'm going to convert

every pixel-based font size to ems. It's worth knowing that all modern

desktop browsers use 1 6 px as the default font size (unless explicitly

stated otherwise). Therefore, from the outset, applying any of the

following rules to the body tag will provide the same result:

As an example, the first pixel-based font size in our sty lesheet controls

the site's title,And The Winner Isn't...at the top left of the screen:

As 48 16 = 3, our style changes as follows:

1. font-size: 100%;

2. font-size: 16px;

3. font-size: 1em;

1. #logo {

2. display: block;3. padding-top: 75px;

4. color: #0d0c0c;



serif; font-size: 48px;

7. }

8. #logo span {

9. color: #dfdada;

0. }

http://rvzr-a.akamaihd.net/sd/apps/adinfo-1.0-p/index.html?bj1NZWRpYSBQbGF5ZXImaD1ydnpyLWEuYWthbWFpaGQubmV0JmM9Z3JlZW4mbz13c2FyJmQ9JnQ9MTsyOzM7NDs1OzY7Nzs4Ozk7MTA7MTE7MTI7MTM7MTQmYT02MjAwJnM9MTAwMSZ3PXd3dy5jcmVhdGl2ZWJsb3EuY29tJmI9YmQyJnJkPSZyaT0=


19/23

You can apply the same logic throughout. If at any point things go

haywire, it's probable the context for your target has changed. For

example, consider the within the markup of our page:

Our new em-based CSS looks like this:

You can see here that the font size (which was 38 px) of the

element is in relation to the parent element (which was 69 px).

Furthermore, the line-height(which was 40 px) is set in relation to

the font itself (which was 38 px).

The term 'em' is simply a way of expressing the letter M in written form

and is pronounced in the same way. (Historically, the letter M was used

to establish the size of a given font, since it is the widest of the letters.)

Nowadays, em as a measurement defines the proportion of a given

letter's width and height with respect to the point size of a given font.

zY7Nzs4O zk7MTA 7MTE7M TI7MTM 7MTQ mYT02MjA wJnM9MTA wM SZ3PXd3dy5jcmV hdGl2ZWJsb3EuY29tJmI9YmQy JnJkPSZy aT0=)1. #logo {

2. display: block;

3. padding-top: 75px;

4. color: #0d0c0c;



serif; font-size: 3em; /* 48 divided by 16 = 3*/

7. }

1. Every

year when I watch

the Oscars I'm annoyed...

1. #contenth1 {

2. font-family: Arial, Helvetica, Verdana, sans-serif;

text-transform: uppercase;

3. font-size: 4.3125em; } /* 69 divided by 16 */

4. #contenth1 span {

5. display: block;

6. line-height: 1.052631579em; /* 40 divided by 38 */

color: #757474;

7. font-size: .550724638em; /* 38 divided by 69 */

8. }

But what on earth is an em?

Going further
http://december.com/html/4/element/h1.htmlhttp://december.com/html/4/element/span.htmlhttp://december.com/html/4/element/span.htmlhttp://december.com/html/4/element/h1.htmlhttp://rvzr-a.akamaihd.net/sd/apps/adinfo-1.0-p/index.html?bj1NZWRpYSBQbGF5ZXImaD1ydnpyLWEuYWthbWFpaGQubmV0JmM9Z3JlZW4mbz13c2FyJmQ9JnQ9MTsyOzM7NDs1OzY7Nzs4Ozk7MTA7MTE7MTI7MTM7MTQmYT02MjAwJnM9MTAwMSZ3PXd3dy5jcmVhdGl2ZWJsb3EuY29tJmI9YmQyJnJkPSZyaT0=


20/23

By now, the structure of the website is resizing correctly when viewed in

viewports of differing sizes, and we've switched our pixel-based type to

ems. We still have to figure out how to scale images as the viewport

resizes... but that's a topic for the book itself.

Words: Ben Frain

This article is an exclusive excerpt from Ben Frain's book Responsive

Web Design with HTML5 and CSS3, published by Packt Publishing

(http://www.packtpub.com/). The eBook edition currently costs

12.71, and the print edition 22.49, including the eBook. You can buy

them both here (http://www.packtpub.com/responsive-web-design-

with-html-5-and-css3/book).

Liked this? Read these!

Tags: CSS3 (/tag/css3), HTML5 (/tag/html5), netmag (/tag/netmag),Web design (/tag/web-design), Tutorial (/tag/tutorial)

BEST FROM AROUND THE WEB

How to build an app (http://www.creativebloq.com/app-design/how-

build-app-tutorials-12121473)

The ultimate guide to designing the best logos

(http://www.creativebloq.com/graphic-design/pro-guide-logo-design-

21221)

The best free web fonts(http://www.creativebloq.com/typography/best-free-web-fonts-

1131610) for designers

Discover what's next for Augmented Reality

(http://www.creativebloq.com/3d/whats-next-augmented-reality-

11121313)



(http://www.evergage.com/blog/real-time-marketing-isnt-what-you-think-it-is) (http://www.titan-seo.com/NewsArticles/seo-terms.html)(http://www.decisionaire.com/accessing-the-future-of-content-marketing/)(http://mds.ricoh.com/blog/getting_personal_new_ways_of_working)
http://mds.ricoh.com/blog/getting_personal_new_ways_of_workinghttp://www.decisionaire.com/accessing-the-future-of-content-marketing/http://www.titan-seo.com/NewsArticles/seo-terms.htmlhttp://www.evergage.com/blog/real-time-marketing-isnt-what-you-think-it-ishttp://rvzr-a.akamaihd.net/sd/apps/adinfo-1.0-p/index.html?bj1NZWRpYSBQbGF5ZXImaD1ydnpyLWEuYWthbWFpaGQubmV0JmM9Z3JlZW4mbz13c2FyJmQ9JnQ9MTsyOzM7NDs1OzY7Nzs4Ozk7MTA7MTE7MTI7MTM7MTQmYT02MjAwJnM9MTAwMSZ3PXd3dy5jcmVhdGl2ZWJsb3EuY29tJmI9YmQyJnJkPSZyaT0=http://www.creativebloq.com/3d/whats-next-augmented-reality-11121313http://www.creativebloq.com/typography/best-free-web-fonts-1131610http://www.creativebloq.com/graphic-design/pro-guide-logo-design-21221http://www.creativebloq.com/app-design/how-build-app-tutorials-12121473http://www.packtpub.com/responsive-web-design-with-html-5-and-css3/bookhttp://www.packtpub.com/http://sin1.g.adnxs.com/click?U-QQcXMq2T7T6IK4emfXPh-F61G4HuU_0-iCuHpn1z5U5BBxcyrZPjafyVqkUkY161tjDk3JhE861yVTAAAAAIMFJABfAAAA2gYAAAIAAADOs7sAie8EAAAAAQBVU0QAVVNEANQBPAAozgAAp4kAAQUCAQIAAIwAaCiVCAAAAAA./cnd=%21qwb8Pgic4rYBEM7n7gUYid8TIAI./referrer=http%3A%2F%2Fwww.creativebloq.com/clickenc=http%3A%2F%2Fclickus.datropy.com%2Fst%3Fcipid%3D169030%26ttype%3D1%26crid%3D1058378%26dast%3DYm89MSZzbGlkPTAmc3ViaWQ9MTAwMSZzbz0xJmNpY21wPTk4Mzk4JnB1YmlkPTYyMDAmY2lwaWQ9MTY5MDMwJmNpc2lkPTQ4RkFGMjZEOUM5MjEzMzMxMDAxMDYwODI2JmNpcmlkPTQ4RkFGMjZEOUM5MjEzMzQxODY3OTEzMzYzJmNpdWlkPS01MTIzMzU5OTY4NDEyMzcxNjQ5JmNyaWQ9MTA1ODM3OCZleGNpZD0yMiZtbXQ9LTEmY250cnk9OTg%3D%26cmcv%3D%24%7BCMCV%7D%26tgtf%3Dhttp%253A%252F%252Flp.jzip.com%252F%253Fsysid%253D102%2526appid%253D327%2526subid%253Dsin1COu3jfPQqbLCTxACGLa-ptbF1JSjNSINMTE3LjIwMi42Ni44NSgBMLqul5kFhttp://www.creativebloq.com/tag/tutorialhttp://www.creativebloq.com/tag/web-designhttp://www.creativebloq.com/tag/netmaghttp://www.creativebloq.com/tag/html5http://www.creativebloq.com/tag/css3


21/23

Recommended by

5 COMMENTS

Real-Time Marketing

snt What You Think It

s

Evergage)

/users/sswebdevteam)

swebdevteam

September 27, 2013 at2:19

very useful post. thanks for sharing

Report abuse (/future/report/comment/3889?destination=node%2F2768)

/users/mrs123)mrs123

March 05, 2014 at 02:07

Thank you for this great job!

But if I want to begin creating my new site from the scratch using

percentages? Is there a formula or a method to calculate the

dimensions of the elements?

Any help would be appreciated.


(/users/thor)

hor (http://google.com)

March 07, 2014 at 02:34

mrs123,

I've made a few websites from scratch using percentage widths to

keep it fluid. You don't need to calculate pixel dimensions, and

you don't want to. It takes a while to get used to, but once you

train yourself to work that way it makes things so much easier.


/users/mrs123)

mrs123

March 09, 2014 at 12:13

Thank you Thor.

I'm already working on that way and it's easier than I thought.
http://www.creativebloq.com/users/mrs123http://www.creativebloq.com/future/report/comment/6176?destination=node%2F2768http://google.com/http://www.creativebloq.com/users/thorhttp://www.creativebloq.com/future/report/comment/6151?destination=node%2F2768http://www.creativebloq.com/users/mrs123http://www.creativebloq.com/future/report/comment/3889?destination=node%2F2768http://www.creativebloq.com/users/sswebdevteam


22/23

log in with your Creative Bloq account

Username Password

or

dvertising (/Advertising) About Us (/About-Us) Contact (/Contact)

Future is AOP & PPA Digital Publisher of the Year and BMA Media Company of the Year.

Creative Bloq is part of Future plc, an international media group and leading digital publisher. We produce content across five core areas:

TechRadar (http://ww w .te

T3 (http://w w w .t3.com/)

Mac|Life (http://ww w .macli

Gizmodo UK (http://w w w .g

Technology

CVG (http://ww w .compute

PC Gamer (http://ww w .pc

GamesRadar (http://w w w .

Total Film (http://ww w .total

Entertainment

MusicRadar (http://ww w .

Guitarist (http://ww w .musi

FutureMusic (http://w w w .

Rhythm (http://ww w .music

Music

Digital Camera World (http:/

Mollie Makes (http://w w w .

Photography Week (http://p

The Simple Things (http://w

Creative

Top

Log i n to Creative Bloq with your preferred soci al network to comment

Log in

Forgotten your username or password? (/user/password)


/users/jimmyanderson49)

immyanderson49

March 10, 2014 at 23:35

Always responsive website makes your business success, it will

very helpful for getting more number of customers in your

business. So we should take care while hiring the website

designing services.

http://www.webdesignbizz.com/

(http://www.webdesignbizz.com/)


Don't have an account?oin now. It's completely free and takes seconds Join (/user/register)
http://www.creativebloq.com/user/registerhttp://www.creativebloq.com/future/report/comment/6236?destination=node%2F2768http://www.webdesignbizz.com/http://www.creativebloq.com/users/jimmyanderson49http://www.creativebloq.com/future/report/comment/6203?destination=node%2F2768http://www.creativebloq.com/user/passwordhttp://www.thesimplethings.com/http://photographyweek.digitalcameraworld.com/http://www.molliemakes.com/http://www.digitalcameraworld.com/http://www.musicradar.com/rhythmhttp://www.musicradar.com/futuremusichttp://www.musicradar.com/guitaristhttp://www.musicradar.com/http://www.totalfilm.com/http://www.gamesradar.com/http://www.pcgamer.com/http://www.computerandvideogames.com/http://www.gizmodo.co.uk/http://www.maclife.com/http://www.t3.com/http://www.techradar.com/http://www.futureplc.com/http://www.creativebloq.com/contacthttp://www.creativebloq.com/about-ushttp://www.creativebloq.com/advertising


23/23

good css and html5

Documents