• Save
Understanding DIVs
Upcoming SlideShare
Loading in...5
×
 

Understanding DIVs

on

  • 2,883 views

Basic information about how DIVs react to certain conditions in HTML. This presentation is used as a part of a web design course at the UC Berkeley journalism school.

Basic information about how DIVs react to certain conditions in HTML. This presentation is used as a part of a web design course at the UC Berkeley journalism school.

Statistics

Views

Total Views
2,883
Views on SlideShare
2,686
Embed Views
197

Actions

Likes
7
Downloads
0
Comments
1

2 Embeds 197

http://richardkocihernandez.com 189
http://tusharv.in 8

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Understanding DIVs Understanding DIVs Presentation Transcript

  • Understanding DIVs Floats and the block model
  • Learning how DIVs react <div></div> border:  1px  solid  #000000;
  • Learning how DIVs reactSome text in this box <div>Some  text  in  this  box</div> border:  1px  solid  #000000;
  • Learning how DIVs reactSome text in this box <div>Some  text  in  this  box</div> border:  1px  solid  #000000; height:  100px;
  • Learning how DIVs reactSome text in this box <div>Some  text  in  this  box</div> border:  1px  solid  #000000; height:  100px; width:  200px;
  • Learning how DIVs react Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<div>Lorem  ipsum  dolor  sit  amet,  consectetur  adipisicing  elit,  sed  do  eiusmod  tempor  incididunt  ut  labore  et  dolore  magna  aliqua.</div> border:  1px  solid  #000000; height:  100px; width:  200px;
  • Learning how DIVs react Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<div>Lorem  ipsum  dolor  sit  amet,  consectetur  adipisicing  elit,  sed  do  eiusmod  tempor  incididunt  ut  labore  et  dolore  magna  aliqua.</div> border:  1px  solid  #000000; height:  100px; width:  200px;
  • Learning how DIVs react Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<div>Lorem  ipsum  dolor  sit  amet,  consectetur  adipisicing  elit,  sed  do  eiusmod  tempor  incididunt  ut  labore  et  dolore  magna  aliqua.</div> border:  1px  solid  #000000; height:  100px; width:  200px; overflow:  hidden;
  • Learning how DIVs react Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<div>Lorem  ipsum  dolor  sit  amet,  consectetur  adipisicing  elit,  sed  do  eiusmod  tempor  incididunt  ut  labore  et  dolore  magna  aliqua.</div> border:  1px  solid  #000000; height:  100px; width:  200px; overflow:  scroll;
  • Learning how DIVs react Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<div>Lorem  ipsum  dolor  sit  amet,  consectetur  adipisicing  elit,  sed  do  eiusmod  tempor  incididunt  ut  labore  et  dolore  magna  aliqua.</div> border:  1px  solid  #000000; width:300px;
  • Learning how DIVs react Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<div>Lorem  ipsum  dolor  sit  amet,  consectetur  adipisicing  elit,  sed  do  eiusmod  tempor  incididunt  ut  labore  et  dolore  magna  aliqua.</div> border:  1px  solid  #000000; width:300px; padding:  10px;
  • Floats<div  id="largebox">   <div  id="orangebox"></div></div>
  • Floats#orangebox{width:100px;  height:100px;}#largebox{width:600px;  height:  400px;}
  • Floats<div  id="largebox">   <div  id="orangebox"></div>    <div  id="purplebox"></div></div>
  • Floats#orangebox{float:left;}#purplebox{float:left;}
  • Floats#orangebox{float:left;}#purplebox{float:left;}
  • Floats#orangebox{float:left;}#purplebox{float:left;}
  • Floats#orangebox{float:left;}#purplebox{float:right;}
  • Floats#orangebox{float:left;}#purplebox{}
  • Floats#orangebox{float:left;} <div  id="largebox">   <div  id="orangebox"></div>    <div  id="purplebox"></div> </div>#purplebox{float:right;}
  • Floats#orangebox{float:right;} <div  id="largebox">   <div  id="orangebox"></div>    <div  id="purplebox"></div> </div>#purplebox{float:left;}
  • FloatsLorem ipsum dolor sit amet, consectetur adipisicing elit, seddo eiusmod tempor incididunt ut labore et dolore magnaaliqua. Duis aute irure dolor in reprehenderit in voluptatevelit esse cillum dolore eu fugiat nulla pariatur. Excepteursint occaecat cupidatat non proident, sunt in culpa qui.
  • Floats Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duisvelit esse cillum dolore eu fugiat nulla pariatur. Excepteursint occaecat cupidatat non proident, sunt in culpa qui.Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.#orangebox{float:left;}
  • Clear <div  id="largebox">   <div  id="smallbox"></div> </div>#orangebox{width:150px;  height:150px;}
  • Clear <div  id="largebox">   <div  id="smallbox"></div>   <div  id="clear"></div> </div>#orangebox{width:150px;  height:150px;}#clear  {clear:both;}
  • Clear<div  id="largebox"  class="clearfix">   <div  id="smallbox"></div></div>     .clearfix:after  {            content:  ".";            display:  block;            height:  0;            clear:  both;            visibility:  hidden;     }
  • Inline vs block<p>Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisiut aliquip ex ea commodo consequat. Duis aute iruredolor in reprehenderit in voluptate velit esse cillumdolore eu fugiat nulla pariatur. Excepteur sint occaecatcupidatat non proident, sunt in culpa qui officiadeserunt mollit anim id est laborum.</p>
  • Inline vs block<p>Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisiut aliquip ex ea commodo consequat. Duis aute iruredolor in reprehenderit in voluptate velit esse cillumdolore eu fugiat nulla pariatur. Excepteur sint occaecatcupidatat non proident, sunt in culpa qui officiadeserunt mollit anim id est laborum.</p>
  • Inline vs block<p>Lorem ipsum dolor sit amet, consectetur adipisicingelit, sed do eiusmod tempor incididunt ut labore etdolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris nisi ut aliquip ex eacommodo consequat. <span class=“red”>Duis auteirure dolor in reprehenderit in voluptate velit esse cillumdolore eu fugiat nulla pariatur.</span> Excepteur sintoccaecat cupidatat non proident, sunt in culpa qui officiadeserunt mollit anim id est laborum.</p>