Upload
shawn-calvert
View
372
Download
2
Tags:
Embed Size (px)
Citation preview
22-3376 Web Design 2 // Columbia College Chicago
WEB LAYOUT
QUIZ REVIEW
color: #444
font-family: "Times New Roman", Georgia, serif
font-size: 16px (define in px, em, or %)
font-style: italic
font-variant: small-caps
font-weight: bold (or by number, 300, 400, 700, 800)
letter-spacing: .02em
line-height: 1.6; (relative to whatever your type size is)
text-align: left;
text-transform: uppercase;
ASSIGNMENTS
Upload your assignments to your server !
QUIZ
Open a plain text document !
Write the markup to recreate the image !
!
http://lms.colum.edu/
PROJECT VOTING
Please hand in your ballot by the end of class
The Box Model
There are five basic properties for defining your “boxes”:
display width and height
padding margins border
CSS Box Model
All HTML elements can be considered as boxes or blocks. In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
!
Inspect Element 3d view in Firefox
Total dimensions
The actual width or height of any object is the total of the content width, padding, borders, and margins. .size-me { width: 200px; padding: 10px; border: 2px; margin: 20px; }"
The actual width: 254px
content: 200pxpadding-left: 10pxpadding-right: 10pxborder-right: 2pxborder-left: 2pxmargin-right: 20pxmargin-left: 20px
!
!
Tags: HTML Sectioning Elements
header footer
nav section article aside
Class Exercise !
1 Boxes
Defining padding & margins
You can set the padding and margin properties of any element in css.
Margin and padding dimensions can be also pixels (px), ems, or percentage (%).
.space-me { padding: 10px; margin-bottom: 20px;}
!
!
!
Defining padding & margins
While you can add padding and margins to inline elements, not all of your properties will apply (vertical spacing, see below).
!
!
!
Collapsing margins
BodyElements p br h1 – h6 ul ol a img
When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins' widths.
In the example below, box1 has a taller margin than box2, so only that margin will be used (not added together). !
!
CSS Shorthand
1
2
3
4
When setting sizes for padding, margins and borders, instead of this: .box { padding-top: 10px; padding-right: 15px; padding-bottom: 10px; padding-left: 15px; }
Use this: .box { padding: 10px 15px 10px 15px; }"
The values start at the top and go around the element clockwise. !
!
CSS Shorthand
1
2
1
2
If your top/bottom and left/right values are the same, you can shorten the declaration even more: .box { padding: 10px 15px; }"
Where the first value is for the top and bottom, and the second is for left and right. !
!
Defining borders
You can create a border around any element with css; you can create the same border on each side, or customize the color, width and border style of each side.
!
There are 3 properties to define with each border:
border-width: 1px;
border-style: solid; (dotted, dashed, etc)
border color: #666666; !
!
!
CSS Shorthand
Borders can also be shortened, from this: .box { border-width: 1px; border-style: solid; border-color: #888888 }"
to this: .box { border: 1px solid #888888; }"
Note that there is only a single space between each value, and they should follow the order shown above.
!
!
Defining borders
h3 { border-bottom: 1px solid #444444;}
!
!
Class Exercise !
2 Padding, Margins & Borders
Class Exercise !
3 Defining Widths
Display property
There are four values that you can give to the display property:
display: block;
display: inline;
display: inline-block;
display: none
!
Inline-block is a special value that allows an element to stay inline with its containing element, but allows you to control it’s dimensions as if it were a block element.
display: none removes the element.
Display property
By default, certain elements in your html have a display property of inline or block.
Block elements takes up the full width available, and forces a line above and below. Examples include <p>, <div>, <ul>, <blockquote> and all headers.
<div></div>
<ul></ul>
<p></p>
Display property
Inline elements can be inserted within block elements or other inline elements and do no create additional space or line breaks. Examples include <img>, <em>, <strong>, <a>, and <span>.
<p></p>
<p>
<p></p>
<a></a> </p>
Defining dimension: width and height
You can set the width and height of any element that has a display property of block or inline-block.
As with type, you can set dimension in pixels (px), ems, or percentage (%). Setting any width with pixels is referred to as fixed-width, and setting width in ems or percentages is referred to as flexible-width. .size-me { width: 200px; height: 200px; }
!
!
Defining dimension: min- and max-
Instead of absolutely defining the width and height of your elements, you can set minimum and maximum widths and heights.
This allows you to resize elements based on the browser or their parent elements. The idea of creating flexible content that adjusts to the user’s browser/device is at the core of what is referred to as responsive design. .size-me { min-width: 200px; max-width: 100px; }"
Centered, Fixed-width Page
!
body {
width: 960px;
margin: 0 auto;
}
Float and set 300px width on article element
!
!
!
Defining dimension: min-width and max-width
!
!
!
Defining dimension: min-height
!
!
!
Defining dimension: change display property of anchors
!
!
!
Clear the footer
!
!
!
!
!
Clear the footer
When you float an element, their containing element no longer recognizes their width or height (the are out of the “flow”). This becomes and issue if the floated content is taller than the containing element. There are several ways to fix this; the easiest way is to set the overflow property on the containing div to “auto”. .containing-div { overflow: auto }"
!
!
Make it responsive
!
@media only screen and (max-width: 767px) {
body {
width: 100%;
}
article {
width: auto;
margin: 20px;
}
h1 {
padding: 0 20px;
}
}
Floats and Positioning
There are four basic declarations you can use to position your boxes:
float: left (or right) position: relative
position: fixed position: absolute
The normal flow & position:static
Static positioning is the default – this is referred to as the “normal flow”.
block boxes are positioned on a page one after the other (in the order they're written in the HTML). They start in the upper left of the containing box and stack from top to bottom. The distance between each box is defined by the margins with top and bottom margins collapsing into one another.
!
!
!
<div id=”header”></div>
<ul id=”sidebar-nav”></ul>
<div id=”content”></div>
float
A floated element takes the element out of the normal flow and moves it to the far right or left of the containing element. Existing content will then flow around it. Floated elements should always have at least a width property. .photo { float: left; max-width: 150px; }"
!
!
Class Exercise !
4 Float
Class Exercise !
5 Two-Column layout
Class Exercise !
6 Fixed/Flexible Hybrid Layout
Positioning Properties
There are four values that you can give to the position property: ! static Elements renders in order, as they appear in the document flow. This is default.
relative The element is positioned relative to its static position, so “left:20” adds 20 pixels to the element’s LEFT position.
absolute The element is positioned relative to its first positioned (not static) ancestor element (usually, the first parent with position:relative).
fixed The element is positioned relative to the browser window.
Class Exercise !
7 Positioning
boxes exercise
.box { "" width: 300px; "" height: 300px; "" border: 1px solid #333; "" margin: 10px; "" display: inline-block; }" "
.relative { "" position: relative; "" top: 50px; "" left: -50px; }"
.fixed { "" position: fixed; "" bottom: 0; "" left: 0; }"
!
!
boxes exercise
.box.absolute { "" position: relative; }"
.box.absolute p { "" position: absolute; "" top: 0; "" right: 0; "" background: #444; "" padding: 10px; "" margin: 0; "" color: #fff; }"
!
!
!
relative
A relative positioned element moves the element out of it’s position in the normal flow, and allows you to move it “relative” to that location. The space taken by the original location is retained in the flow. .date { position: relative; top: 40px; left: -105px; }"
!
!
relative exercise
!
!
!
.date { position: relative; top: 40px; left: -105px; }"
!
!
fixed
A fixed element is taken complete out of the document flow, and is positioned relative to the browser window.
.create-change { position: fixed; bottom: 40px; right: 0; }"
!
!
fixed exercise
!
!
!
.create-change { position: fixed; bottom: 40px; right: 0; }"
!
!
absolute
The element is positioned relative to its first positioned (not static) ancestor element. The element and its spacing are completely taken out of the flow. In the example below, the “.post” parent element is given a position value of relative, which lets us set it’s child element “.icon” within it.
.post { position: relative; }"
.icon { position: absolute; left: -60px; right: 0; }"
!
!
absolute exercise
!
!
!
.post { position: relative; }"
.icon { position: absolute; left: -60px; right: 0; }"
!
!