Transcript Using CSS for Absolute Layouts

Using CSS for
Absolute Layouts
CSCI N241: Fundamentals of Web Design
Copyright ©2006  Department of Computer & Information Science
Goals
• By the end of this unit, you should
understand …
• … how to place elements using absolute
positioning.
• … how to use the z-index to manipulate
a page's stacking order.
• … how absolutely positioned elements
affect flow.
• … how to use fixed positioning.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Introducing Absolute Positioning
• While the float property gave us little room
for positioning (either right or left), we can
use CSS to place elements at exact locations.
• To do so, we need to specify three
properties:
– First, we need to set the position property to
absolute.
– Next we need to specify the location using the
right or left property and the top or bottom
property.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
What Position Properties Do
• The top/bottom properties specify how far the
browser will position an element's top/bottom border
from the top/bottom border of the browser's
window.
• The right/left properties specify how far the
browser will position an element's right/left border
from the right/left border of the browser's window.
• When positioning an element, we only specify top OR
bottom and we only specify right OR left.
• We can use any unit of length that we need – pixels,
percentages, etc. for the value.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Flow & Absolute Layouts
• When we use absolute positioning to
position an element, the browser
removes that element completely from
the flow.
• Unlike floating an element, even inline
elements ignore an absolutely-positioned
element's borders!
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Demonstrating Flow &
Absolute Positioning
• Expand the file
n241AdvPageLayoutAbsolute_Examples.zip
and then edit the file css/starbuzz.css.
• Find the #sidebar class and add the following
declarations:
position: absolute;
top: 100px;
right: 200px;
width: 280px;
• Try removing the width property. What
happens?
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The z-index Property
• The z-index property defines the stacking
order of layers in a web page.
• The greater the z-index value, the closer
the layer is to the user (away from the
monitor, towards the user).
• Try editing the #main rule to add the
following declaration:
z-index: 99;
• What happens? (Don't forget to remove the
z-index to reset your code!)
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let's Try One!
• In the #sidebar class, update the
top & right properties:
top: 128px;
right: 0px;
• To accommodate the width of the
sidebar, we're going to need to adjust
the margin of #main:
margin: 0px 330px 10px 10px;
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Problems with Overlap
• We're seeing the same types of
problems with overlap (on wider screen
resolutions) that we saw with the float
layouts.
• However, we can't use the clear
property to fix it here because any
elements in the flow ignore an
absolutely positioned layout completely.
• What's the solution?
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
More like a Tradeoff …
• The tradeoff is to make the footer the
same width as the main content (thus
staying out of the sidebar's way).
• Update the margin of the #footer
class:
margin: 10px 330px 10px 10px;
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Keep Goin'
• Let's add an image as a separate <div>,
close to the header. Add the following
<div> to index.html, just below the
header <div>:
<div id = "award">
<img src = "images/award.gif"
alt = "Roaster of the
Year Award" />
</div>
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Adding a Style for the Image
• Now, add the following style to your
starbuzz.css file:
#award
{
position: absolute;
top: 30px;
left: 365px;
}
• Try re-sizing the browser (make it smaller).
What happens to the image? How can we fix
it?
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
More on the z-index
• We can fix the problem with the image
disappearing by specifying a z-index
value for the image's <div>.
• The value should be an integer number.
The higher the integer number, the
higher the stacking order and the closer
to the user the image will appear, in
terms of layers. Update #award:
z-index: 99;
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Using Fixed Positioning
• Another interesting positioning option is fixed
positioning.
• Fixed positioning is a lot like absolute
positioning except that the browser offsets
an element's position from the edge of a
browser's window instead of the page's
border.
• One interesting affect is that elements that
use fixed will "stay in place" as a user scrolls.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Trying Fixed Positioning
• Add the following image to the end of your
index.html:
<div id = "coupon">
<a href = "freecoffee.html"
title = "Click for free coffee.">
<img src = "images/ticket.gif"
alt = "Starbuzz Coupon" />
</a>
</div>
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Adding Style to the
Fixed Element
• Add the following rule in starbuzz.css:
#coupon
{
position: fixed;
Now, try editing the
top: 300px;
left property to read a
left: 0px; -90px;
negative value.
}
#coupon img, #coupon a:link,
#coupon a:visited
{
border: none;
}
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