website
Nobody
week_9_boxModel.pptxCSS & Page Design
1
css positioning
the box model
box properties
1
The web page for this week is:
http://learnline.cdu.edu.au/units/applicationconcepts/webapplications/module1/csspagedesign.html
Images taken from: http://learnline.cdu.edu.au/units/applicationconcepts/webapplications/index.html
The Box Model…
2
content
padding
border
margin
2
Your understanding of the box model concept, and how it relates to the way in which an element’s final dimensions are determined, will be essential to your understanding of how an element is positioned on a web page
The box model applies to block-level elements
The box model shows how any block level element is rendered on an html page.
Content area is the actual text or image that appears on the page.
Content is surrounded by the padding
Padding is surrounded by the border
Border is surrounded by the margin
The Box Model Contd…
3
3
Another view of how these properties affect display.
Box model
4
Source: Russ Weakley
4
Implementing the box model
Draw this box
.box
{ width: 300px; height: 200px; padding: 10px; border: 1px solid #000; margin: 15px; }
5
Img source: http://www.mattryall.net/blog/2008/08/css-layout-fundamentals-box-model
5
How much space will this box need to display on a page?
Total width = left margin + left border + left padding + width + right padding + right border + right margin
Total height = top margin + top border + top padding + height + bottom padding + bottom border + bottom margin
6
6
What did you find?
Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px
Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px
7
You can see from this short example that, for this element to fit on the page, we’ll need a space that’s at least 352px wide and 252px high. If the space available is any smaller than this, the element will be misplaced, or will overflow its containing block. Note that Internet Explorer 6 and earlier versions will most likely stretch the containing block to accommodate this extra height, and could severely disrupt the layout. Other browsers will let the element overflow its boundaries, but will ignore the content.
7
Box properties
| Dimensions | Margins | Padding | Borders & outlines |
| height | margin-top | padding-top | border-top-color |
| min-height | margin-right | padding-right | border-top-style |
| min-height | margin-bottom | padding-bottom | border-top-width |
| width | margin-left | padding-left | border-top |
| min-width | margin | padding | |
| min-width |
8
Ref:
http://reference.sitepoint.com/css/bordersoutlines
8
An Important Note:
Notice that elements are nested inside each other, and the same is true often for Divs.
EG -
Set the width of your body element to be 80%
That is 80% of the body element
Set the width of #pagecontent div to be 80%
#pagecontent div’s width is – 80% of 80%
= (80% of 80% of body element) 64% of the body element
9
So if you’re changing font size, widths, borders, padding, margins etc you need to consider the size of the containing elements and what they properties are already set at.
9
Multiple Columns
Your #pagecontent div should contain 2 inner divs
Make sure that no html content lies outside these two divs
Set the width of these divs (better to use % instead of pixels)
Choose –
Float both left
Float one left and the other right
10
Work on the aboutus.html page.
Use percentages, not absolute pixel values – your site will be better prepared for mobile display.
10
Here’s the HTML code -
11
This is the ‘about’ page of the bubble under website.
I’ve divided the text into 2 separate divs because I want to create 2 columns of text.
11
Here’s the CSS code -
#leftcolumn {
width: 48%;
float:left;
padding: 10px;
}
#rightcolumn {
width: 40%;
float: right;
padding: 10px;
background-color: white;
}
12
Take care when setting widths of elements. I’ve purposefully made them less than 100% in total as differing browsers use differing yardsticks for box model measurements.
This is why we build in a standards compliant browser and test in all other popular browsers for accuracy of display.
12
The Resulting page -
13
The page will look something similar to the above, though not exactyl.
What should be similar is the presence of two columns of text.
Try this yourself on your assignment pages.
Remember to make sure that you’ve got all the text inside divs.
13
