Transcript Using CSS for Layout - Department of Computer and Information

Using CSS for Float Layouts
CSCI N241: Fundamentals of Web Design
Copyright ©2006  Department of Computer & Information Science
Goals
By the end of this lecture, you should
understand …
• … how elements in a web page flow in a
normal layout.
• … how block and inline elements flow
around floated elements.
• … how to build a Liquid Layout.
• … how to build a Frozen Layout.
• … how to build a Jello Layout.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
What is Flow?
• Flow describes the way in which the browser
positions elements in a web page.
• The browser positions block elements on top
of one another, with a blank line between
them. Block elements never give up their
vertical position as a browser resizes.
• The browser positions inline elements right to
left. As the browser collapses, it will reposition inline elements on new lines, as
needed.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Flow & Margins
• When two inline elements are side by
side, the flow of the web page will
respect each element's margin.
• However, when we place two block
elements on top of one another (or side
by side), the flow will collapse the
smallest of the two margins. The two
elements will share the largest margin.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Flow & Nested Block Elements
• When we nest a block element inside
another, flow will still collapse the
smallest margin.
• However, if either of the elements has
a border, the margins remain intact.
• Why? The margins don't touch one
another.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Floating an Element
•
•
The float property "takes an element
and floats it as far left or right as it
can."
To float an element:
1. Give the element an identity (id).
2. Give the element a width.
3. Move the element's code directly below the
element under which you want the floated
element to appear.
4. Add a float property to element's style.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Float … the Browser's View
• The browser renders elements using flow,
from top to bottom.
• When the browser encounters a floated
element, it removes that element from the
flow of the page.
• Since the browser removes the floated
element from the normal flow, block elements
"fill in" behind the floated element.
continued …
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Float … the Browser's View
• The block level elements ignore the
floated element's borders.
• However, the inline elements (text,
images, etc) contained in those
block elements respect the floated
element's borders and flow around
it.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let's Try One!
• Download and expand the file
"n241AdvPageLayoutFloat_Examples.zip."
• Examine the file "Head First
Lounge/lounge.html."
• Move the elixirs <div> below the music
recommendations and then save and view the
file. Where did it position?
• Now, move the elixirs <div> back, turn off
styles and then check it out!
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let's Try Another
• Edit the "Starbuzz/index.html" file.
Move the sidebar <div> just below the
header <div>.
• Now, edit
"Starbuzz/css/starbuzz.css" by
adding the following declarations to the
#sidebar rule:
width : 280px;
float: right;
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Defining a Boundary
Between Columns
• Right now the Starbuzz page looks as if
the backgrounds of the main <div> and
the sidebar <div> blend with each
other.
• How can we fix this? We need to
redefine the right margin of the main
<div> at least as large as the width of
the sidebar. Edit the following
declaration in the #main rule:
margin: 0px 330px 10px 10px;
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The Overlap Problem
• With wider resolutions, the sidebar
might overlap the footer due to the
flow of the block elements.
• How can we fix this? We can add a
clear property to the footer
<div> …
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The clear Property
• With the clear property, we can
specify that no floating content
may be on the right, left or both
sides of an element.
• Find the #footer class and add the
following declaration:
clear: right;
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Looks Good So Far, But …
• Try turning off the CSS for the
Starbuzz page. What are the
problems?
• Let's try swapping the sidebar
<div> with the main <div>.
• Then make the changes to your CSS
depicted in the next few slides …
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Adjusting #sidebar
• Delete the width & float declarations
from the #sidebar class.
• Edit the margin declaration to look like
this:
margin: 0px 10px 10px 470px;
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Adjusting #main & #footer
• In the #main rule, edit the margin
declaration to look like this:
margin: 0px 10px 10px 10px;
• Add the following declarations to the #main
rule:
width: 420px;
float: left;
• Change the clear property of the #footer
rule to read:
clear: left;
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Liquid Layouts
• So far, we've been working with liquid
layouts. Liquid layouts fill whatever
width is left when the browser resizes.
• Liquid layouts make good use of their
screen space but might now always fit
our needs for our layout looking
generally the same on different sized
browsers.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Frozen Layouts
• Frozen layouts "lock" elements into
place, so they appear frozen to the
page.
• Frozen layouts allow us to keep
elements from expanding as a
browser window changes in size.
• Let's try one …
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
First, the XHTML side …
• In your index.html, add the following
div, nesting everything else in the page
(except for the <body> tag):
<body>
<div id = "allcontent">
…
</div>
</body>
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Now for the CSS …
• Add the following rule to your
starbuzz.css file:
#allcontent
{
width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675C47;
}
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Almost there …
• The Frozen Layout is an
improvement over the Liquid
Layout, but how can we fix the
large gap on the right side when the
browser is very wide?
• The Jello Layout to the rescue …
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Making Jello
• Add the following declarations to
the #allcontent class:
margin-left: auto;
margin-right: auto;
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Next Time …
• We'll discuss another approach to
layouts using absolute positioning.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Questions?
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
References
• Freeman, Elisabeth and Eric
Freeman. Head First HTML with
CSS & XHTML. Sebastopol, CA:
2006.
• Neiderst-Robbins, Jennifer. Web
Design in a Nutshell, Third
Edition. Sebastopol, CA: 2006.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science