Cascading Style Sheets
Layout
CS 1150 Spring 2017
In This Lecture
• Controlling the position of elements
• Creating site layouts
• Designing for different sized screens
Key Concepts in Positioning Elements
• CSS treats each HTML element as if it is in its own box
• This box will either be a block-level box or an inline box
•
•
Block-level elements start on a new line (<h1>, <p>, <ul>, <li>)
Inline elements flow in between surrounding text (<img>, <b>, <i>)
• If one block-level element sits inside another block-level element then the
outer box is known as the containing or parent element
•
•
It is common to group a number of elements together inside a <div> (or other block
level element).
For example, you might group together all of the elements that form the header of a
site (such as the logo and main navigation)
Positioning Schemes
•
•
•
•
•
Normal flow – Every block-level element appears on a new line, causing each item
to appear lower down the page than the previous one
Relative positioning – This moves an element from the position it would be in
normal flow, shifting it according to the styling applied to it. This does not affect
the position of surrounding elements.
Absolute positioning – This positions the element in relation to its containing
element. It is taken out of normal flow, and the other elements on the page ignore
the space it would have taken up.
Fixed positioning – This is a form of absolute positioning that positions the element
in relation to the browser window, as opposed to the containing element.
Floating elements – Floating an element allows you to take that element out of
normal flow and position it to the far left or right of a containing box
Normal Flow
• In normal flow, each block-level element sits on top of the next one
• Since this is the default way in which browsers treat HTML elements, you do
not need a CSS property to indicate that elements should appear in normal
flow
Relative Positioning
• Relative positioning moves an element in relation to where it would have
been in normal flow
• If you set an element relative positioning, you can then style it to change its
position on the page with the top, left, bottom, and right rules
•
•
•
position: relative;
top: 10px;
left: 100px;
Absolute Positioning
• When the position property is given the value of absolute, the box is taken
out of normal flow and no longer affects the position of other elements on
the page.
• The box offset properties (top, bottom, left, right) specify where the
element should appear in relation to its containing element
•
•
•
position: absolute;
top: 10px;
left: 100px;
Fixed Positioning
• Fixed positioning is a type of absolute positioning that requires the position
property to have a value of fixed
• It positions the element in relation to the browser window
• When a user scrolls down the page, it stays in the exact same place
• To control where the fixed position box appears in relation to the browser
window, the box offset properties (top, bottom, left, right) are used
Overlapping Elements
• When you use relative, fixed, or absolute positioning, boxes can overlap
• If boxes do overlap, the elements that appear later in the HTML code sit on
top of those that are earlier in the page
• If you want to control which element sits on top, you can use the z-index
property
• Its value is anumber, and the higher the number, the closer that element is
to the front
•
•
For example, an element with a z-index of 10 will appear over the top of one with a zindex of 5
z-index: 5;
Floating Elements
• The float property allows you to take an element in normal flow and place it
as far to the left or right of the containing element as possible.
• Anything else that sits inside the containing element will flow around the
element that is floated.
• When you use the float property, you should also use the width property to
indicate how wide the floated element should be. If you don’t, results can
be inconsistent, but the box is likely to take up the full width of the
containing element.
•
•
float: right;
width: 200px;
Using Float to Place Elements Side by Side
• A lot of layouts place boxes next to each other. The float property is
commonly used to achieve this.
• To do this, you can float block-level elements to the left or right within a
parent container
Clearing Floats
• The clear property allows you to say that no element (within the same
containing element) should touch the left or right hand sides of a box.
• It can take the following values:
•
•
•
•
clear: left;
clear: right;
clear: both;
clear: none;
Parents of Floated Elements: Problem
• If a containing element only contains floated elements, some browsers will
treat it as if it is zero pixels tall
• A CSS solution to this problem adds two CSS rules to the containing
element:
•
•
overflow: auto;
width: 100%;
Fixed Width Layouts
• Fixed width layout designs do not change size as the user increases or
decreases the size of their browser window
• Measurements tend to be given in pixels
Liquid Layouts
• Liquid layout designs stretch and contract as the user increases or decreases
the size of their browser window
• Measurements are typically given in percentages
Demo Website
• https://www.cs.mtsu.edu/~crn2k/example/