Border page border : border « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. border

Border page border

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>andreas05</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style rel="stylesheet" type="text/css">
/* andreas05 - an open source xhtml/css website layout by Andreas Viklund - http://andreasviklund.com/ . Free to use for any purpose as long as the proper credits are given for the original design work.
Version: 2.0, July 15, 2006 */
/* General tags */
* {
  margin: 0;
  padding: 0;
}

body {
  background: #ccc url(bodybg.gif) repeat;
  font: 76% verdana, tahoma, sans-serif;
}

a {
  background-color: inherit;
  color: #286ea0;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

p {
  margin: 0 0 16px 0;
}

ul,ol {
  margin: 0 0 16px 15px;
  padding-left: 5px;
}

ul ul,ol ol {
  margin: 3px 0 0 15px;
}

img {
  float: left;
  margin: 0 10px 5px 0;
}

/* Headers */
h1 {
  color: #555;
  font-size: 3.6em;
  letter-spacing: -3px;
  margin: 0;
  text-align: right;
}

h2 {
  font-size: 1.6em;
  font-weight: normal;
  letter-spacing: -1px;
  margin: 5px 0 10px;
}

/* IDs */
#title {
  margin: 20px auto -9px;
  width: 700px;
}

#container {
  background: #fff url(front.png) bottom left no-repeat;
  border: 20px solid #555;
  color: #555;
  margin: 0 auto 15px;
  padding: 10px;
  width: 700px;
  line-height: 1.3em;
}

#sidebar {
  float: left;
  padding-left: 175px;
  width: 110px;
}

#sidebar p {
  margin: 10px 0 5px 0;
  text-align: center;
  font-size: 0.8em;
}

#main {
  float: right;
  width: 385px;
}

#footer {
  clear: both;
}

/* Menu */
.menu {
  border: 1px solid #ffffff;
  color: #286ea0;
  display: block;
  font-size: 1.1em;
  font-weight: bold;
  padding: 4px 2px 4px 10px;
  width: 110px;
}

.menu:hover {
  background-color: #f8f8f8;
  border: 1px solid #dadada;
  color: #286ea0;
  text-decoration: none;
}

/* Various classes */
.credits {
  color: #888;
  font-size: 0.9em;
  margin-bottom: 0;
}

.credits a {
  color: #888;
}
</style>

</head>
<body>
<div id="title">
  <h1>YOUR SITE TITLE</h1>
</div>
<div id="container">
  <div id="sidebar">
    <h2>Site menu</h2>
    <a class="menu" href="">Home</a> <a class="menu" href="">Sample</a> <a class="menu" href="">Sample</a> <a class="menu" href="">Sample</a> <a class="menu" href="">Sample</a> <a class="menu" href="">Sample</a> <a class="menu" href="">Sample</a>
    <p class="sidenote">More templates:<br />
      <a href="">AV</a> | <a href="">OWD</a> | <a href="">OSWD</a></p>
    <p class="sidenote">WordPress themes:<br />
      <a href="">AV</a> | <a href="">Jokkmokk</a></p>
    <p class="sidenote">Version:<br />
      andreas05 v2.0<br />
      (Jul 15, 2006)</p>
  </div>
  <div id="main">
    <h2>andreas05 - the simple solution!</h2>
    <img src="dragonmini.png" width="125" height="125" alt="Dragon screenshot" />
    <p>Sometimes, the simple things are the most beautiful. This design was made with simplicity in mind, to make it quick and easy to edit the code and get your website online. The amount of code is very small, and the layout is very basic. No visual effects, no advanced features, just a very simple template.</p>
    <p><strong>Note:</strong> If you don't like the dragon (which was made using a freeware font named "Tattoo"), you can easily replace it with an image of your own!</p>
    <h2>An open source design!</h2>
    <p>This design is released as open source, which means that you can make any changes you may want to, and use the page in any way you want to as long as you give the proper credits to the original author. Have fun! If you want more designs to choose from, you can visit my website where you can download more templates by me.</p>
    <p class="credits"><strong>&copy; 2005 Your name</strong> | Design by <a href="http://andreasviklund.com/">Andreas Viklund</a> | <a href="">Homepage</a></p>
  </div>
  <div id="footer"></div>
</div>
</body>
</html>








Related examples in the same category

1.'border' Example
2.border width, border style shorthand four values
3.border width, border style shorthand one value
4.border width, border style shorthand, three values
5.border width, border style shorthand two values
6.border: thin solid rgb(0, 0, 0)
7.border: 1em solid black
8.border: medium solid black
9.border: thin solid black
10.border: 1px solid rgb(0, 0, 0);
11.border: 1px solid crimson;
12.border: 1px solid gold;
13.border: 1px solid rgb(200, 200, 200);
14.Style sheet for border properties
15.border-color: red green purple blue; border-width: thin medium thick .25cm;
16.border overwrite
17.Use border-bottom to draw line
18.Dashed border
19.border: 1px dashed #8a795d;
20.Using image for border
21.border: 1px solid green;
22.When no border-color is specified, the border color is the value of the color property.
23.border-style: solid dashed double inset;
24.Border with default color
25.border sets the size, pattern, and color of the border surrounding the padding.
26.border: thick solid black
27.Border shortcut setting
28.border shortcut property takes three space-delimited values that represent the border's width, style, and color.
29.border: 40px double black; creates a black, 40-pixel, double-line border.
30.Border with specific setting for four directions
31.This paragraph has a 1 pixel thick, solid black border around it.
32.Border direction
33.Set border to '3px dotted #33333;'
34.Body border: 50px #666 ridge
35.Add border for different columns together
36.Combined style
37.border:none is the default.
38.Border's width cannot be negative because they are inside the margin.
39.Use nested border
40.border property, can be used to specify border-width, border-style, and border-color for all four sides at once.
41.Border cascade