Web Design and Development
theLonelyWolf
05-CSSLayout.pptxCSS Box Properties and Layout
Some content from:
Build Your Own Website The Right Way Using HTML & CSS
(Ian Lloyd)
Principles of Web Design (Joel Sklar)
CP1406/CP5638
1
Learning Outcomes
demonstrate best practices in creating standards- based websites
understand the CSS formatting model and be able to use this appropriately, especially:
padding, border, margin
basic page layout (floating)
2
The CSS Visual Formatting Model
describes how element content boxes should be displayed by the browser
based on the hierarchical structure of the HTML document and element display type
elements fall into three display type categories
Block (e.g., p, div): block elements contain inline boxes that contain element content
Inline: (e.g. img, span) contain the content within the block-level elements; they do not form new blocks of content
List-item: create a surrounding containing box and list-item inline boxes
3
Block-level Elements versus Inline Elements
a block-level element can contain other block-level elements, as well as inline elements
an inline element can only contain other inline elements*
common block-level elements:
h1, h2, h3, and so on, through to h6
p
div
blockquote
ul and ol
form
common inline elements:
span
em
strong
cite
a
4
Block-level Elements versus Inline Elements
Inline elements can never contain block-level elements
* HTML5 now lets you wrap <a> (links) around inline and block elements – which is very handy
Inline elements allow for a limited range of styling options:
colours (text and background)
font properties (size, font family, and other decorative transformations )
Block-level elements have more CSS properties available:
width and height
create padding effects to prevent text from pushing right up against the edge of the block in which it's contained
move a block to any location on the web page, regardless of the position in which it appears in the markup
5
Block-level Elements versus Inline Elements
e.g. inline elements can't have a width set
experiment to see how various properties affect inline elements
when an inline element has position: absolute specified, these will apply
it behaves like a block-level element
by default, a block-level element will take up 100% of the available width - the size of its parent container
change it with the width property
height is less commonly used
6
Specifying the Display Type
the CSS display property determines the display type of an element
you can create block-level, inline, and list type elements
the display property is often used to create horizontal navigation lists:
li {
display: inline;
list-style-type: none; }
7
Making a Navigation Bar From a List
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Assignments</a>
</li><li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
8
Making a Navigation Bar From a List
#header ul {
position: absolute;
right: 0px;
bottom: 0px;
margin: 0px;
padding: 0px;
background-color: #f0f3ff;
}
#header li {
list-style: none;
display: inline;
}
9
This positions the nav bar in the top right corner
Making a Navigation Bar From a List
#header ul li a {
height: 20px;
margin: 0px;
padding: 0px 10px 0px 10px;
border-left: #999999 1px solid;
border-top: #999999 1px solid;
border-bottom: #999999 1px solid;
color: #333333;
text-decoration: none;
font-size: 14px;
}
#header ul li a:hover {
color: #333333;
background-color: #97bfff;
}
#header ul li a:active {
color: #000000;
background-color: #FF9900;
}
10
Using the CSS Box Model
the box model describes the rectangular boxes that contain content on a Web page
each block-level element created is displayed as a box containing content in the browser window
each content box can have margins, borders, and padding (specified individually)
11
12
p {
margin: 2em;
padding: 2em;
border: solid thin black;
background-color: white;
}
Measurement Values
the margin, border, and padding properties allow two types of measurement:
length
absolute or relative values
percentage
based on width of containing box e.g. a <p> in a <div> in a <body>… each could have a width specified as % of its parent
13
Negative Margins
negative margins can be set
you an override the default browser margin by setting a negative value
p {margin-left: -10px;}
can also be used to remove the default margins from other elements
14
Collapsing Margins
to ensure spacing is consistent, the browser will collapse vertical margins between elements
by default, browser selects the greater of the two margins (top and bottom)
p {
margin-top: 15px;
margin-bottom: 25px; }
15
Zeroing Margins
to remove the default margin spacing in the browser, set margin values to zero
body {margin: 0; padding: 0;}
if you zero margins for the entire page, you must explicitly set margins for individual elements - Or use a container box with appropriate margins
don't clear margins and then have text up against the edge of the page/box
16
17
Applying the Padding Properties
control the padding area in the box model
area between the element content and inside the border
padding area inherits the background color of the element
there are five padding properties:
padding
padding-top
padding-right
padding-bottom
padding-left
18
Applying the Border Properties
control the appearance of element borders
border displays between the margin and the padding
there are five basic border properties:
border
border-top
border-right
border-bottom
border-left
a typical border style rule:
border {solid thin black}
19
Specifying Border Style
Border style keywords:
none — no border on the element (default)
dotted — dotted border
dashed — dashed border
solid — solid line border
double — double line border
groove — 3D embossed border
ridge — 3D outward extended border
inset — 3D inset border (entire box)
outset — 3D outset (entire box)
dot-dash — alternating dots and dashes (CSS3 value)
dot-dot-dash — two dots and a dash (CSS3 value)
wavy — wavy line border (CSS3 value)
20
21
Specifying Rounded Borders
the CSS3 border radius property lets you create rounded borders
The following rule sets the radius for all four corners to 1em:
border-radius: 1em;
You can also use individual properties:
border-top-right-radius: 3em;
border-bottom-right-radius: 1em;
22
23
Using the Page Layout Box Properties
these properties let you control the dimensions and position of content boxes
essential to building CSS page layouts
width, min-width, max-width
height, min-height, max-height
float
clear
overflow
24
Setting Element Width
you can set the horizontal width of an element using either a length value or percentage
for fixed layouts, use pixels
for flexible layouts, use percentages
for images that distort when stretched/shrunk (that's most images), use pixels, not percentages
25
26
Calculating Box Model Width
the width you specify applies to the content, padding and border only, not the margin
the total width is the result of adding the margin to this width
27
Setting Element Height
height property lets you set the vertical height of an element
normally the content should determine the height of the element
height is useful when you need to create a box with specific dimensions
div {height: 150px; width: 300px;}
28
Floating Elements
the float property lets you position an element to the left or right edge of its containing element
you can float an image or content box to the left or right of text
29
30
.floatBox {
width: 200px;
float: left;
border: 1px solid black;
padding-bottom: 20px;
margin: 0px 20px 10px 10px;
text-align: center;
background-color: #cfc;}
Floating Elements
Clearing Elements
the clear property lets you control the flow of content around floated elements
clear is only used when you're floating another element
use the clear property to force content to start beneath a floated element rather than next to it
31
Controlling the Overflow
the overflow property lets you control when content overflows the content box that contains it
this can happen when the content is larger than the area that contains it
using the height property is the most common cause of overflow problems
can be:
visible, hidden, scroll, auto, inherit
32
Positioning
CSS property: position
Allowed values:
static – default. Elements render in order, as they appear in the document flow
absolute - element is positioned relative to its first positioned (non-static) ancestor element (if ancestors have no position set, it's based on viewport)
fixed - element is positioned relative to the viewport (browser window) (so it stays in place when you scroll)
relative - element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's normal left position
initial - resets this property to its default value.
inherit - inherits this property from its parent element.
33
Multi-column Layouts
float each column (usually div or section) left
that's correct – not left and right
multiple elements floated left will appear next to each other in the left-to-right order they appear in the code
clear anything (e.g. footer, next section) that starts below the columns.
avoid using absolute positioning unless you need it
34
Learning Outcomes
demonstrate best practices in creating standards- based websites
when you understand the CSS formatting model you can use this appropriately to design visually pleasing and well laid-out websites
35
