Issuu on Google+

Web Page Layout MethoD 1: *

Absolute Positioning

*

Absolutely positioning all the elements of an html page is not the most elegant, flexible or semantically proper way to go about making stuff go where you want it to go. But it’s a great way to get started.

1


Overview ➸➸Start with an html page that has all the content marked up, but not yet styled with CSS.

➸➸Make a div with the id wrapper (<div id=”wrapper”>) and put all your content (everything inside the body element ) in it.

➸➸In the CSS, style the wrapper div like so: #wrapper { margin:0 auto; position:relative; width:(some # of pixels); height:(some # of pixels); }

➸➸Put each chunk of content inside a new div. Give each div an id that describes the content.

➸➸In the CSS, create a style selector for each div. position:absolute; height:_________; width: _________; top: ___________; left: ___________;

Give each:

Top and left values tell the div where to be inside the wrapper div, and your page is now beautifully arranged! 2


Absolute Positioning step-by-step

1

Start with an html page that has all the content marked up, but not yet styled with CSS.

The markup:

In the Browser:

<!DOCTYPE html> <head> <title>Moby

HTML</title>

<meta charset=”UTF-8”> <style type=”text/css”> </style> </head> <body> <img src=”orange_sp.gif” alt=”orange sperm whale”> <h1> Chapter 1: The Whale</h1>

<p>Call

me Ishmael.

</p>

<p> Some years ago -- never mind how long precisely -having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen, and regulating the circulation.

</p>

<p>Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet...</p>

<h3>Some Whales</h3> <ul> <li>The Right Whale</li> <li>The Fin Back Whale</li> <li>The Hump-backed Whale</li> <li>The Razor Back Whale</li> </ul> </body> </html>

3


Absolute Positioning step-by-step

2

Make a div with the id wrapper and put all your content (everything inside the body element ) in it. The markup: <!DOCTYPE html> <head> <title>Moby

HTML</title>

<meta charset=”UTF-8”> <style type=”text/css”> </style> </head> <body> <div id=”wrapper”>

Now everything is tucked in a div called wrapper

<img src=”orange_sp.gif” alt=”orange sperm whale”> <h1> Chapter 1: The Whale</h1>

<p>Call

me Ishmael.

</p>

<p> Some years ago -- never mind how long precisely -having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen, and regulating the circulation.

</p>

<p>Whenever

I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet...</p>

<h3>Some Whales</h3> <ul> <li>The Right Whale</li> <li>The Fin Back Whale</li> <li>The Hump-backed Whale</li> <li>The Razor Back Whale</li> </ul> </div><!--end wrapper--> </body> </html>

4


Absolute Positioning step-by-step

3

How does it look in the browser? Exactly the same. You havenâ&#x20AC;&#x2122;t styled div id wrapper. In the Browser:

5


Absolute Positioning step-by-step

4

So make a CSS style for div id wrapper:

<!DOCTYPE html>

Position:relative; will make the layout magic happen later

Margin: 0 auto; makes the content – all the stuff inside the div with the id “wrapper” – center inside the browser window, no matter how wide the window.

<head> <title>Moby

HTML</title>

<meta charset=”UTF-8”> <style type=”text/css”>

Height and width give your web page a fixed width and height

#wrapper { position:relative; width:600px; height:1000px; margin:0 auto; } </style> </head> <body> <div id=”wrapper”>

<img src=”orange_sp.gif” alt=”orange sperm whale”> <h1> Chapter 1: The Whale</h1>

<p>Call

me Ishmael.

</p>

6


Absolute Positioning step-by-step

5

Now how does your web page look? Centered, and 600px wide. W00T!

In the Browser:

7


Absolute Positioning step-by-step <!DOCTYPE html> <head> <title>Moby

HTML</title>

<meta charset=”UTF-8”>

6

<style type=”text/css”>

Next step: put each chunk of content you want to position inside a new div. Give each div an id that describes the content. #wrapper { position:relative; width:600px; height:1000px; margin:0 auto; } </style> </head> The markup: <body>

<div id=”wrapper”> <div id=”header”> </div><!-- end header -->

Div for image Div for headline

<div id=”littlewhale”> <img src=”orange_sp.gif” alt=”orange sperm whale”> </div><!-- end little whale -->

This div is empty. I created it to make the pink header box. I’ll use a background-image declaration in CSS to create the color.

<div id=”chapter1”> <h1> Chapter 1: The Whale</h1> </div><!-- end chapter1 --> <div id=”maincontent”> <p>Call me Ishmael. </p> <p> Some years ago -- never mind how long precisely -- having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen, and regulating the circulation. </p> <p>Whenever

I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet...</p>

Div for paragraphs

</div><!-- end maincontent -->

Div for sidebar list

<div id=”sidebar”> <h3>Some Whales</h3> <ul> <li>The Right Whale</li> <li>The Fin Back Whale</li> <li>The Hump-backed Whale</li> </ul> </div><!-- end sidebar --> </div><!--end wrapper--> </body> </html>

8


Absolute Positioning step-by-step

7

How does it look in the browser? Exactly the same. You haven’t created any CSS styles. So let’s do it!

In the Browser:

9


Absolute Positioning step-by-step

8

It helps to start with a sketch in which you decide where you want to put stuff:

10


Absolute Positioning step-by-step

9

