728x90 Banner

BlueBoden's BorderTechnique With background-Images

Published by BlueBoden on 11. July 2008.

This example is based on the original BlueBoden's BorderTechnique Example.

I mainly made this page to show how to use my Technique with background-images, and how to create rounded corners in css based layouts. This method is one of the best ways to create rounded corners, as no hacks are used. I also toke advantage of CSS Sprites to lower the http-requests, and decrease page load-time.

This is a CSS Position based layout.

It should be said that it is possible to apply this Technique to percentage based, and/or multi-column layouts. In practice you would want to apply a min-width and you may consider applying a max-width.

This Technique uses Absolutely Positioned Divisions, inside a relatively positioned Parant Block. This allows us to set the height of the left and right border divisions to 100%, and let them expand if the content requires it, I.e. If its longer then the min-height.

BG_SpiritsRTB2.png BG_Spirits2.png

The Full Source Code

Published by BlueBoden on 9. november 2007.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>BlueBoden's BorderTechnique</title>
<style type="text/css">
body, .sar_01, .sar_02, .sar_03 {
  /* the sar classes need this bg applied to fix a bg shadow-overlap */
  background: #72c1ca;
}
body {
  color: #0d5288;
  margin: 1em 0 10em 0;
  padding: 0 1em 0 1em; /* Required to fix a issue where the browser would cut the borders when resized, the alternative is to place the borders inside CenterContentBox rather then outside. */
}
.CenterContentBox {
  /* This is the actual BorderBox, it also defines the width of the content. */
  width: 75%; /* This is limited by the min and max-widths */
  margin: 3em auto;
  max-width: 1200px;
  min-width: 800px;
}
.SarCenterContent {
  position: relative; /* Position Relative is used to anable absolute positioning inside a container, in this case SarCenterContent. */
  width: 100%;
  margin: 0 auto; /* Used to center the container, i'm not sure its really used for anything at this point. */
  padding-bottom: 1em;
  text-align: left; /* Since ealier versions of IE sometimes required the text-align: center; we reset the text alignment. */
}
.sar_01 {
 position: relative;
 width: 100%;
 height: 48px;
 background-image: url("/saek/mappen-billeder/BG_SpiritsRTB2.png");
 background-position: 0px 48px;
 overflow: visible;
 z-index: 1;
}
.sar_02 {
 position: absolute;
 left: -11px;
 width: 27px;
 height: 48px;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: 0px -24px;
 overflow: visible;
}
.sar_03 {
 position: absolute;
 right: -18px;
 width: 35px;
 height: 48px;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -27px -24px;
 overflow: visible;
}
.sar_04 {
 position: absolute;
 left: -11px;
 width: 11px;
 height: 100%;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -116px -72px;
 overflow: visible;
}
.sar_05 {
 position: absolute;
 right: -18px;
 width: 18px;
 height: 100%;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -127px -72px;
 overflow: visible;
}
.sar_06 {
 position: relative;
 width: 100%;
 height: 24px;
 background-image: url("/saek/mappen-billeder/BG_SpiritsRTB2.png");
 overflow: visible;
}
.sar_07 {
 position: absolute;
 left: -11px;
 width: 27px;
 height: 24px;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -62px -24px;
 overflow: visible;
}
.sar_08 {
 position: absolute;
 right: -18px;
 width: 27px;
 height: 24px;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -89px -24px;
 overflow: visible;
}
.Decoration_01 {
 /* Light on the Top in the left border. */
 position: absolute;
 top: 0px;
 left: 0px;
 width: 11px;
 height: 50px;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -145px 0px;
}
.Decoration_02 {
/* Light on the Bottom in the left border. */
 position: absolute;
 bottom: 0px;
 left: 0px;
 width: 11px;
 height: 50px;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -156px 50px;
}
.Decoration_01right {
 /* Light on the Top in the right border. */
 position: absolute;
 top: 0px;
 right: 7px;
 width: 11px;
 height: 50px;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -145px 0px;
}
.Decoration_02right {
 /* Light on the Bottom in the right border. */
 position: absolute;
 bottom: 0px;
 right: 7px;
 width: 11px;
 height: 50px;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -156px 50px;
}
.Decoration_05 {
 /* Decoration on top border */
 position: absolute;
 top: 0px;
 right: 10em;
 width: 2px;
 height: 40px;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -167px 0px;
}
p {
  margin: 1em 1em 0 1em;
}
h1 {
  font-weight: bold;
  font-size: 2em;
  margin: 1em 0 0 0;
}
h2 {
  font-weight: bold;
  font-size: 1.5em;
  margin: 1em 0 0 0;
}
.indent {
  margin: 0 1em 0 2em;
  font-size: 0.9em;
  font-style: italic;
}
</style>
</head>
<body>

   <div class="CenterContentBox">
    <div class="sar_06">
     <div class="sar_07"></div>
     <div class="sar_08"></div>
    </div>
    <div class="SarCenterContent">
     <div class="sar_04">
      <div class="Decoration_01"></div>
      <div class="Decoration_02"></div>
     </div>
     <div class="sar_05">
      <div class="Decoration_01right"></div>
      <div class="Decoration_02right"></div>
     </div>
        <!-- ContentGoesHere Start -->
     <h1>Headline 1</h1>
     <p class="indent">Description Paragraph</p>
     <p>Paragraph</p>
     <h2>Headline 2</h2>
     <p class="indent">Description Paragraph</p>
     <p>Paragraph</p>
        <!-- ContentGoesHere End -->
    </div>
     <div class="sar_01">
      <div class="sar_02"></div>
      <div class="sar_03"></div>
     </div>
    </div>

</body>
</html>

All Examples are Copyrighted by Brugbart Webdesign, and may not be copied without permission.