CSS Div Layouts
CSS Div Layouts
Web Authoring and Design
Benjamin Kenwright
Outline
Review
Why use Div Layout instead of Tables?
How do we use the Div Tag?
How do we use the Div Tag?
How to create layouts using the CSS
Div Tag?
Summary
Review/Discussion
Activity
Write down on a piece of paper the
HTML to display the following table:
(5 Minutes)
Answer
Question
What will the output be for the following
HTML/CSS?
Answer
Question
What will happen in this case?
a) make that specific paragraph green
b) error
c) blank screen
d) none of the above
Answer
Answer: d)
Text will be displayed without style
Text will be displayed without style
formatting (i.e., ‘Text’) – as the ‘colon :’
is missing
Revision Question
Write down the HTML/CSS code to
create an ‘Image’ Rollover Effect
(5 Minutes)
Answer
Table vs Div Layouts
table
Pros: supported by all browsers
Cons: bind style to content; hard to maintain
div
div
Pros: easy to maintain
Cons: not supported by all browsers
Commonly recommend – div, reasons:
CSS is to separate structure from content.
Supporting most common/popular browsers are
enough. May be it’s time for some people to upgrade
their browsers
What is Div Tag?
CSS Division (div) is a container
element and it is used to group related
items together
items together
When ever there is a situation that you
need to collect various objects into a
larger container for scripting or styling
purposes, div is the best solution
The use of <div> tag is straightforward
Div Syntax
CSS Division
CSS divisions to provide greater
flexibility and mark out regions of the
page.
page.
You can use divs by referencing the
selector in the opening tag using ID and
CLASS
e,g. id="myContainer" or
class="myContainer"
Div in an HTML document
<html>
<head>
<style type="text/css">
#box {
width: 420px;
height:120;
border-width: 2px;
border-style:solid;
border-color:red;
background: #CCC;
}
Output
}
</style>
</head>
<body>
<div id="box">
<h1>Box Model</h1>
<p>
The Box model determines how elements are positioned within the
browser window. With the Box Model, a developer can control the
dimensions, margins, padding, and borders of an HTML element.
</p>
</div>
</body>
</html>
Nesting Div
The div element grouping a generic
block of content that should be treated
as a logical unit for scripting or styling
purposes. A div can contain a number of
other divs ( child div ) like HTML Tables.
other divs ( child div ) like HTML Tables.
This is called Nesting Div
Nesting Div in an HTML page
<html>
<head>
<style type="text/css">
.parent {
width: 200px;
height:120;
border-width: 2px;
border-style:solid;
border-color:red;
padding:10px;
}
.child {
overflow : hidden;
overflow : hidden;
background: #CCC;
}
</style>
</head>
<body>
<div class="parent">
<h1> Nesting Div</h1>
<div class="child">
<h2>Child Div 1</h2>
</div>
<div class="child">
<h2>Child Div 2</h2>
</div>
</div>
</body>
</html>
Output
Careful
Div elements very carefully and use
only when it is necessary for logical
structure or styling
structure or styling
Excessive use of Div tags can make a
page difficult to manage/debug/extend
Div Layouts
Div tag allows you control over the
appearance of your website
Commonly used for website layouts
Commonly used for website layouts
(instead of tables)
Examples of Common Layouts
Variable width content:
2 columns - left menu
2 columns - right menu
3 columns
3 columns
Centered (fixed width content):
2 columns
3 columns
4 columns (fluid/variable width)
Many other …
Two Columns - Left Menu
Two Columns - Left Menu
#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
border:1px dashed #999;
background-color:#eee;
}
#Content {
margin:0px 50px 50px 200px;
padding:10px;
padding:10px;
border:1px dashed #999;
background-color: #eee;
}
#Menu {
position:absolute;
top:100px;
left:20px;
width:150px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
}
Two Columns
Centered Fixed Width
Two Columns
Centered Fixed Width
body {
margin:0px;
padding:0px;
text-align: center;
}
#Wrapper {
#Menu {
float:right;
width:200px;
background: #eee;
}
#Content {
#Wrapper {
width:700px;
margin-right:auto;
margin-left:auto;
border:1px dashed #999;
}
#Header {
background: #eee;
}
#Content {
float:left;
width:500px;
background: #666;
}
#Footer {
clear: both;
background: #eee;
}
Two Columns - Right Menu
Two Columns - Right Menu
#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
border:1px dashed #999;
background-color:#eee;
}
#Content {
margin:0px 200px 50px 50px;
margin:0px 200px 50px 50px;
padding:10px;
border:1px dashed #999;
background-color: #eee;
}
#Menu {
position:absolute;
top:100px;
right:20px;
width:150px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
}
Three Columns
Flanking Menu
Three Columns
Flanking Menu
.content {
position:relative;
width:auto;
min-width:120px;
margin:0px 210px 20px 170px;
border:1px solid black;
padding:10px;
z-index:3; /* This allows the content to
#navBeta {
position:absolute;
width:168px;
top:20px;
right:20px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:3; /* This allows the content to
overlap the right menu in narrow windows in
good browsers. */
}
#navAlpha {
position:absolute;
width:128px;
top:20px;
left:20px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:2;
}
padding:10px;
z-index:1;
}
Z-Index (or Stack Level)
z-index: auto | <integer> | inherit
Z-axis positions are particularly relevant
when boxes overlap visually.
In addition to their horizontal and vertical
In addition to their horizontal and vertical
positions, boxes lie along a "z-axis" and are
formatted one on top of the other.
Boxes with higher z-index stacked on top of
the boxes with lower z-index.
Boxes with the z-index are stacked back-to-
front according to document tree order.
Three Columns
Centered Fixed Width
Three Columns
Centered Fixed Width
body {
text-align:center;
margin:0px;
padding:0px;
font:12px verdana, arial, helvetica,
sans-serif;
}
#centercontent {
float:left;
width:400px;
background-color: green;
}
#leftcontent {
float:left;
width:175px;
#frame {
width:750px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
text-align:left;
border:1px dashed #999;
background-color: yellow;
}
#topcontent {
background-color: #eee;
}
width:175px;
background-color: red;
}
#rightcontent {
float:left;
width:175px;
background-color: red;
}
#bottomcontent {
background-color:#eee;
text-align:center;
}
Four Columns
Variable Width
Four Columns
Variable Width
#topcontent {
background-color: yellow;
}
#leftcontent {
position: absolute;
left:1%;
#centerright {
position: absolute;
left:51%;
width:28%;
top:50px;
background:#fff;
}
left:1%;
width:20%;
top:50px;
background:#fff;
}
#centerleft {
position: absolute;
left:22%;
width:28%;
top:50px;
background:#fff;
}
}
#rightcontent {
position: absolute;
left:80%;
width:19%;
top:50px;
background:#fff;
}
CSS Table
HTML table styling with CSS properties
CSS table properties offer better control
of the presentational aspects of the
of the presentational aspects of the
Table
Example
CSS
Output
Table width and height in CSS
Table width and height, use CSS width,
height properties
For example, table width as 30% and
For example, table width as 30% and
height of the td set to 40px
Table column width in CSS
Specify column width in CSS, use the
width property to td
CSS Table Row height
Set Row Height through CSS line-height
property it set to each tr.
CSS Table border
Table border in CSS, use the CSS
border property
CSS Collapse Table borders
CSS Collapse property takes two
values, separate and collapse
separate : The separate value forced all cells
have their own independent borders and
allow spaces between those cells.
collapse : This value collapse all spaces
between table borders and cells, so you can
see as a single line border
CSS Table Text Align
Align text horizontally and vertically in
CSS.
Horizontal: text-align property
Horizontal: text-align property
Vertically: vertical-align property
CSS Table Cell Padding
CellPadding is used to control the space
between the contents of a Cell and the
Cell borders
Cell borders
CSS Table Cell Spacing
Cellspacing attribute places space
around each cell in the table. To specify
cell Spacing in CSS, use the CSS
border-spacing property
border-spacing property
CSS Table background Image
CSS Shadow on a Table
CSS Rounded Corners Table
Highlight CSS Table
Row on Hover
This Week
Review Slides
Read Associated Chapters
Online Quizzes
Additional quizzes each week
Do this weeks Tasks
Implement Style Sheet Examples
Update Github Website
Regularly make commits/updates
Structure your/folders/sections
• Manage/demonstrate different features/techniques
Summary
Overview of CSS Div Layouts
Tables and CSS Styles
Hands-On/Practical
Hands-On/Practical
Questions/Discussion
Research Task:
Adding ‘Icon’ to your webpages
Challenge
Create website like this
-Rollover Images
(select areas/items)
-Animations
(water/clouds/rain)
Puzzle to Solve for Next Week
Print out/or copy out your answers and bring them with you for next lesson
Question
Write down the html/css to create the
following output:
(5 minutes)
(5 minutes)
Answer
