Scribd
Upload
9 views19 pages

Lecture 5

Uploaded by

sdsouravdebnath26
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views19 pages

Lecture 5

Uploaded by

sdsouravdebnath26
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

Positioning – what is it?

Positioning refers to the layout of the items


on your page.

It also refers to the “position” descriptor in


CSS rules (more on this in a minute)
Normal Flow – no “positioning”

Left to Right, Top to Bottom


Normal Flow – no “positioning”
Top left of the page = (0,0)

Left to Right, Top to Bottom


Normal Flow
The yellow box is the container (more on this)
This is a paragraph If the next paragraph
to which I have set fits next to it on the
the width. right, it will line up.
Normal Flow
This is a paragraph However, if the second
to which I have set paragraph is too wide to fit
the width. the container, it will shift
down.
Normal Flow
This is a paragraph
to which I have set
the width.
However, if the second
paragraph is too wide to fit
the container, it will shift
down.

This is the basic principle of Normal Flow


Box Model
All of the items in your webpage generate invisible “boxes” –
you have to figure out how all of those boxes will fit into your
page, like a puzzle.

Image Small print


with link Image
text, bullet
list
Set of links
(navigation)

Regular text
Box Model
Margin
Border

Padding

Content
Box Model
Think of it like an egg:

The yolk is the content

The albumen is the padding

The shell is the border

The margin is how far


the egg is from
anything else (another
tiny egg, perhaps)
Margin and Padding
styleX {
margin: 10px 10px 10px 10px; TRBL
padding: 5px 5px 5px 5px; } top – right – bottom - left
OR
styleX {
margin: 10px; Shorthand:
padding: 10px; }
Just one number = all 4 sides
OR Two numbers = top/bottom, left/right
styleX {
margin: 10px 15px; padding: 5px 10px; }
Interrupt the Flow

When you want to do fancier


• Absolute
layout, you can position “boxes”
• Relative or “containers.” By doing this,
• Float you interrupt the normal (top to
bottom, left to right) flow. You
can do this in three ways; Float,
Absolute, and Relative.
HTML Float
<div>
<p> This is the This is the normal This text is
normal…</p> flow of a document; floated right.
from top to bottom,
<p class=“float”>This left to right. When the floated text is
text is floated added, it moves to the top right
right.</p> corner of the containing element, in
</div> this case the <div>. Normal text
flows around the floated text.

CSS
.float {float:right;}
HTML Absolute
<div>
This is the normal flow of a
<p> This is the
document; from top to bottom, left
normal… <span
to right. When you add the
class=“abs”> This
absolutely positioned This
text, text
it is
text is absolutely absolutely
moves to the coordinates you set
positioned.</span>… positioned.
based on the top left corner of the
top to bottom… </p>
containing element, in this case
</div> the <div>. Normal text flows over
the absolutely positioned text.
CSS There is no gap where the text is
.abs {position: absolute; taken from.
top: 40px;
left: 80;}
This text is relatively
positioned.

HTML Relative
<div> This is the normal flow of a
document; This text is relatively
<p> This is the
positioned from top to bottom, left
normal… <span
to right. When you add the
class=“rel”> This text
relatively positioned text, it moves
is relatively positioned.
to the coordinates you set based
</span> … from top to
on the top left corner of the
bottom…</p>
containing element, in this case
</div> the <div>. Normal text flows as
normal, but a gap is left where the
CSS relative text used to be, and the
.rel {position: relative; text overlaps with the newly
top: -50px; positioned relative text if they are
left: -150px} in the same area.
<html>
<head>
<title>My Resume</title>
<link href=“home.css" rel="stylesheet"
type="text/css">
</head>
<body>
<div id="container">
Content goes here
</div>
</body>
</html> HTML
#container
#banner

#nav #content

#footer
<body>
<div id="container">
<div id="banner"><img src="pic.jpg" /></div>
<div id="nav">
<span><a href="home.htm">home</a></span>
<span><a href="contact.htm">contact</a></span>
</div>
<div id=“content">
<h1>My Resume</h1> HTML
<p>Resume text</p>
</div>
<div id=“footer”>Copyright info here</div>
</div>
</body>
body {
font-size: 1em; }
#container {
width: 920px; }
#banner {
width: 920px; height: 120px; }
#nav {
float: left; width: 200px; } CSS
#content {
width: 720px; }
#footer {
font-size: .8em; }

You might also like