middle sited body page

msi_333 · **Posted:** Fri Dec 16, 2011 1:30 am

This an example of how you can set your body to the center of the html page in well organized manner using CSS .

Code:

<html>
<head>
<title>middle sited body page</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<style rel="stylesheet" type="text/css">
* {
  margin: 0;
  padding: 0;
}

a {
  color: #354FF3;
}

a:visited {
  text-decoration: underline;
}

a:hover {
  color: #FCA16C;
}

.ref {
  list-style: none;
  list-style-image: none;
  margin: 20px 15px;
}

.ref li {
  border-style: solid;
  border-width: 0 0 0 5px;
}

.green {
  border-color: #8A9D30;
}

.blue {
  border-color: #1D304A;
}

.brown {
  border-color: #9D3A06;
}

.grey {
  border-color: #3A342A;
}

.ref a {
 text-decoration: none;
  margin: 5px 0;
  padding-left: 10px;
  border-left: 1px solid #F7D09B;
  display: block;
  width: 244px;
  height: 24px;
  background-color: #444444;
  font: normal 11px/24px georgia, times, serif;
  color: #F7D09B;
 
}

* html .ref a {
  width: 238px;
}

.ref a:hover {
  background-color: #9D3A06;
  color: #fff;
}

#bottom {
  float: left;
  clear: both;
  margin: 60px 0 0 70px;
  width: 550px;
}

#left_footer {
  color: #000;
  float: left;
  padding-bottom: 10px;
}

* html #left_footer {
  width: 280px;
  position: relative;
  right: 66px;
}

#right_footer {
  color: #E39C77;
  float: left;
  margin-left: 130px;
  padding-bottom: 10px;
}

* html #right_footer {
  margin-left: -35px;
}

#left_footer a {
  color: #000;
}

#left_footer a:hover {
  color: #333;
}

#right_footer a {
  color: #F5B08B;
}

#right_footer a:hover {
  color: #F9D2BE;
}
 

body {
  background: #6FA4F2;
  background-position: 50% 50%;
  font: normal 11px;
  text-align: center;
}

#mainpart {
  margin: 0 auto;
  text-align: left;
  width: 655px;
}

#headpart {
  width: 655px;
  height: 200px;
  background: #A3A240;
  border: 4px solid #F1DAAC;
  border-width: 0 5px 5px 5px;
  text-align: center;
}

#headpart img {
  position: relative;
  right: 569px;
  margin-bottom: 28px;
}

#headpart h1 {
  color: #fff;
  font-size: 49px;
  margin-right: 30px;
  cursor: default;
  color: #FFE5AE;
}

#left-side,#right-side {
  padding-top: 25px;
  width: 289px;
  float: left;
}

#left-side {
  margin-left: 48px;
  color: #F7F19B;
  background: #A3A240;
}

* html #left-side {
  position: relative;
  top: -9px;
  margin-left: 25px;
  width: 287px;
}

* html #right-side {
  position: relative;
  top: -9px;
  margin-left: 26px;
}

#right-side {
  margin-left: 26px;
  color: #F7F09B;
  background: #A3A240;
}

#left-side h1,#right-side h1 {
  font-size: 19px;
  margin-left: 14px;
  display: block;
  padding-bottom: 4px;
  width: 250px;
}

#left-side h1 {
  
  background-position: bottom right;
}

#right-side h1 {
 
  background-position: bottom right;
}

#left-side img,#right-side img {
  border: 2px solid #F5F234;
  margin: 20px 0;
}

#left-side a:hover img,#right-side a:hover img {
  border-color: #D48042;
}

#left-side h1 {
  color: #FFBBBB;
}

#right-side h1 {
  color: #FFBBBB;
}

p {
  width: 260px;
  margin: 9px 0 9px 9px;
}

p:first-letter {
  font-size: 30px;
  float: left;
  margin-right: 4px;
}


</style>
</head>
<body>
<div id="mainpart">
  <div id="headpart"><h1>middle sited body page </h1>
  </div>
  <div id="left-side">
    <h1>Left Column</h1>
    <ul class="ref">
      <li class="green"><a href="">Green Link</a></li>
      <li class="blue"><a href="">Blue Link</a></li>
      <li class="brown"><a href="">Brown Link</a></li>
      <li class="grey"><a href="">Grey Link</a></li>
    </ul>
    <p>Example of paragraph<br />
      <br />
      Left column<br />
      <br />
     
  </div>
  <div id="right-side">
    <h1>Right Column</h1>
    <p>Right column side</p>
  </div>
 
</div>
</body>
</html>

middle sited body page

Users browsing similar codes