I wanted to share few important qoutations from this book from the pending chapters.
Nice book written by authors.
1) Centering a design using auto margins
Say you have a typical layout where you wish to center a wrapper div horizontally on the screen:
<body>
<div id="wrapper">
</div>
</body>
To do this you simply define the width of your wrapper div and then set the horizontal margins to auto:
#wrapper {
width: 720px;
margin: 0 auto;
}
In this example I have decided to fix the width of my wrapper div in pixels, so that it fits nicely on an 800/600 resolution screen. However, you could just as easily set the width as a percentage of the body or relative to the size of the text using ems. This works on all modern browsers. However, IE 5.x and IE 6 in quirks mode doesn’t honor auto margins. Luckily, IE misunderstands text-align: center, centering everything instead of just the text. You can use this to your advantage by centering everything in the body tag, including the wrapper div, and then realigning the contents of the wrapper back to the left:
body {
text-align: center;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}
Using the text-align property in this way is a hack—but a fairly innocuous hack that has no adverse effect on your code. The wrapper now appears centered in IE as well as more standards-compliant browsers.
There is one final thing that needs to be done in order for this method to work smoothly in all browsers. In Netscape 6, when the width of the browser window is reduced below the width of the wrapper, the left side of the wrapper spills off the side of the page and cannot be accessed. To keep this from happening, you need to give the body element a minimum width equal to or slightly wider than the width of the wrapper element:
body {
text-align: center;
min-width: 760px;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}
Now if you try to reduce the width of the window below the width of the wrapper div,scroll bars will appear, allowing you to access all of the content.
2) Centering a design using positioning and negative margins
The auto margin method of centering is by far the most common approach, but it does involve using a hack to satisfy IE 5.x. It also requires you to style two elements rather than just the one. Because of this, some people prefer to use positioning and negative margins instead.
You start as you did before, by defining the width of the wrapper. You then set the position property of the wrapper to relative and set the left property to 50%. This will position the left edge of the wrapper in the middle of the page.
#wrapper {
width: 720px;
position: relative;
left: 50%;
}
However, you don’t want the left edge of the wrapper centered—you want the middle of the wrapper centered. You can do this by applying a negative margin to the left side of the wrapper, equal to half the width of the wrapper. This will move the wrapper half its width to the left, centering it on screen:
#wrapper {
width: 720px;
position: relative;
left: 50%;
margin-left: -360px;
}
3) Common CSS problems
Some of the simplest CSS problems are caused by typos and syntactical errors in your code. One of the best ways to prevent these types of bugs is to run your code through the CSS validator (http://jigsaw.w3.org/css-validator/). This should pick up any grammatical errors, showing you the lines the errors are on and a brief description of each error.
4) Problems with margin collapsing
Margin collapsing (see Chapter 2) is another CSS feature that, if misunderstood, can cause a lot of gray hairs. Take the simple example of a paragraph nested inside a div element.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Margin Collapsing</title>
<style type="text/css">
<!--
/* Pretty Stuff
================================== */
/* Zero down margin and paddin on all elements */
* {
margin: 0;
padding: 0;
}
body {
font: 100%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
color: #353535;
padding: 1em;
}
h1 {
font-size: 2.4em;
font-weight: normal;
}
.wrapper {
width: 420px;
border: 1px solid gray;
margin: 20px;
}
/* The Core Technique
================================= */
#box1 {
margin: 10px;
background-color:#d5d5d5;
}
#box2 {
margin: 10px;
background-color:#d5d5d5;
padding: 1px;
}
p {
margin: 20px;
background-color:#90C2F3;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<div id="box1">
<p>This paragraph has a 20px margin.</p>
</div>
</div>
<div class="wrapper">
<div id="box2">
<p>This paragraph has a 20px margin.</p>
</div>
</div>
</body>
</html>
About the Authors
Andy Budd
Andy Budd is a user experience designer and web standards developer living and working in Brighton, England. As the creative director of web design consultancy Clearleft (www.clearleft.com), Andy enjoys building attractive, accessible, and standards-compliant websites. His online home can be found at www.andybudd.com, where he writes about modern web design practices.
Andy is a regular speaker at international design conferences, workshops,and training events, and organized the UK’s first web 2.0 conference (www.dconstruct.org). Passionate about the quality of education in the industry, Andy runs SkillSwap (www.skillswap.org), a free community training and networking project. Andy also helped set up the Web Standards Awards (www.webstandardsawards.com), a project that aims to recognize websites for their use of web standards. When he’s not building websites, Andy is a keen travel photographer. Never happier than when he’s diving some remote tropical atoll, Andy is also a qualified PADI dive instructor and retired shark wrangler.
Cameron Moll
Cameron Moll, recognized as one of the industry’s most balanced new media designers, is proficient in functional web design, elegant interfaces, and clean markup. Cameron has been involved in the design and redesign of scores of websites, and his influential techniques have found favor in circles across the Web. A marketing background and a keen eye for design lead him to merge form and function in the form of compelling visual experiences.
Cameron's work has been recognized by respected organizations and notable individuals such as National Public Radio (NPR), Communication Arts, and Veer. His personal site, CameronMoll.com, delivers design how-tos in the form of
engaging conversation, on-topic banter, and downloadable artwork source files.
Simon Collison
Simon Collison is Lead Web Developer at Agenzia (www.agenzia.co.uk), and has worked on numerous web projects for record labels,high-profile recording artists, and leading visual artists and illustrators,including The Libertines, Black Convoy, and Project Facade. Simon also oversees a production line of business, community, and voluntary sector websites, and passionately ensures everything he builds is accessible and usable, and complies with current web standards. Simon regularly reviews CSS-based websites for Stylegala, and does his best to keep his
highly popular blog (www.collylogic.com) updated with noise about web standards, music, film, travels, and more web standards.
On those rare occasions away from the computer, Simon can be found in the pub, or trying to con free gig tickets out of his clients. A little too obsessed with music, he is very likely to bore you with his latest musical Top 100, or give you a potted history of the UK indie scene from 1979 to the present day. Simon has lived in many cities, including London and Reykjavik, but now lives happily in Nottingham with Emma and a cat called Ziggy.
No comments:
Post a Comment