Session 4: CSS Positioning

We have already done exercises about building a basic HTML page with elements like <p> <img> <a> etc. We taught you how to style the different colors and font sizes of these elements using CSS in the previous session. We learned about <div> and how it is a container for the organizational sections of your page, and even created a few <div>s. Now it’s time to learn how to layout your page using CSS.

The most essential thing to know about positioning in CSS is the “box model” (see figure below). Basically, it means that all of the content in your HTML page is invisibly represented by a box. Content generally means text and images (the two most basic things that make up a webpage). There are a series of invisible boxes around your content, and by changing the width and height of these boxes you can position the content on the page. Let’s start by defining the parts of the box model:

Margin

Border

Padding

Content

Content – generally text or images. The size of the content “box” depends on the size of the font/image.

Padding – the space around the content. The padding in still within the element (i.e. <p>) that you are styling. Padding never overlaps, always adjoins.

Border – if you create a border, it will be along the outside edge of the padding, and its width will cut into the width of the padding.

Margin – the space between this element and the next; margin is outside the element being styled. Margins will occasionally overlap, occasionally adjoin.

What this means for you

You can use the size of the margin and padding to create empty space around your content, and by pushing the content one way or another with this empty space, you can position it in the place you want. The way you style margin and padding is like this:

[element, class, or id here] { margin: #px #px #px #px;

padding: #px #px #px #px; }

The four spaces with a numeral sign represent the TOP, RIGHT, BOTTOM, LEFT edges (in that order) of the box around your content. The easiest way to remember this is TRBL like “trouble”!

So, if you wanted to give your image 5 pixels of padding, a 1px solid black border, and 10px of margin, it would look like this:

While the syntax for margin and padding are the same, there is an important difference in how they are used. Padding is relative to the content, so when you say the top margin should be 5px, it counts five pixels from the topmost edge of the content. Padding measures the distance from the content outward. However, margin is relative from something else – margin is relative to the edge of the parent container. Margin measures the distance from the parent container inward towards the object. Therefore, in order to measure margin, you have to have something to measure against – another box. In order to measure it, therefore, you have to know where the parent container is on the page, and this involves “flow.”

Flow

The normal flow of a document is from left to right, top to bottom. If you were to just type in paragraphs and insert images, just like normal text they would stretch all the way to the right before wrapping around back to the left, underneath the thing before. However, sometimes you want to position something that is not in the normal flow, and you can use three commands to do this: float, clear, and position.

When you start thinking about positioning, remember: things in the page are always relative to something else. The most basic point of origin is the top left corner of the browser window – think of it like a grid, and that corner is (0,0) or zero to the right, zero to the bottom. Things are mostly relative to the position of their parent container, and this means that wherever the top-leftmost corner of the parent container is, that is where (0,0) is.

{ Float: (left, right) }

Floating an element pushes it to one side, and causes all other elements to flow around it. This works in ALL browsers! The margin for float is never collapsed (“collapsing margins” is when the margins for two things overlap, instead of adding together.) so if you put a margin of 20px, it will always be 20px. Floating things will stack up on each other unless you “clear” them. Think of it like words in a word processor: as you type, the words line up one after another until they get to the end of the line, then the next one wraps around and the whole process starts over again. Floating objects do the same. You can float something to the left or right.

{ Clear: (left, right, both, none) }

Clear is when you force an object to go around the previous one to the next line. It’s basically like hitting “enter” to move something down, but it doesn’t create a new line break, it just tells the browser “move this down.” You can clear to the left, right, both, or none.

{ Position: (Absolute, Relative) }

Absolutely positioning a an element takes it completely out of normal flow (putting it on a new plane, almost) and positions it relative to the next highest positioned containing block, or the <html> element. Other objects will not flow around it.

Relatively positioning a element positions it relative to where it would normally appear in the natural flow of the document. Other elements will flow around the area it originally was in, but will overlap with it in its new position.

This may seem complicated, but the best way to understand it is to try it out. We are going to go to the web to try out some floating and positioning.

Go to this website: http://www.w3schools.com/css/css_examples.asp (there’s an underscore between css and examples). Here we will be trying out various CSS techniques.

Exercise 1) Margin and Padding. Go to the sections marked “Margin” and “Padding” and click at least two examples of each. Learn how to change the margin and padding of an element.