Use CSS selectors to style the divs you made so that they go where you want them to go within div id wrapper. If you recall, #wrapper centers everything in it. And its position:relative delcaration makes it possible to <!DOCTYPE html> position the divs within it. <head> <title>Moby

HTML</title>

<meta charset=”UTF-8”> <style type=”text/css”> #wrapper { position:relative; width:600px; height:1000px; margin:0 auto; } #header { position:absolute; width:600px; height:125px; background-color:#FFCCCC; top:0; left:0; } #littlewhale { position:absolute; top:0; left:0; }

The “wrapper” selector has this declaration: position: relative; which enables all the divs inside of it to be positioned absolutely in relation to the wrapper div.

11


<head> <title>Moby

HTML</title>

Absolute Positioning step-by-step <meta charset=”UTF-8”> <style type=”text/css”>

q

#wrapper { position:relative; To create a pink header width:600px; create height:1000px; #header CSS: margin:0 auto; } #header { position:absolute; width:600px; height:125px; background-color:#FFCCCC; top:0; left:0; } #littlewhale { position:absolute; top:0; left:0; } #chapter1 { position:absolute; top:33px; left:250px; } #maincontent { position:absolute; width: 350px; height: 400px; top:125px; left:250px; } #sidebar { position:absolute; top:125px;

box and place it at the top of the page,

The #header CSS selector does the following: • makes div id header into a 600px by 125px box; • gives it a lovely pink background color; • positions it absolutely (i.e., sticks it) 0px from the top of the wrapper div and 0px from the left of the wrapper div.

12


position:relative; width:600px; height:1000px; margin:0 auto;

Absolute Positioning step-by-step

w

} #header { position:absolute; width:600px; To make the little whale image height:125px; background-color:#FFCCCC; create top:0; #littlewhale CSS: left:0; } #littlewhale { position:absolute; top:0; left:0; } #chapter1 { position:absolute; top:33px; left:250px; } #maincontent { position:absolute; width: 350px; height: 400px; top:125px; left:250px; } #sidebar { position:absolute; top:125px; left: 0; width:225px; height:400px; border-right: 1px solid #FFCCCC; } </style> </head>

stick up at the top and left,

The #littlewhale CSS selector does the following: â&#x20AC;˘ makes div id littlewhale into a box that takes its dimensions from the contents i.e., the image. â&#x20AC;˘ positions the box absolutely (i.e., sticks it) 0px from the top of the wrapper div and 0px from the left of the wrapper div.

13


width:600px; height:125px; background-color:#FFCCCC; top:0; left:0;

Absolute Positioning step-by-step

e

To

} #littlewhale { position:absolute; make the title go to its top:0; left:0; } #chapter1 { position:absolute; top:33px; left:250px; } #maincontent { position:absolute; width: 350px; height: 400px; top:125px; left:250px; } #sidebar { position:absolute; top:125px; left: 0; width:225px; height:400px; border-right: 1px solid #FFCCCC; } </style>

place, create #chapter1 CSS:

The #chapter1 CSS selector does the following: • makes div id chapter1 into a box that takes its size from its contents - i.e., the h1 element. • positions the box it absolutely (i.e., sticks it) 33px from the top of the wrapper div and 250px from the left of the wrapper div.

</head> <body> <div id=”wrapper”> <div id=”header”> </div><!-- end header -->

14


left:0;

} #littlewhale { position:absolute; top:0; left:0; } #chapter1 { To put position:absolute; the paragraphs in a top:33px; create left:250px; #maincontent CSS: } #maincontent { position:absolute; width: 350px; height: 400px; top:125px; left:250px; } #sidebar { position:absolute; top:125px; left: 0; width:225px; height:400px; border-right: 1px solid #FFCCCC; } </style>

Absolute Positioning step-by-step

r

main content section,

The #maincontent CSS selector makes div id maincontent do the following: • make an invisible 350x400px box around the paragraph elements inside it. • positions the box it absolutely (i.e., sticks it) 125px from the top of the wrapper div and 250px from the left of the wrapper div. • note that the sidebar div just scoots up into place like a sidebar. At this point, you wouldn’t have to make a CSS selector for it to style it any further

</head> <body> <div id=”wrapper”> <div id=”header”> </div><!-- end header --> <div id=”littlewhale”> <img src=”orange_sp.gif” alt=”orange sperm whale”> </div><!-- end little whale -->

15


} #chapter1 { position:absolute; top:33px; left:250px; } #maincontent { position:absolute; width: 350px; If you want to change the height: 400px; #sidebar CSS top:125px; left:250px; } #sidebar { position:absolute; top:125px; left: 0; width:225px; height:400px; border-right: 1px solid #FFCCCC; } </style>

Absolute Positioning step-by-step

t

layout of div id sidebar, create

</head>

The #sidebar CSS selector makes div id sidebar do the following: • make an invisible 225x400px box around the list elements inside it. • positions the box it absolutely (i.e., sticks it) 125px from the top of the wrapper div and 0px from the left of the wrapper div. • Creates a 1 pixel border on the right side of the div.

<body> <div id=”wrapper”> <div id=”header”> </div><!-- end header --> <div id=”littlewhale”> <img src=”orange_sp.gif” alt=”orange sperm whale”> </div><!-- end little whale --> <div id=”chapter1”> <h1> Chapter 1: The Whale</h1> </div><!-- end chapter1 --> <div id=”maincontent”>

16


Absolute Positioning step-by-step

FIN

17


Absolute Positioning