Body center : body « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. body

Body center

   


?<!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" dir="ltr" lang="en-US"
  xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
<style rel="stylesheet" type="text/css">

#sidebar .block {
  float: left;
}

#sidebar .block a {
  display: block;
  margin: 0 0 0 26px; /
  margin: 0 0 0 13px;
  float: left;
  color: #006CCE;
  text-decoration: underline;
}

#sidebar .block a:visited {
  text-decoration: underline
}

#sidebar .block a:hover {
  text-decoration: none
}

#sidebar .block .more {
  margin: 0 145px 0 13px;
}

#center {
  width: 335px;
  float: left;
}

#center h4 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #916422;
  text-transform: uppercase;
  margin: 0 0 10px 0px;
  padding: 0 0 9px 0;
  background: url(images/dots.gif) bottom left repeat-x;
  display: block;
  width: 280px;
  float: left;
}

#center p {
  display: block;
  width: 280px;
  padding: 0 0 10px 0px;
}


</style>
</head>
<body>
      <div id="center">
        <div class="block">
          <h4>Last News</h4>
          <p>Magna a luctus lacinia, sem Lorem vestibulum neque ac onsectetuer Donec fermentum varius erat. Sed sit amet tellus. Duis tristique, lacus vel nonummy lobortis, nibh massa dapibus diam a viverra augue ipsum et diam.<br /> Sed condimentum, libero sed cursus dapibus, libero enim feugiat tellus, vitae accumsan elit neque et purus. Cras aliquet consectetuer risus. Ut wisi. Etiam nec nisl placerat enim imperdiet dignissim. Maecenas sit amet nunc vel ligula tempor cursus. Sed faucibus faucibus eros. Praesent pharetra wisi ut sem. Morbi dignissim pulvinar dui. </p>
          <a href="#" class="more">more info</a>
        </div>
        <div class="block">
          <h4>Welcome to our hotel</h4>
          <p><strong>Magna a luctus lacinia, sem Lorem</strong> vestibulum neque ac onsectetuer Donec fermentum varius erat. Sed sit amet tellus. Duis tristique, lacus vel nonummy lobortis, nibh massa dapibus diam a viverra augue ipsum et diam.<br /> Sed condimentum, libero sed cursus dapibus, libero enim feugiat tellus, vitae accumsan elit neque et purus. Cras aliquet consectetuer risus. Ut wisi. Etiam nec nisl placerat enim imperdiet dignissim. Maecenas sit amet nunc vel ligula tempor cursus. Sed faucibus faucibus eros. Magna a luctus lacinia, sem Lorem vestibulum neque ac onsectetuer Donec fermentum varius erat. Sed sit amet tellus. Duis tristique, lacus vel nonummy lobortis, nibh massa dapibus diam a viverra augue ipsum et diam. </p>
        </div>
        <div class="block">
          <h4>Our Services</h4>
          <p>Etiam felis mauris, mattis sed, dapibus sit amet, elementum at, sapien. Pellentesque eu mi. Vestibulum imperdiet, sem tristique tempus cursus, lacus lectus aliquet lorem, accumsan accumsan arcu velit ac mauris. Quisque et libero. Pellentesque ac pede commodo tortor gravida eleifend. Aliquam interdum velit tristique est. Aliquam pellentesque ultrices ante. Praesent sit amet purus eget velit hendrerit dignissim. Nunc eu libero blandit diam vehicula elementum. Vestibulum mauris elit, porta sit amet, eleifend a, cursus in, sem. Nunc tempus, nunc in convallis porttitor, sapien libero lobortis arcu, eget viverra metus massa a neque. Etiam egestas magna sed sem. </p>
          <p>Nunc feugiat, quam at sagittis commodo, lacus magna congue justo, eget viverra neque risus quis risus. Etiam placerat elit at ligula. Praesent hendrerit augue vitae lorem. Pellentesque dignissim, eros eget sodales.</p>
          <a href="#" class="more">more info about our services</a>
        </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 font-family: Arial, Helvetica, sans-serif;
44.Body font-size: 13px;
45.Narrow body
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