Anda di halaman 1dari 3

CSS Page Layouts

Calculating element dimensions

Content block: are all of the border, padding and width of an element
Containing block: the margin edges
Understanding vertical margin collapse
If margins have something separating them, then the do not collapse.
Normal document flow (GREAT EXAMPLE: for simple layout)
Elements are going to appear at the top of the page, they are going to read left to right and they are
just going to stack one on top of another. Block level elements will occupy their own space within
the layout. Inline level elements will appear on a line until they can no longer fit (i.e. images)
Calculate div and images relationship
Set width of div to 822px
Set padding of div to all around 10px
Image have a width of 250px
We want to give them 20px worth of space between each of them
10px of margins around images
2px white bordering
CSS Resets
Place CSS Reset at the top of file to override browser defaults
SImple Reset
html,body,div,h1,h2,h3,p,ul,li {

margin: 0;

padding: 0;
It is best to use a small but ecient reset
Fixed, Fluid and Responsive
Fixed: It remains consistent no matter what device, not matter what user agent, no matter what
screen size this is viewed at, it always stays the same because it is fixed to a very specific size.
Fluid: Unlike a fixed layout which remains fixed based upon a specific size that you set on the page,
fluid layouts do respond to changes made in the user agent or the browser.
Responsive: can response to the size of the browser window, if a device is in portrait or landscape
mode, height of the device.
CSS Debugging Tools
Firefox : firebug
Design Considerations
Page design workflow
Discovery Phase:
Interacting with the client to identify goals
How will users expect to interact with the site?
What type functionality will the site need?
Develop a content plan
Wireframes and Prototypes
Each site will have dierent requirements
Phase could consist of simple sketches or detailed prototypes
Goal is to make sure site architecture, content organization, and functionality have been planned
Color and Type Treatments
Important to establish rules for color and type usage early
Typographic rules should guide the fonts being used
Setting a primary and secondary color palette, and establishing when those colors are used will
keep your site consistent
Site Mockups
For small sites, these will often just be sketches
Detailed mockups can be created using programs like Fireworks, Photoshop, or Illustrator
Detailed mockups allow you to refine the design without extra coding
Site assets can be created directly from mockups
NOTE: Need to develop a process

NOTE: Need to develop a process

Page Design Tools
Creating initial page structure
Header content goes here
Navigation goes here
Banner content goes here
Article content goes here
Sidebar content goes here
Footer content goes here
NOTE: Markup to be semantic meaning that the tags actually mean something, and you only want to
represent the content that needs to be represented or passed o onto any other device.
Working with Floats
Floating elements
One of the things that floating does that normal document flow does not is it actually removes the
object from normal document flow.
What is container collapse?
The parent containing element that was containing these floats, no longer is containing them. The
reason for that is because remember, each of these items are floated so they have been removed
from normal document flow and so the parent doesn't see them.
What is column collapse?
When a column in a *-column layout breaks over to the next row
Clearing floats
Clear property allows us to turn floats o and restore normal document flow and together, floating
and clearing allows us to exercise precise control over flow of our layouts.
To prevent overlap use clear: both
Containing floats
How to contain floated elements inside the container?
If you have an element that's underneath your floated elements and you clear that to restore normal
document flow, then the parent container will go all the way down to contain it as well
Use overflow: hidden in the parent container
Use float: * in the parent container to contain the floating elements
In Summary
We can clear child elements that appear below float elements.
We can set the overflow property of the parent container to either Hidden, Auto, or Scroll
We can set a float value on the containing element itself
Clearfix technique
.clearfix:after {
display: block;
-------------------------------------------------------------------------------- .clearfix:before, .clearfix:after {
display: table;
.clearfix: after {
-------------------------------------------------------------------------------- /* For IE < 8 (trigger hasLayout)*/
<!--[if lt IE 8]>
.clearfix {
zoom: 1;

zoom: 1;
Floating inline elements
When we float text which is inside of a paragraph or even outside of a
paragraph and it has
paragraph text next to it, the text itself is going to
wrap around the image, but it goes right up to the
edge of it.
Same rules to clearing floats apply to inline elements as they do to block level elements.
So when line boxes (box around text) encounter a floated element, what they do is they shorten
themselves so that they can appear beside the floated element.
Column Height Considerations
The height of an element is set to auto by default. The contents of the element defines its height. and search for One True Layout