CSS Positioning

CSS Positioning : Logic section : CSS Controls HTML CSS TUTORIALS

HTML CSS TUTORIALS » CSS Controls » Logic section »


 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>CSS Positioning</title>
  <style rel="stylesheet" type="text/css">
body {
  background-color: #ccc;
}

div.header {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 14%;
  background-color: #f2f2f2;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
}

div.nav {
  position: absolute;
  left: 5%;
  top: 20%;
  width: 15%;
  font-weight: bold;
  background-color: #ffffff;
  padding-top: 25px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
}

div.page {
  position: absolute;
  left: 25%;
  top: 20%;
  width: 70%;
  height: 60%;
  background-color: #ffffff;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  z-index: 5;
}

h2 {
  position: relative;
  top: 10px;
  left: 10px;
}

span.pullQuote {
  float: right;
  width: 100px;
  padding: 10px;
  margin: 6px;
  font-size: 11px;
  font-weight: bold;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  background-color: #efefef;
}

div.bottom {
  position: absolute;
  bottom: 3%;
  width: 90%;
  height: 8%;
  margin-left: 5%;
  margin-right: 5%;
  text-align: right;
  padding-right: 5px;
  background-color: #ffffff;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
}
</style>
</head>
<body>

<div class="header"><h1>CSS Demonstration</h1></div>

<div class="nav">
  CSS Resources<br />
  <a href="">W3C</a><br />
  <a href="">G</a><br />
  <a href="">N</a><br />
</div>

<div class="page">
  <h2>Here is a Heading</h2>

  <p class="Article">
     <span class="pullQuote">a<BR/>s<BR/>d<BR/>f<BR/></span>
  </p>
</div>

<div class="bottom"><a href="">Next Page</a></div>
</body>
</html>