Monday, September 26, 2011

CSS style - BOXES inside boxes - positioning - insert DIV tags


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div class="middleBox">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Untitled Document</title>
  <link href="untitled.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.bigBox {
background-color: #0066FF;
height: 400px;
width: 400px;
}
.middleBox {
background-color: #FF9900;
height: 200px;
width: 200px;
top: -300px;
left: 100px;
position: relative;
}
.smBox {
background-color: #33FF00;
height: 100px;
width: 100px;
position: relative;
left: 150px;
top: -450px;
}
-->
</style>
  </head>
  
  <body>
  <div class="bigBox">Content for  class "bigBox" Goes Here</div>
  <div class="middleBox">Content for  class "middleBox" Goes Here</div>
  <div class="smBox">Content for  class "smBox" Goes Here</div>
  </body>
  </html>
</div>

No comments:

Post a Comment