class 3 & 4: layouts

8/8/2019 Class 3 & 4: Layouts

http://slidepdf.com/reader/full/class-3-4-layouts 1/33

Class 3 & 4

layouts

Web Design, gRAPH-3271-01

Instructor: Erika Tarte

Rhode Island School o Design

Wintersession 2011



one final html

ingredient



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

Completely arbitrary (like spans)

No deault styles or behaviors

div



<div> same HTML rules apply. Divs have an oPening tAg

<h1>Headline<h1>

<p>Paragraph of text</p>

</div> and closing tAg

div



Divs organize HTML

They are used to create structure on a webpage

They group elements

They can dene a particular section or zone o a webpage (header, sidebar, article, etc.)

divs are containers



<div>

<h1>Headline 1<h1>


</div>

<div>

<h1>Headline 2<h1>


</div>

divs are containers



<div class=”article”>

<h1>Headline 1<h1>


</div>


<h1>Headline 2<h1>


</div>

divs are containers



<div class=”articles”>


<h1>Headline 1<h1>


</div>


<h1>Headline 2<h1>


</div>

</div>

divs are containers



<div class=”header”>

...

</div>



...

</div>


...

</div>

</div>

divs are containers



Divs organize/structure/group HTML

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

They are pretty much meaningless without CSS

divs love css



Divs allow you to assign a class to a particular section o your HTML

divs & classes




<h1>Headline 1<h1>


</div>

divs love css

h1 {

color:#000000;

}

h1 .article {

color:#ff0000;

}



position



Divs allow you to assign a position sections o your HTML

divs & positioning



Divs are used to break out o HTML’s linear structure

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

4 types o positioning using the position CSS property:

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

position: relative; defines an objects position RelAtive to its DefAult Position

position: absolute; defines a position RelAtive to the toP left coRneR of its contAineR

position: xed; defines a position that is RelAtive to tHe bRoWseR WinDoW

divs & positioning



Once a div has a type o position, you can use these properties to speciy their placement

top: value; defines a position RelAtive to the toP of its contAineR

right: value; defines an objects position RelAtive to the RigHt of its contAineR

bottom: value; defines a position RelAtive to the bottom of its contAineR

left: value; define a position that is RelAtive to the left of its contAineR

divs & oset positioning





<h1>Headline 1<h1>


</div>

</div>

position: static

div.articles {

position: static;

}

div.article {

position: static;

}





<h1>Headline 1<h1>


</div>

</div>

position: relative

div.articles {

position: relative;

}

div.article {

position: relative;

top: 50px;

left: 100px;

}





<h1>Headline 1<h1>


</div>

</div>

position: absolute

div.articles {

position: absolute;

}

div.article {

position: absolute;

bottom: 50px;

right: 100px;

}





<h1>Headline 1<h1>


</div>

</div>

position: xed

div.articles {

position: xed;

}

div.article {

position: xed;

bottom: 50px;

right: 100px;

}



Use sparingly!

Easy or you and the browser to get conused

Oten used as a quick x or hack when a more logical approach could have been used

Browsers are notorious or rendering positions and oset positions dierently

problems with positioning



float



Floats are another way o creating layouts

Floats make html objects fow let > right, top > bottom just like text would

Layouts depend on div position in HTML, direction they foat, and whether they clear

foats: a more logical approach!



Floats use the CSS property oat and the values left, right andnone

They also use the CSS property clear and the values left, right andnone

Floated elements will move to the ar let/right within their container

They will stop when they hit another element

I their clear is set to that direction, they will jump down to the next line

I they don’t have a clear, they will stay smashed up against that other element

foats



<div class=”article1”>

<h1>Headline 1<h1>


</div>


<h1>Headline 1<h1>

<p>Paragraph of text</p></div>

foat:let

div.article1 {

oat:left;

width:200px; height:400px;

background-color:#ff00ff;

}

div.article2 {

oat:left;width:200px; height:400px;

background-color:#0000ff;

}



foat:let




<h1>Headline 1<h1>


</div>


<h1>Headline 1<h1>


</div>

foat:let; clear:let;

div.article1 {

oat:left;



}

div.article2 {

oat:left;

clear:left;



}



foat:let; clear:let;





<h1>Headline 1<h1>


</div>


<h1>Headline 1<h1>


</div>

</div>

foat:let; & foat:right;

div.article1 {

oat:left;



}

div.article2 {

oat:right;



}

div.articles {

oat:left;

width:100%;

background-color:#00ff00;

}




<h1>Headline 1<h1>


</div>



<h1>Headline 1<h1>


</div>

</div>


div.article1 {

oat:left;



}

div.article2 {

oat:right;



}

div.articles {

oat:right;

width:400px;

background-color:#00ff00;

}



foat:let; & foat:right



exercises 1–4

class 3 & 4: layouts

Documents