Exercise 2) Float. Go to the section titled “Classification” and start with the link named “A simple use of the float property.” Check out the examples of float and clear.

Exercise 3) Positioning. Go to the section marked “Positioning” and check out the two examples “Position an element relative to its normal position” and “Position an element with an absolute value.” Test these to see how they work.

Now find your index.html page, and try making some changes to your own file. Some suggestions for your own index.html page could be:

· Incorporate at least one example of margin and one of padding in your own “index.html” file.

· Make the image in your “index.html” page float to the right!

· Try to position one of the <p>s in your page absolutely or relatively.

< Save your work and check the results. When you’re ready, move on to the next exercise.

The layout of your page is now up to you! The following pages will give you some code that will help you create a basic layout for your page, but we encourage you to make it different and do your own thing using the CSS we have shown you. You can go to www.w3schools.com anytime for more help with CSS or HTML reference, or ask any of the Web Team members for help at lis-web@hawaii.edu.

A great CSS reference book: CSS: The Definitive Guide, by Eric Meyers (3^rd ed., 2006).

Some other good CSS reference sites are:

http://meyerweb.com/eric/css (same guy as the book above)

http://www.alistapart.com (a handy site for all kinds of CSS tricks and web design in general)

http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/ (a recent article about the latest, and supposedly greatest, CSS tricks. Probably will be outdated by the next time we do these sessions, but a good read for now!)

http://www.brainjar.com/css/positioning (A tutorial on positioning, easy to read with good examples)

Navigation creation!

Now go to your “index.html” page. Many people have asked about making a “cool” navigation section – let’s put together what we’ve learned to make a navigation section of your page. Depending on how far you got in the past exercises, you should have at least three links on your index page and maybe a div.

Now add this code to your <style> section in the <head> (you can keep previous code in there as well if you want):

#nav {

float: left;

width: 150px;

margin: 0px;

padding: 0px;

background-color: gray;

font-size: .9em;

}

#nav a {

display: block;

text-decoration: none;

color: #FFFFFF;

background-color: gray;

margin: 0px;

     padding: 5px;

}

#nav a:hover {

background-color: #6699FF;

}

</style>

</head>

< Always remember to save your work, either on the desktop (local copy) or upload it each time to the UH server to see the live version. You should be expecting to see a box with your links in it, one on top of the other; when you hover on the links, they should turn blue – cool huh?

Take a moment to think about each piece of the style you just added – how does each piece function? If you change the values of some of the pieces, what happens? Take some time now to play around and change some of the above values to see what happens – this is a great way to learn CSS!

A Simple Layout (using what you already have)

We are going to add a few more bits and pieces to your index.html file in order to get it ready and working more like a complete page.

Open your “index.html” file. We are going to add a link telling the browser to pull all the styles from the linked style sheet “eportfolio.css” which will be in the same folder as the webpage we are working on. Later, you will need to move all of your style rules from the top of your HTML page to this CSS file.

<html>

<head>

<title>My ePortfolio</title>

<link href="eportfolio.css" rel="stylesheet" type="text/css">

</head>

<body>

Content goes here

</body>

</html>

Many people create a #container <div> to contain all of the information on the page. This is useful for some sorts of positioning, like if you want your page to have a set width. The #container div (if you want one) is placed next to the <body> </body> tags to contain everything that appears on the finished page.

<html>

<head>

<title>My ePortfolio</title>

</head>

<body>

<div id="container">

Content goes here

</div> 

</body>

</html>

Note: the arrow signs we placed at the end of the </div> are “comment” brackets – this is how you make notes to yourself in the code that the browser won’t read. I think it’s helpful to tell where the end of the <div> is, because when your page gets really long, it’ll be easier to see what’s what.

