Layout absolute poz

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

position:absolute;
height:_________; Top and left values tell the div where
width: _________; to be inside the wrapper div, and your
top: ___________; page is now beautifully arranged!
left: ___________;
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

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>


</style>

</head>

<body>

<div id=”wrapper”>

Now everything <h1> Chapter 1: The Whale</h1>

is tucked in a div <p>Call me Ishmael. </p>

<p> Some years ago -- never mind how long precisely --

called wrapper
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 Razor Back Whale</li>
</ul>

</div>
</body>

</html>

4


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

In the Browser:

5


4 So make a CSS style for div id wrapper:

<!DOCTYPE html>

<head>
Position:relative; will Height and width give
make the layout magic <meta charset=”UTF-8”> your web page a fixed
happen later width and height

#wrapper {
position:relative;
Margin: 0 auto; makes the width:600px;
content – all the stuff inside height:1000px;
the div with the id “wrapper” margin:0 auto;
– center inside the browser }
window, no matter how
wide the window. </style>

</head>

<body>


6


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

In the Browser:

7

<!DOCTYPE html>

<head>



Next step: put each chunk of content you want to position
6
#wrapper {
position:relative;
inside a new div. Give each div an id that describes
width:600px;
height:1000px;

the content. }
margin:0 auto;

</style>

The markup:
</head> This div is empty. I
<body> created it to make the
pink header box. I’ll
<div id=”header”>
</div> use a background-im-
<div id=”littlewhale”> age declaration in CSS
Div for image <img src=”orange_sp.gif” alt=”orange sperm whale”>
</div> to create the color.
<div id=”chapter1”>

Div for headline <h1> Chapter 1: The Whale</h1>
</div>

<div id=”maincontent”>

<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>
Div for paragraphs
<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>

<div id=”sidebar”>

Div for sidebar list <h3>Some Whales</h3>
<ul>

</ul>
</div>

</div>
</body>

</html>

8


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


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

10

Use CSS selectors to style the divs you made so that they go where

9 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>


The “wrapper” selector has this declaration:
#wrapper { position: relative;
position:relative; which enables all the divs inside of it to be positioned
width:600px;
absolutely in relation to the wrapper div.
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;
} 11

<head>



#wrapper {

q }
position:relative;
To create a pink header
width:600px;
create height:1000px; CSS:
#header
margin:0 auto;
box and place it at the top of the page,

#header {
position:absolute;
width:600px; The #header CSS selector does the following:
height:125px;
background-color:#FFCCCC; • makes div id header into a
top:0; 600px by 125px box;
left:0;
} • gives it a lovely pink background color;
#littlewhale {
position:absolute; • positions it absolutely (i.e., sticks it)
top:0; 0px from the top of the wrapper div and
left:0; 0px from the left of the wrapper div.
}
#chapter1 {
position:absolute;
top:33px;
left:250px;
}
#maincontent {
position:absolute;
width: 350px;
height: 400px;
top:125px;
left:250px;
}
#sidebar {
position:absolute; 12
top:125px;

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

#header {
position:absolute;

w
width:600px;
To make the little whale image
height:125px; stick up at the top and left,
create background-color:#FFCCCC;
#littlewhale CSS:
top:0;
left:0;
} The #littlewhale CSS selector does the
#littlewhale {
following:
position:absolute;
top:0; • makes div id littlewhale into a box that
left:0; takes its dimensions from the contents -
} i.e., the image.
#chapter1 {
position:absolute; • positions the box absolutely (i.e., sticks it)
top:33px; 0px from the top of the wrapper div and
left:250px; 0px from the left of the wrapper div.
}
#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>
13
</head>

width:600px;
height:125px;

background-color:#FFCCCC;
top:0;
left:0;
}
#littlewhale {

e To
}
position:absolute;
make the title go to its
top:0;
left:0;

#chapter1 {
place, create #chapter1 CSS:

position:absolute;
top:33px; The #chapter1 CSS selector does the
left:250px; following:
}
• makes div id chapter1 into a box that takes its
#maincontent {
size from its contents - i.e., the h1 element.
position:absolute;
width: 350px; • positions the box it absolutely (i.e., sticks
height: 400px; it) 33px from the top of the wrapper div and
top:125px;
250px from the left of the wrapper div.
left:250px;
}
#sidebar {
position:absolute;
top:125px;
left: 0;
width:225px;
height:400px;
}
</style>

</head>

<body>


<div id=”header”> 14
</div>

left:0;
}
#littlewhale {
position:absolute;
top:0;
left:0;
}
#chapter1 {

r To put position:absolute;

}
the paragraphs in a
top:33px;
create left:250px;
#maincontent CSS:
#maincontent {
main content section,

The #maincontent CSS selector makes
position:absolute;
div id maincontent do the following:
width: 350px;
height: 400px;
top:125px; • make an invisible 350x400px box around
left:250px; the paragraph elements inside it.
}
• positions the box it absolutely (i.e., sticks
#sidebar {
position:absolute; it) 125px from the top of the wrapper div
top:125px; and 250px from the left of the wrapper div.
left: 0; • note that the sidebar div just scoots up
width:225px;
into place like a sidebar. At this point, you
height:400px;
border-right: 1px solid #FFCCCC; wouldn’t have to make a CSS selector for it
} to style it any further
</style>

</head>

<body>



<div id=”littlewhale”>
15
</div>

}
#chapter1 {
position:absolute;
top:33px;
left:250px;
}
#maincontent {

t
position:absolute;
If you want350px;change the
width: to layout of div id sidebar, create
height: 400px;
#sidebar CSS
top:125px;
left:250px;
} The #sidebar CSS selector makes
#sidebar { div id sidebar do the following:
position:absolute;
top:125px;
left: 0; • make an invisible 225x400px box around
width:225px; the list elements inside it.
height:400px;
• positions the box it absolutely (i.e., sticks
it) 125px from the top of the wrapper div
}
</style> and 0px from the left of the wrapper div.

</head> • Creates a 1 pixel border on the right side of
the div.
<body>



<div id=”littlewhale”>
</div>

<div id=”chapter1”>
</div>

16
<div id=”maincontent”>


� FIN
�

17

Layout absolute poz

More Related Content

What's hot (20)

Similar to Layout absolute poz (20)

Layout absolute poz