Narrow body : body « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. body

Narrow body

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Antiquity</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<style rel="stylesheet" type="text/css">
* {
  margin: 0;
  padding: 0;
}

a {
  color: #DC8552;
}

a:visited {
  text-decoration: underline;
}

a:hover {
  color: #FCA16C;
}

ul {
  list-style-image: url("antiquity-images/bullet.gif");
  margin: 15px 40px;
}

body {
  background: #3B362E url("antiquity-images/back.jpg") repeat-y;
  background-position: 50% 50%;
  font: normal 11px/18px georgia, times, serif;
  text-align: center;
}

#wrapper {
  margin: 0 auto;
  text-align: left;
  width: 690px;
}

#head {
  width: 690px;
  height: 195px;
  background: #9D3A06 url("antiquity-images/header.jpg") repeat-x;
  border: 5px solid #F1DAAC;
  border-width: 0 5px 5px 5px;
  text-align: right;
}

#head img {
  position: relative;
  right: 570px;
  margin-bottom: 30px;
}

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

#left_column,#right_column {
  padding-top: 20px;
  width: 284px;
  float: left;
}

#left_column {
  margin-left: 48px;
  color: #7D3403;
  background: #F7D09B url("antiquity-images/leftgrad.jpg") repeat-x;
}

* html #left_column {
  position: relative;
  top: -8px;
  margin-left: 26px;
  width: 286px;
}

* html #right_column {
  position: relative;
  top: -8px;
  margin-left: 25px;
}

#right_column {
  margin-left: 26px;
  color: #F7D09B;
  background: #9d3a06 url("antiquity-images/rightgrad.jpg") repeat-x;
}

#left_column h1,#right_column h1 {
  font-size: 18px;
  margin-left: 15px;
  display: block;
  padding-bottom: 3px;
  width: 260px;
}

#left_column h1 {
  background: transparent url("antiquity-images/border.gif") repeat-x;
  background-position: bottom right;
}

#right_column h1 {
  background: transparent url("antiquity-images/border2.gif") repeat-x;
  background-position: bottom right;
}

#left_column img,#right_column img {
  border: 3px solid #C57234;
  margin: 20px 0;
}

#left_column a:hover img,#right_column a:hover img {
  border-color: #D48042;
}

#left_column h1 {
  color: #A94D10;
}

#right_column h1 {
  color: #F7D09B;
}

p {
  width: 250px;
  margin: 20px 0 20px 20px;
}

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

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

.links 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;
}

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

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

.links 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;
}

</style>
</head>
<body>
<div id="wrapper">
  <div id="head"> <img src="antiquity-images/corner.jpg" alt="" />
    <h1>Antiquity</h1>
  </div>
  <div id="left_column">
    <h1>Left Column</h1>
    <ul class="links">
      <li class="green"><a href="">a link name</a></li>
      <li class="blue"><a href="">a link name</a></li>
      <li class="brown"><a href="">a link name</a></li>
      <li class="grey"><a href="">a link name</a></li>
    </ul>
    <p>Hi, this is Jack with another oswd template. This time I tried to go for something that stands out thematically and visually. The two equal columns can be used for anything from blog posts to product descriptions, it kind of mimics old newspaper columns. Notice that the links above aren't necessarily meant for navigation, but simply a series of links. They could be links to external sites, special resources, etc. Use your imagination :]<br />
      <br />
      You can also use the classes on the lists to change the tab colour. I did it 'cause it looks nice, but it can be used as an organization tool as well (help separate different types of links, etc) <br />
      <br />
      I know the css is a bit cluttered, but I'm coming with a commented update soon.</p>
    <h1>Possible Uses?</h1>
    <ul>
      <li>antique books</li>
      <li>fine wines</li>
      <li>classical music</li>
      <li>historical archive</li>
      <li>just for fun</li>
    </ul>
  </div>
  <div id="right_column">
    <h1>Right Column</h1>
    <p>Nam faucibus urna non arcu. Morbi vulputate hendrerit tellus. Donec porttitor vulputate mi. Praesent eros pede, molestie eget, posuere vitae, vehicula at, erat. Etiam accumsan elementum magna. Vivamus cursus pretium pede. Suspendisse eget lacus at nulla condimentum laoreet. Vivamus vulputate, nulla in tempor malesuada, justo lacus placerat lacus. <a href=""><img src="antiquity-images/image.jpg" alt="" /></a> Sed eget turpis ut lacus congue blandit. Proin faucibus sodales ligula. Praesent placerat nibh ut risus. Vivamus faucibus urna et mi. Integer porta, odio ac fringilla nonummy, urna mi dapibus lorem, in porta erat nulla ut wisi. Quisque sed metus.</p>
  </div>
  <div id="bottom">
    <div id="left_footer"><a href="">footer item</a> | <a href="">another footer item</a></div>
    <div id="right_footer"><a href="">footer item</a> | <a href="">another footer item</a></div>
  </div>
</div>
</body>
</html>








Related examples in the same category

1.'body' defines where to display all text, graphics, and other web page content
2.Single paragraph in body
3.Set font size for body
4.Set margin for body to '10% 10% 20% 10%'
5.Set font family for body
6.Set body background image and no repeat
7.Set repeat to repeat-x for
8.Set background image to no-repeat, and background-position to 75px 150px
9.Set body margin to 10%
10.Body margin
11.Set body font: 76% arial,sans-serif
12.body background-repeat: no-repeat
13.body font: 14px sans-serif;
14.body color: darkslateblue;
15.body border: 5px dashed darkslateblue;
16.body margin: 10px;
17.body padding: 10px;
18.body text-align: center;
19.body margin: 0;
20.body padding: 0;
21.body font: 73% arial, verdana, tahoma, "Trebuchet MS", sans-serif;
22.body line-height: 1.7em;
23.body color: #333;
24.body background: #fff;
25.Body text-align: left;
26.Body background: #858563 url(img/bgd.png) repeat-y top center;
27.body font: 75% "Trebuchet MS", verdana, arial, tahoma, sans-serif;
28.body line-height: 1.8em;
29.body color: #666;
30.body background: #E16027 url(img/bg.jpg) repeat-y top center;
31.Background image for body
32.body margin: 0; padding: 1.5em; border: 50px #666 ridge;
33.body margin-left: 15%; margin-right: 15%;
34.Set up the body
35.body white-space: pre;
36.width and height percentage for html and body no margin
37.?Body margin: 0 auto;
38.Body background-color: #3E3E2D;
39.Body background-image: url('image-demo-2011/Page-BgGlare.png');
40.Body background-repeat: repeat;
41.Body background-attachment: scroll;
42.Body background-position: top left;
43.Body center
44.Body font-family: Arial, Helvetica, sans-serif;
45.Body font-size: 13px;
46.body font: 1em sans-serif;
47.background-attachment positions the background image relative to the body and forces the background image to remain fixed in place when the document is scrolled.
48.body background properties
49.'link' sets the color of all links in an HTML document
50.'vlink' sets the link color that have already been visited
51.'bgproperties' sets the scroll properties of the background image
52.'bottommargin' sets the height in pixels of the page bottom margin
53.'leftmargin' sets the left indented distance in pixels
54.'rightmargin' sets the right margin in pixels
55.'topmargin' sets top margin in pixels