Next, we create four <div>s (inside the container) around the four main elements of the page; the picture or banner across the top of the page (this space can also include a navigation bar); the navigation bar, the main text of the page, and a footer at the bottom which can contain contact and copyright information. We already have the skeleton for the “banner” “nav” and “content” sections, but we need to add the last one “footer.”

The outline of our page is going to look something like this:

You already have the makings of this in your “index.html” page! We started out by making some links and some paragraphs inside those divs last week, now you can see what they will become. We are going to create some <span> sections also to enclose your links. This will make it possible to assign ids and classes to them.

<body>

<div id="banner">Library Student's ePortfolio</div>

<div id="nav">

<span><a href="courses.html">COURSES</a></span>

<span><a href="resume.html">RESUME</a></span>

</div> 

<div id="content">

<p>You should already have some content from previous sessions – copy and paste that into this section.</p>

</div> 

<div id="footer">

</div> 

</div>

</body>

If you copy this code into your “index.html” page, you will have a complete, if rudimentary, page. Now all you need to do is style it! On the next page is the entire CSS you will need to style the above HTML code – put that code into the “eportfolio.css” file mentioned above, and that’s it! Again, as always, patience and persistence will pay off; and if you ever get stuck, email lis-web@hawaii.edu.

body { *ONE POSSIBLE VERSION OF THE eportfolio.css FILE*

background-color: #006699;

}

#container {

width: 900px;

margin: 10px;

margin-left: auto;

margin-right: auto;

padding: 10px;

font-family: Geneva, Arial, Helvetica, sans-serif;

font-size: .9em;

}

#banner {

padding: 5px;

background-color: #D5DBE1;

font-size: 1.1em;

}

#content {

padding: 10px 10px 10px 170px; /* TRBL; this keeps the text from flowing around the sidebar */

margin-left: 0px;

background-color: #EBEBEB;

}

#nav {

float: left;

width: 150px;

margin: 0px;

padding: 5px;

background-color: gray;

font-size: .9em;

}

#nav a {

display: block; /* this makes the link look like a block element - we could give it margins, etc. */

text-decoration: none;

color: #FFFFFF;

background-color: gray;

margin: 0px;

padding: 5px;

width: 140px;

}

#nav a:hover {

background-color: #6699FF;

}

#urhere a, #urhere a:hover {

background-color: #990033;

}

#footer {

clear: both;

      padding: 5px;

background-color: rgb(213, 219, 225);

font-size: .7em;

text-align: center;

} /* end eportfolio.css – good luck with your webpage!! */

selector	what it does	how you write it

POSITIONING
position: absolute	Positions the element absolutely (other elements will cover it)	{position : absolute; top: 0px; left: 0px;} (needs at least one: top right bottom left)
position: relative	Positions element relative to where it would be in the normal flow	{position : relative ; top: 0px; left: 0px;} (needs at least one: top right bottom left)
position: static	Remains within normal flow but cannot be repositioned	{position: static;}
position: fixed	Element doesn’t scroll	{position: fixed;}
float	Floats the element	{float : left ;} {float : right ;}
clear	Clears a float (element begins below float)	{clear : left ; } {clear : right ;} {clear : both ;}
padding	Adds padding around the element. Background colors/images will fill padding	{padding : top right bottom left ;} {padding : all ;} (if you only have one measurement defined it will pad all four sides of the element)
border	Defines the border around the element	{border : width style color ; } width = measurement (2px) thin medium thick style = solid dotted dashed double groove ridge
margin	Defines how far away the next element begins	{margin: top right bottom left ;} {margin: all ;} (same as padding)

LINKS	must be in specific order: LVHA (LoVe, HA!)
a:link	Defines a link	a:link {
a:visited	Defines a visited link	a:visited {
a:hover	Defines a link the mouse is hovering over	a:hover {
a:active	Defines a link that is being viewed	a:active {

URL	defines a url (image, link) relative to style sheet!!	{background-image : url ( “pic.jpg” ) ; }

http://www.intensivstation.ch/en/templates A place to start out with getting some empty layout templates. Simple enough for the beginner. For more, try a google search for “css templates.”

Flow

POSITIONING

position: absolute

position:

relative

LINKS