Professional Documents
Culture Documents
HTML + Css
Layouts
HTML + CSS Workshop
Instructor: Erika Tarte
Rhode Island School of Design
Spring 2011
<DIV>...</div>
one final html ingredient: <div>
<h1>Headline<h1>
<p>Paragraph of text</p>
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>
</div>
divs are containers
<div id=”header”>
<h1>Site Name<h1>
</div>
<div id=”maincontent”>
<h2>Hello World!<h2>
</div>
css
divs love css
But, because they are arbitrary and have no inherent styles or behaviors...
<h2>Headline</h2> h2 {
<h2>Headline<h2> }
</div> text-decoration:underline;
}
divs & classes & ids
<h1>Headline</h1> background-color:#ff0000;
</div> }
<h2>Headline<h2> }
</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
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
<h2>Headline<h2> float:left;
<h2>Headline<h2> }
<p>Paragraph of text</p>
</div>
float:left; clear:left
<h2>Headline<h2> float:left;
<h2>Headline<h2> }
<p>Paragraph of text</p>
</div>
mix n’ match
<div class=”boxtype1”> div.boxtype1 {
<h2>Headline<h2> float:left;
<h2>Headline<h2> } div.boxtype2 {
</div> clear:left;
<h2>Headline<h2> background-color:#666666;
<p>Paragraph of text</p> }
</div>
Positioned Layouts
creating layouts with positions, position types
Can be positioned anywhere on the page, relative to the container they are in
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
right: value; def ines an objects position rel ative to its right
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
right: value; def ines an objects position rel ative to its right
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