Marginal Graphic Dropcap : Image flow : Images HTML CSS TUTORIALS

HTML CSS TUTORIALS » Images » Image flow »

Marginal Graphic Dropcap


 

<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title></title>
      <style type="text/css">
* .indent {
  position: relative;
  margin-left: 120px;
}

* .graphic-dropcap {
  position: absolute;
  width: 120px;
  height: 90px;
  left: -120px;
  top: 0;
}

* .graphic-dropcap span {
  position: absolute;
  width: 120px;
  height: 90px;
  margin: 0;
  left: 0;
  top: 0;
  background: url("http://www.navioo.com/style/logo.png") no-repeat;
}
</style>
   </head>

   <body>

    <h1>Marginal Graphic Dropcap</h1> 
    
    <p class="indent"><span class="graphic-dropcap" >M<span>Inner span</span></span>
    </p> 
   </body>
</html>