<!DOCTYPE html>
<html>
<head>
<title>Week 5 - Positioning</title>
<style></style>
</head>
<body>
<div id="position">
<h1>How to Position</h1>
<div id="boxes">
<div class="box" id="red"> </div>
<div class="box" id="green"> </div>
<div class="box" id="blue"> </div>
</div>
</div>
</body>
</html>
Open the index.html page from your float homework in a browser.
Allows you to "float" an element to the left or right, which brings any element beneath it up, while still respecting the space the floated element occupies.
Allows you control the float, meaning you can determine on which side of an elements other elements are not allowed to float.
.box{
float: left;
margin-right: 20px;
}
Each HTML node can be displayed in one of two ways.
HTML elements that start on a new line. Examples: <h1>, <p>, <div>
HTML elements that stay on one line and flow in between surrounding text. Examples: <span>, <strong>, <img>
In your CSS, you can determine that an element take on the properties of both. Example: display: inline-block;
There are a handful of positioning schemes that CSS makes available for you to control the layout of a page.
This is the default or normal behavior for any block-level element, that they sit on top of each other no matter how much space is around them.
Moves the element relative to where it would be in the normal flow. This does not affect the position of the elements around it.
Positions an element relative to its containing element. It is taken out the normal flow and the elements around it are positioned as if it's not there. These elements move with the page as a user scrolls.
A form of absolute positioning in that it removes the element from the normal flow of the page, but it fixes an element in the browser window and does not move with the page.
#red{
position: relative;
top: 100px;
left: 20px;
}
When positioning elements, you might run into cases where one element overlaps another.
You can set the z-index property to any number you want. The elements with the highest numbers will appear on top.
#red{
z-index: 100;
}
#green{
z-index: 105;
}
Validation no: 137804
Using your recently gained knowledge of position properties, start a new directory called position-practice and new index.html and style.css files, and use HTML and CSS to roughly re-create the wireframe on the next slide. Choose your own fonts and colors.
Hint: Use your book, Google and each other. There are multiple ways to do this. Remember how to center block level objects.
Before you leave, push your changes to GitHub.
If you are in the Javascript & jQuery module and haven't yet ordered the book, please do so (BUY Javascript&JQuery).
Read Chapter 1.