1. Computing
About.com
Web Design / HTML

Discuss in my forum

Free Web Template: Brown Crossbar Layout

By , About.com Guide

XHTML CSS Brown Crossbar Layout

XHTML CSS Brown Crossbar Layout

Jennifer Kyrnin

About this Web Template:

This Web site layout was suggested to me by Marcia, the Bipolar Disorder Guide at About. It uses three divs to create a cross in the upper left of the page with the main content held below it. It would be well suited to a Christian Web site or one that wants to have Christian overtones.

The crossbar shape is acheived with two divs absolutely positioned. In order to get it to work in Internet Explorer, I had to make the height of the left div a specific pixel length. I would rather make it 100%, but that has strange results in IE. The net result of this is that the vertical bar may be much longer or shorter than the text on the page. You'll need to edit to fit.

See The Template

Works in Browsers:

Windows

  • Firefox and Mozilla 1
  • Internet Explorer 5 and 6
  • Opera 8.5 and 9

Macintosh

  • Firefox and Mozilla 1
  • Internet Explorer 5
  • Netscape 7
  • Safari 1

Details:

  • the entire page is intended to fit in screens 600 pixels wide
  • top div 30 pixels tall, 100% wide, absolutely positioned 70 pixels down and 0 left
  • left div 1000 pixels tall (see note above), 30 pixels wide, absolutely positioned 0 pixels down and 70 left
  • both left and top divs use a seamless background image to create the cross shape
  • the main div is placed with margin calls
  • the accent text and links are brown (#630) to match the background image

To Use the Free Web Template:

  1. Copy the CSS into a document named styles.css
  2. Copy the HTML into a file in the same directory
  3. Copy the image into the same directory, or create your own seamless background tile called "brownbg.gif"
  4. Change the text to your content
  5. Publish all three objects (HTML, CSS, and image)

The Background Image:

I used Macromedia Fireworks to create a seamless background tile. If you need to learn how to create a seamless background tile, you can learn more from Sue's Graphics Software site.

The Web Site Template Data:

More Web Site Templates:

Terms of Use:

You are free to use any of the free Web templates here for personal or commercial designs, either in print or on the Web, excluding items for resale. You may not give away, sell, or redistribute the files in any way. Do not post these files on any another Web site, electronically distribute them, or include them in any package for distribution. If you find these files useful, please include a credit line or a link back to this site [http://webdesign.about.com/]. Terms of use last modified 8/29/2004.

©2013 About.com. All rights reserved.