Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
CSS Box Model � Typical Screen Width
� The maximum width of a screen is 1024 pixels � Professional designers calculate their elements for a
screen width of 960 pixels (just to be safe)
� Creating Space around Elements � Padding – space inside the element
� Between border and content
� Border – width, style, color � If set to 0, it is not visible and takes up no space
� Margin – space outside of the border � Between the border and adjacent elements
Calculating Box Size � Width and height are separate
� Border, padding, and margin are added to the size of the element
� Subtract these values appropriately to fit into a limited space
� Collapse – when the bottom margin of one element is adjacent to the top margin of another element � The two margins will combine into a single margin
equal to or greater than the combined values
Property Values � Padding & Margin
� 4 values – top, right, bottom, left
� 3 values – top, left/right, bottom � 2 values – top/bottom, left/right
� 1 value – all sides equal
� Border � Width, style, color
� 3px, solid, red
Multicolumn Layout � Page Flow – the most basic layout
� Elements flow from top to bottom � Use Float & Clear to position elements
� Relative Positioning – exact location of the element � Use Top & Left properties
Absolute Positioning � Takes the element out of the page flow entirely
� Specify the new location to the closest element � Use the Top, Left, Right, and Bottom properties
� Group Task � Insert absolute positioning into Lakeland Reeds
� A light icon next to each page link
� A shaded icon next to the currently open page
<img src=“images/fl_light.gif” width=“45” height=“45” alt=“” title=“” />
<img src=“images/fl_dark.gif” width=“45” height=“45” alt=“” title=“” />
Lakeland CSS File � Add Properties to #mainnav
� Padding-left: 1em � Text-align: left � Width: 6em
� Add a style based on li img � Position: absolute � Left: -40px � Top: -8px
� Update #mainnav li � Position: relative (not to change the position)
Question #1 What is the standard width that web designers use
when creating web sites for the general public?
960 pixels
Question #2 Which property is not useful when creating a
multicolumn layout?
� Width
� Background
� Float
� Position
Background
Question #3 Which does CSS use to represent the characteristics
of ever Web page element?
� Relative positioning
� Absolut positioning
� Multicolumn layout
� Box model
Box Model