absolute positioning for header panel : position absolute : Layout HTML CSS TUTORIALS


HTML CSS TUTORIALS » Layout » position absolute »

 

absolute positioning for header panel


 

<?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" lang="en" xml:lang="en">

<head>
  <title>Fixed Positioning</title>
  <style rel="stylesheet" type="text/css">

div.header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  color: red;
  background-color: pink;
}

{
  width: 300px;
  padding: 5px;
  color: yellow;
  background-color: blue;
}

p.one {
  margin-top: 100px;
}
</style>
</head>

<body>
<div class="header">asdfasdf</div>
<p class="one"><p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
</p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>

</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Layout
» position absolute