8.  Posi(oning  with  CSS    

Dr.  Dave  Parker    

Informa(on  and  the  Web,  2013/14  

1  

Reminders  &  No(ces  •  Individual  assignment  1  (XML  &  DTDs)  

–  results,  feedback  soon  

•  Individual  assignment  2  (XHTML  &  CSS)  –  out  now,  due:  11.59am  Fri  21  Feb  

•  Remember  to  look  at:  –  exercise  3  (XHTML/CSS)  +  exercise  4  (CSS  posi(oning)  

•  Ques(ons?  

2  

A  few  quick  notes  on  CSS  •  Embedding  a  CSS  style  sheet  in  (X)HTML  

–  <style  type="text/css">  …  </style>  

•  Comments  in  CSS  –  /*  bla  bla  */  -­‐  like  in  Java    (but  not  //  bla  bla)  –  and  not  <!-­‐-­‐  bla  bla  -­‐-­‐>  like  in  (X)HTML  

•  Valida(on  of  CSS  –  hgp://jigsaw.w3.org/css-­‐validator/  –  for  the  assessment,  any  level  of  CSS  is  fine  

3  

Today  •  So  far:  

–  CSS  basics,  selectors,  styling,  colours,  fonts,  …  

•  Today:  layout  &  posi(oning  with  CSS  –  document  flow  –  the  box  model  –  floats  &  posi(oning  –  debugging  CSS  

4  

Block  vs  inline  •  Block-­‐level  vs  inline  elements  

–  <div>  -­‐  custom  block-­‐level  element  –  <span>  -­‐  custom  inline  element  

•  The  display  property  –  display:block  –  forces  an  element  to  display  as  a  block  –  display:inline  –  forces  an  element  to  display  as  inline  –  display:none  –  hides  an  element  

5  

Document  flow  •  Default  web  document  layout:  

•  Block-­‐level  elements  –  width:  use  all  available  space  (width:auto)  –  height:  expand  to  contain  contents  (height:auto)  –  laid  out  ver(cally,  top  to  bogom  (regardless  of  width)  

•  Inline  elements  –  size:  expand  to  contain  contents  –  laid  out  horizontally,  len  to  right,  line  breaks  where  needed  

–  len-­‐aligned,  bogom  aligned  by  default  

6  

The  CSS  box  model  

7  

From: http://www.w3.org/TR/CSS2/box.html

height computed height

width

computed width

The  CSS  box  model  •  Size/appearance  of  (block-­‐level)  elements  

–  proper(es:  width,  height,  margin,  padding,  border  –  computed  width  =  margin  +  border  +  padding  +  width  –  computed  height  =  margin  +  border  +  padding  +  height  

•  Size  (width/height):  –  can  be  absolute  (e.g.  px)  –  …  or  rela(ve  (with  respect  to  parent  element)  –  e.g.  img.portrait  {  width:100px;  height:100px;  }  –  e.g.  div#mainpage  {  width:90%;  }    

8  

Box  model:  margins  •  Margin  

–  e.g.  p  {  margin:5px;  }  –  e.g.  p  {  margin-­‐top:5px;  margin-­‐right:10px;  

   margin-­‐bogom:5px;  margin-­‐len:10px;  }  –  e.g.  p  {  margin:5px  10px  5px  10px;  }  (shorthand:  T,  R,  B,  L)  

–  e.g.  p  {  margin:5px  10px;  }  (shorthand:  T/B,  L/R)  

•  Note:  –  margins  can  be  nega(ve  –  top-­‐bogom  margins  are  collapsed  (except  lists/headings)  –  can  set  len/right  margins  for  inline  elements  too  

9  

Equivalent

Box  model:  padding  +  borders  •  Padding  

–  same  nota(on  as  margins  –  e.g.  p  {  padding:0  5px  0  5px;  }  

•  Borders  –  e.g.  p  {  border:1px  solid  black;  }  –  e.g.  p  {  border-­‐width:1px;  

           border-­‐style:solid;              border-­‐color:black;  }  

–   also  individual  proper(es:  •  border-­‐top,  border-­‐right,  …  •  border-­‐len-­‐width,  …  

10  

Floats  •  Use  property  float  to,  e.g.,  wrap  text  round  an  image  

–  float:  len  |  right  |  none;  

•  Example  –  <img  class="portrait" src="pic.png"  alt="Portrait"/>  <p>A  paragraph  of  text…</p>  

–  img.portrait  {  float:len;  }  

•  Also  useful:  –  clear:  len  |  right  |  both;  

11  

Posi(oning  •  Four  main  types  of  posi(oning  

–  posi(on:  sta(c  |  rela(ve  |  absolute  |  fixed;  

•  Sta(c  –  default:  elements  follow  normal  document  flow  –  (blocks  ver(cally,  inline  horizontally,  …)  

•  Rela(ve  –  elements  laid  out,  then  moved  some  offset  from  posi(on  –  proper(es:  top/bogom,  len/right  –  (specifies  edge  to  shin  from)  

12  

Posi(oning…  •  Absolute  

–  element  removed  from  document  flow  and  reposi(oned  –  rela(ve  to  first  parent  element  with  non-­‐sta(c  posi(on  –  (set  a  parent  element  to  posi(on:rela(ve  to  use  that  one)  –  proper(es:  top,  bogom,  len,  right,  width,  height  

•  Fixed  –  absolute  posi(oning,  rela(ve  to  whole  browser  window  –  (even  if  page  is  scrolled)  

13  

Summary  •  Layout  &  posi(oning  with  CSS  

–  document  flow  –  the  box  model  –  floats  &  posi(oning  –  debugging  CSS  

•  Next  (me  –  JavaScript  

14