CPD CS-12 Advanced Web Design For Teachers

CPD CS-12 Adv. Web Design for Teachers << CSS Positioning >>

Mode: Static :: Switch to Presentation

Flow

Go with the Flow!

<body>
<h1>Page Title</h1>
<h2>Section One Title</h2>
<p>
Section one content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Pellentesque  congue luctus nisl. Nunc nec leo vitae turpis egestas tincidunt. Donec
  mattis mauris quis risus. Cras fermentum quam tincidunt quam. Phasellus  lectus sapien,
 euismod sed, adipiscing et, fringilla non, est.  Phasellus consectetuer felis vel tellus. 
Maecenas luctus tempor augue.  Duis ut magna. Sed in eros. Nullam odio turpis, molestie sit.
</p>
<h2>Section Two Title</h2>
<p>Section two content. . .</p>
</body>
</html>

Output

Positioning Schemes

There are four positioning schemes in CSS:

Static
Absolute
Relative
Fixed

All these schemes have a specific relationship to normal flow.

Absolute

Absolute Positioning

Sit, stay. . . Good Div!

#sectionone{
   	position: absolute;
	left: 10px;            
	right: 300px;
	top: 10px;	
}

<h2>Section One Title</h2>
<div id="sectionone">
Section one content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Pellentesque  congue luctus nisl. Nunc nec leo vitae turpis egestas tincidunt. Donec
  mattis mauris quis risus. Cras fermentum quam tincidunt quam. Phasellus  lectus sapien,
 euismod sed, adipiscing et, fringilla non, est.  Phasellus consectetuer felis vel tellus. 
Maecenas luctus tempor augue.  Duis ut magna. Sed in eros. Nullam odio turpis, molestie sit.
</div>

Output

Relative

Relative Positioning

A nudge more to the left...

#sectionone{
   	position: relative;
	left: 50px;            
	top: 10px;	
}

<h2>Section One Title</h2>
<div id="sectionone">
Section one content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Pellentesque  congue luctus nisl. Nunc nec leo vitae turpis egestas tincidunt. Donec
  mattis mauris quis risus. Cras fermentum quam tincidunt quam. Phasellus  lectus sapien,
 euismod sed, adipiscing et, fringilla non, est.  Phasellus consectetuer felis vel tellus. 
Maecenas luctus tempor augue.  Duis ut magna. Sed in eros. Nullam odio turpis, molestie sit.
</div>

Output

Floats

Floats!

What Floats your Div?

Floating is the process of positioning a box to the left or right, and having content outside that box flow or wrap around. It is very useful with images and navigation sections.

img {float: left;}

.floatright {float: right;}

Image Example | Nav Example

Containers

Container-ize

Boxed into a Corner

Web pages can be divided into two sections; head and body. Using DIV tags allows you to logically divide the content in your body section. Combine DIVS with positioning and floats for multiple layouts.

<body>
<div id="container">
<div id="header">
<h1>Page Title</h1>
</div>
<div id="content">
<h2>Section One Title</h2>
<p>
Section one content. Lorem ipsum dolor . . .

Down the page we close up everything:

</p>
</div>
<div id="footer">
Copyright | Contact Information
</div>
</div>

Containers CSS

And the Style Sheet. . .

#container{


}



#header{



}



#navcontainer{


}



#content{


}



#footer{



}

Suggestion: the first rule to place in each "border: 1px solid #000;"

Boxes Explained

A Closer Look at the Little Boxes

What Goes Where?

Container - general wrapper. Open after body tag and close before closing body tag.
Header - page title and graphic. Just inside of container.
Navcontainer - Navigation/Links common to all pages. Links should be in list.
Content - Your content.
Footer - Who you are, contact method, last updated and copyright.

Box Model Revisited

Margins, Paddings and More

Box Model