Layout absolute poz

1

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.

*

2

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. Give each:

position:absolute; height:_________; width: _________; top: ___________; left: ___________;

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

3

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

absoLute Positioning steP-by-steP

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>

1

4

Make a div with the id wrapper and put all your content (everything inside the body element ) in it.2


<!DOCTYPE html>



<style type=”text/css”></style>

</head>

<body>

<div id=”wrapper”><img src=”orange_sp.gif” alt=”orange sperm whale”>





<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></body>

</html>

The markup:

Now everything is tucked in a div

called wrapper

5

How does it look in the browser? Exactly the same. You haven’t styled div id wrapper.3


In the Browser:

6

So make a CSS style for div id wrapper: 4


<!DOCTYPE html>



<style type=”text/css”>

#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”>





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

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.

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

7

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


In the Browser:

http://www.urbandictionary.com/define.php?term=woot

8

Next step: put each chunk of content you want to position inside a new div. Give each div an id that describes the content.6

absoLute Positioning steP-by-steP<!DOCTYPE html>




#wrapper { position:relative; width:600px; height:1000px; margin:0 auto;}

</style>

</head>

<body>

<div id=”wrapper”>

<div id=”header”> </div> <div id=”littlewhale”> <img src=”orange_sp.gif” alt=”orange sperm whale”> </div> <div id=”chapter1”> <h1> Chapter 1: The Whale</h1> </div> <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 fi nd myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I fi nd myself involuntarily pausing before coffi n warehouses, and bringing up the rear of every funeral I meet...</p> </div> <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>

</div></body>

</html>

The markup:

Div for image

Div for paragraphs

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

Div for sidebar list

Div for headline

9

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


In the Browser:

10

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


11

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 position the divs within it.

9


<!DOCTYPE html>




#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;}#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>

<body>


<div id=”header”> </div> <div id=”littlewhale”> <img src=”orange_sp.gif” alt=”orange sperm whale”> </div> <div id=”chapter1”> <h1> Chapter 1: The Whale</h1> </div> <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>

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.

12

To create a pink header box and place it at the top of the page, create #header CSS:q


<!DOCTYPE html>





</head>

<body>



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.

13

To make the little whale image stick up at the top and left, create #littlewhale CSS:


<!DOCTYPE html>





</head>

<body>



The #littlewhale CSS selector does thefollowing:

• makes div id littlewhale into a box that takes its dimensions from the contents - i.e., the image.

• 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.

w

14

To make the title go to its place, create #chapter1 CSS:e


<!DOCTYPE html>





</head>

<body>



The #chapter1 CSS selector does thefollowing:

• 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.

15

To put the paragraphs in a main content section, create #maincontent CSS:r


<!DOCTYPE html>





</head>

<body>



The #maincontent CSS selector makes div id maincontent do the following:

• make an invisible 350x400px box around the paragraph elements inside it.


• 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

16

If you want to change the layout of div id sidebar, create #sidebar CSSt


<!DOCTYPE html>





</head>

<body>



The #sidebar CSS selector makes div id sidebar do the following:

• make an invisible 225x400px box around the list elements inside it.


• Creates a 1 pixel border on the right side of the div.

17


Fin � �

Layout absolute poz

Documents

Transcript of Layout absolute poz