Session 3

HTML + Css
Layouts
HTML + CSS Workshop
Instructor: Erika Tarte
Rhode Island School of Design
Spring 2011
<DIV>...</div>
one final html ingredient: <div>

Div stands for “divider”

HTML element using the tags <div> & </div>

Completely arbitrary (like spans)

No default styles or behaviors

one final html ingredient: <div>

<div> same HTML rules apply. Divs have an opening tag

<h1>Headline<h1>

<p>Paragraph of text</p>

</div> and closing tag

divs are containers

Divs organize HTML

They are used to create structure on a webpage

They are a grouping element

Use then to define a particular section of a webpage (header, sidebar, article, etc.)
divs are containers

<div>

<h1>Site Name<h1>

</div>

<div>

<h2>Hello World!<h2>

<p>I’m a graphic designer.</p>

</div>
divs are containers

<div id=”header”>

<h1>Site Name<h1>

</div>

<div id=”maincontent”>

<h2>Hello World!<h2>

<p>I’m a graphic designer.</p>

</div>
css
divs love css

We use divs to group, organize, and structure ourHTML

But, because they are arbitrary and have no inherent styles or behaviors...

They are pretty much meaningless without CSS

divs & classes

<h2>Headline</h2> h2 {

<div class=”article”> color:#ff0000;

<h2>Headline<h2> }

<p>Paragraph of text</p> div.article h2 {

</div> text-decoration:underline;

}
divs & classes & ids

<div id=”header”> div#header {

<h1>Headline</h1> background-color:#ff0000;

</div> }

<div id=”maincontent”> div#maincontent {

<div class=”article”> background-color:#3366ff;

<h2>Headline<h2> }

<p>Paragraph of text</p> div.article {

</div> background-color:#ffff00;

</div> }
classes vs ids

#id {}
.class {}
classes vs ids

#id {}
.class {}
Floating Layouts
creating layouts with floats

Floats are one of 2 way of positioning elements on a web page (aka, designing a layout)

Floats make html objects flow left k right & top k bottom (just like text in a book)
creating layouts with floats

Floats use the CSS property float with possible values of left, right and none

They also use the CSS property clear with possible values of left, right and none

Floated elements will move to the far left/right within their parent container

They will stop when they “hit” another element

Clear makes them jump down to the next line when they “hit” another object

If they don’t have a clear, they will stay smashed up against that other element
float:left; clear:none

<div class=”boxtype1”> div.boxtype1 {

<h2>Headline<h2> float:left;

<p>Paragraph of text</p> clear:none;

</div> width:200px; height:400px;

<div class=”boxtype1”> background-color:#ff00ff;

<h2>Headline<h2> }

<p>Paragraph of text</p>

</div>
float:left; clear:left

<div class=”boxtype1”> div.boxtype2 {

<h2>Headline<h2> float:left;

<p>Paragraph of text</p> clear:left;

</div> width:200px; height:400px;

<div class=”boxtype1”> background-color:#666666;

<h2>Headline<h2> }

<p>Paragraph of text</p>

</div>
mix n’ match
<div class=”boxtype1”> div.boxtype1 {

<h2>Headline<h2> float:left;

<p>Paragraph of text</p> clear:none;

</div> width:200px; height:400px;

<div class=”boxtype2”> background-color:#ff00ff;

<h2>Headline<h2> } div.boxtype2 {

<p>Paragraph of text</p> float:left;

</div> clear:left;

<div class=”boxtype1”> width:200px; height:400px;

<h2>Headline<h2> background-color:#666666;

<p>Paragraph of text</p> }

</div>
Positioned Layouts
creating layouts with positions, position types

Divs are used to break out of float’s linear structure

Can be positioned anywhere on the page, relative to the container they are in

4 types of positioning using the position CSS property:

position: static; this is the default, what we’ve been seeing w/ all the HTML elements

position: relative; def ines an objects position rel ative to its default (static) p osition

position: absolute; def ines a position rel ative to the top lef t of first non static parent

position: fixed; def ines a position that is rel ative to the b rowser wind ow
creating layouts with positions, position offsets

Once you give an element a position type, you can use offset properties to specify placement

top: value; def ines a position rel ative to its top

right: value; def ines an objects position rel ative to its right

bottom: value; def ines a position rel ative to its b ottom

left: value; def ine a position that is rel ative to its lef t
creating layouts with positions, position offsets

Once you give an element a position type, you can use offset properties to specify placement

top: value; def ines a position rel ative to its top

right: value; def ines an objects position rel ative to its right

bottom: value; def ines a position rel ative to its b ottom

left: value; def ine a position that is rel ative to its lef t
 In-class
Exercises
drawing with code, float
drawing with code, position
drawing with code, float + position

Jan Tschichold  1928