Download margin border div width/height padding lP rP tP BP

���������������� CSS Positioning, Box Model
TP
LP
fdjdkjdakfjadksjfdkjkdsjfdksajfkdjfdkasfdkfXeril ullaore veleniam
illaoreetum nulluptat am il eliquamet etummy nummy nosto
doluptatisl ex et, commolore do
odolestie mincip etuerate
RP
BP
margin border padding
(transparent,
doesn't work
great with IE)
div width/height
Div Style Selectors
Div Think of this as a box that contains things, such as text or images. It can also just be a
box, that has a border or not.
Width/Height The inner edges of the content box, and does not include the padding or margin.
height
border
border-style
padding
width
border-top
border-top-style
padding-top
max-height
border-bottom
border-bottom-style
padding-bottom
max-width
border-left
border-left-style
padding-left
min-height
border-right
border-right-style
padding-right
border-color
border-width
margin*
border-top-color
border-top-width
margin-right*
border-bottom-color border-bottom-width
margin-left*
border-left-color
border-left-width
margin-top*
border-right-color
border-right-width
margin-bottom*
*check margins in IE 6 &7
Web Design One
Columbia College, Chicago, Debra Kayes
Above, div with class and id structure. Below, HTML5 basic structure with new tags! Go here for more HTML5
information:
http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/
Web Design One
Columbia College, Chicago, Debra Kayes
���������������� Div Background
Background Color apply a background color
background-color: teal;
Background Image apply a background image
background-image: url(images/image.gif)
Background Repeat to not have the image repeat, choose
background-repeat: no-repeat
to have it repeat in a certain direction, choose repeat-x | repeat-y
background-repeat: repeat-x
���������������� Div Border Style
border:none
dotted
dashed
solid
double
groove
ridge
inset
outset
Example
div {width: 200px; height: 200px; border-width: 1px; border-style: dotted;}
���������������� CSS Positioning Options
Static position:static
This is default. The default positioning for all elements is position:static, which means
the element is not positioned and occurs where it normally would in the .html document.
Normally you wouldn't specify this unless you needed to override a positioning that had
been previously set.
#div-1 {
position:static;
}
Relative
position:relative
Content also appears relative to where it is in the .html document, but you can scoot it
around, for example:
Let's move div-1 down 20 pixels, and to the left 40 pixels:
#div-1 {
position:relative;
top:20px;
Web Design One
Columbia College, Chicago, Debra Kayes
left:-40px;
}
If you specify position:relative, then you can use top or bottom, and left or right to
move the element relative to where it would normally occur in the document. You can
also use negative amounts, as don above.
Absolute Uses specific coordinates (nailed down).
top or bottom
left or right
position:absolute
When you specify position:absolute, the element is removed from the document and
placed exactly where you tell it to go.
Let's move div-1a to the top right of the page:
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
���������������� Using Positions Together
position:relative +
position:absolute This allows you to center a div, and have the contents positioned absolutely.
If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top
right of div-1:
#div-1 {
position: relative;
margin-left: auto;
margin-right: auto;
}
#div-1a {
position: absolute;
top:0;
right:0;
width:200px;
}
two column absolute
Now we can make a two-column layout using relative and absolute positioning!
#div-1 {
position:relative;
margin-left: auto;
margin-right: auto;
}
Web Design One
Columbia College, Chicago, Debra Kayes
#div-1a {
position:absolute;
top:0;
right:0;
width:100px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
One advantage to using absolute positioning is that we can position the elements in any
order on the page, regardless of the order they appear in the HTML. So I put div-1b
before div-1a.
���������������� CSS Overflow Options
Visible
Hidden
Scroll
Auto
Allows stuff to continue outside the box
Clips the content if it is too long
Adds a scroll bar, horizontal or vertical
Adds a scroll bar if necessary
���������������� Floating
Float
left | right
Allows a div to sit next to another div
Example
div {float: right}
this div will float to the right, other stuff will float around it, instead of jumping to the
next line.
float columns If we float one column to the left, then also float the second column to the left, they will
push up against each other.
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
Web Design One
Columbia College, Chicago, Debra Kayes
���������������� Clear
clear:left, right, or
both
Forces the stuff next to it to drop down to the next line, pushes down the rest of the
content.
#div {
clear:both;
}
���������������� Stacking Order
Z-index Elements with a higher z-index will be on top of elements with a lower number. Think
about it like floors of a building.
z-index: 100;
���������������� Transparency
For IE
Other Browsers
filter: alpha (opacity=30)
opacity: 0.3
These equal the same thing
Web Design One
Columbia College, Chicago, Debra Kayes