bachir
/
materio-base-d7


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379
							<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>Printed document</title>

<style type="text/css">

body {
	font-family: sans-serif;
	font-size: 10pt;
}

/* These inline styles will always be active even if an alternate   stylesheet is selected with the stylesheet swticher */

.example {
  width: 400px;
	page-break-after: always;
	margin-bottom: 10em;
}

.div-before, .div-after {
  background-color: #88d;
  color: #000;
}

.div-1 {
  background-color: #000;
  color: #fff;
}

.div-1-padding {
  padding: 10px;
}

.div-1a {
  background-color: #d33;
  color: #fff;
}

.div-1b {
  background-color: #3d3;
  color: #fff;
}

.div-1c {
  background-color: #33d;
  color: #fff;
}

.example div p {
  margin: 0 .25em;
  padding: .25em 0;
}


#example-1 .div-1 {
 position: static;
}

#example-2 .div-1 {
	position: relative;
	top:20px;
	left:-40px;
}

#example-3 .div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

#example-4 .div-1 {
 position:relative;
}
#example-4 .div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

#example-5 .div-1 {
 position:relative;
}
#example-5 .div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#example-5 .div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

#example-6 .div-1 {
 position:relative;
 height:250px;
}
#example-6 .div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#example-6 .div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

#example-7 .div-1a {
 float:left;
 width:200px;
}

#example-8 .div-1a {
 float:left;
 width:150px;
}
#example-8 .div-1b {
 float:left;
 width:150px;
}

#example-9 .div-1a {
 float:left;
 width:190px;
}
#example-9 .div-1b {
 float:left;
 width:190px;
}
#example-9 .div-1c {
 clear:both;
}
</style>
  
</head>

<body>
	
<h3>Examples from <br />http://www.barelyfitz.com/screencast/html-training/css/positioning/</h3>

position: static
<div id="example-1" class="example">
  <div class="div-before"><p>div-before</p></div>
  
  <div class="div-1">
    <div class="div-1-padding">
      <p>div-1</p>
      
      <div class="div-1a">
        <p>div-1a</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
      </div>
      
      <div class="div-1b">
        <p>div-1b</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
      </div>
      
      <div class="div-1c"><p>div-1c</p></div>
    </div>
  </div>
  
  <div class="div-after"><p>div-after</p></div>
</div>

position: relative
<div id="example-2" class="example">
  <div class="div-before"><p>div-before</p></div>
  
  <div class="div-1">
    <div class="div-1-padding">
      <p>div-1</p>
      
      <div class="div-1a">
        <p>div-1a</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
      </div>
      
      <div class="div-1b">
        <p>div-1b</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
      </div>
      
      <div class="div-1c"><p>div-1c</p></div>
    </div>
  </div>
  
  <div class="div-after"><p>div-after</p></div>
</div>

position: absolute
<div id="example-3" class="example">
  <div class="div-before"><p>div-before</p></div>
  
  <div class="div-1">
    <div class="div-1-padding">
      <p>div-1</p>
      
      <div class="div-1a">
        <p>div-1a</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
      </div>
      
      <div class="div-1b">
        <p>div-1b</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
      </div>
      
      <div class="div-1c"><p>div-1c</p></div>
    </div>
  </div>
  
  <div class="div-after"><p>div-after</p></div>
</div>

position: relative + position: absolute
<div id="example-4" class="example">
  <div class="div-before"><p>div-before</p></div>
  
  <div class="div-1">
    <div class="div-1-padding">
      <p>div-1</p>
      
      <div class="div-1a">
        <p>div-1a</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
      </div>
      
      <div class="div-1b">
        <p>div-1b</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
      </div>
      
      <div class="div-1c"><p>div-1c</p></div>
    </div>
  </div>
  
  <div class="div-after"><p>div-after</p></div>
</div>

two column absolute
<div id="example-5" class="example">
  <div class="div-before"><p>div-before</p></div>
  
  <div class="div-1">
    <div class="div-1-padding">
      <p>div-1</p>
      
      <div class="div-1a">
        <p>div-1a</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
      </div>
      
      <div class="div-1b">
        <p>div-1b</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
      </div>
      
      <div class="div-1c"><p>div-1c</p></div>
    </div>
  </div>
  
  <div class="div-after"><p>div-after</p></div>
</div>

two column absolute height
<div id="example-6" class="example">
  <div class="div-before"><p>div-before</p></div>
  
  <div class="div-1">
    <div class="div-1-padding">
      <p>div-1</p>
      
      <div class="div-1a">
        <p>div-1a</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
      </div>
      
      <div class="div-1b">
        <p>div-1b</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
      </div>
      
      <div class="div-1c"><p>div-1c</p></div>
    </div>
  </div>
  
  <div class="div-after"><p>div-after</p></div>
</div>

float
<div id="example-7" class="example">
  <div class="div-before"><p>div-before</p></div>
  
  <div class="div-1">
    <div class="div-1-padding">
      <p>div-1</p>
      
      <div class="div-1a">
        <p>div-1a</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
      </div>
      
      <div class="div-1b">
        <p>div-1b</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
      </div>
      
      <div class="div-1c"><p>div-1c</p></div>
    </div>
  </div>
  
  <div class="div-after"><p>div-after</p></div>
</div>

float columns
<div id="example-8" class="example">
  <div class="div-before"><p>div-before</p></div>
  
  <div class="div-1">
    <div class="div-1-padding">
      <p>div-1</p>
      
      <div class="div-1a">
        <p>div-1a</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
      </div>
      
      <div class="div-1b">
        <p>div-1b</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
      </div>
      
      <div class="div-1c"><p>div-1c</p></div>
    </div>
  </div>
  
  <div class="div-after"><p>div-after</p></div>
</div>

float columns with clear
<div id="example-9" class="example">
  <div class="div-before"><p>div-before</p></div>
  
  <div class="div-1">
    <div class="div-1-padding">
      <p>div-1</p>
      
      <div class="div-1a">
        <p>div-1a</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
      </div>
      
      <div class="div-1b">
        <p>div-1b</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
      </div>
      
      <div class="div-1c"><p>div-1c</p></div>
    </div>
  </div>
  
  <div class="div-after"><p>div-after</p></div>
</div>

</body>

</html>