Design & Publishing . /
. WEB . /
. Tips & Tricks Index . /
. Wide Left Margins
- “How do they do those pages with the wide border down the left
side of the paper?”
We began teaching this technique in late ‘94 but it’s still a very frequent question.
1) Create the background.
- You'll need a non-transparant gif file that is as small as possible... 4 to 6
bits max. Usually use only three to six colors.
This file should be at least 1,000 pixels wide, by no more than 10 pixels deep. (Our
example will be 1,000 x 4)
Paint the file so that the browser-safe color on the left-end is what you want for
your "border". You can also use a ‘safe’ fully optimized texture.
2) Call it in your HTML
- You will ‘paint’ the entire background with your file, then call a compatible
background color using the Body/Background tag:
<BODY BACKGROUND="FileName.gif" BGCOLOR="#FFFFFF">
- We want to send the background color incase the file doesn’t come down on the
3) Arrange text on the page.
- Use either tables or a definition list to move the text over, out of the margin.
A table used with a wide margin will allow a narrow column of text or buttons to
reside in the color area itself.
- 4) Eliminate Alignment Problems
- The easiest way to make sure your text aligns with the margin is to set up a
three-column table. The first column, (which overlaps the color margin you've created)
can contain information in the margin area if you like.
The center column acts as "buffer" and bridges the margin into the content
area. Make sure it's at least 6 pixels, or holds the right column at least 10 pixels
away from the border. (Add some CELLPADDING, but not much.)
You'll also want to turn the borders off <TABLE BORDER="0"> to make
the table invisible.
- 5) Test it.
- It can be helpful to create a screen capture of the page with table in place
as a template for the completion of the background file. We also stress the 10-pica
"buffer" since browsers have different offset dimensions between the true
edge of the window and content start. The AOL browser is a horrendous offender for
pushing the content over into the border, so all care is urged.
- 6) Available solutions.
One of the best collections available anywhere for under 50-bucks is the wonderful
There are some canned solutions you can play with like the WebStationery templates
developed by Christopher Hunt, email@example.com.
Drop in on his web site and have a look around. http://www.studentaccess.com/hp/DESTINY/
"Webpaper" from Jay Boersma is another collection, along with other page
creation tools: http://www.ECNet.Net/users/gas52r0/Jay/home.html#gifs.
These files are also available in most shareware sites like America Online, AMug.org,
Download.com, or Shareware.com.
So we won’t post them here.
- Give it a try, and give us a look.
Design & Publishing
. / . WEB . / . Tips & Tricks Index
- Interested in having your web page critiqued? Send email to: firstname.lastname@example.org
Interested in getting published?
If you'd like to publish in the pages of WebDesign & Review
then capture and read our "Readers Guidelines"
found here, or from our On-Demand Documents Desk by sending e-mail to Info@Graphic-Design.com
...Put the word HOSPITALITY, and GUIDELINES in the subject area.
Thank you for visiting WebDesign & Review at http://www.graphic-design.com/web/
Notes: The screen shots herein represent the copyrighted works of
their respective owners, and are used here for editorial demonstration purposes.
please read and be aware of our Legal
Properties & Disclaimers document. Not all areas of
the online environment allow special characters such as the registration and trademark
marks. This file will alert you to proprietary works that cannot be duplicated or
distributed. Copyright 1996, 1997, 1998, Showker Graphic Arts, for the The Design
& Publishing Center, ALL RIGHTS RESERVED. WebDesign & Review, Pixelsmith,
WebEye are all trademarks for The Design & Publishing Center. Other products
mentioned in these pages are the registered trademarks of their respective owners.