If you want to create a boxed area within a web page, there are a good number of ways to go about doing so. As this site deals with promoting online stores and increasing traffic to them, this article will cover a few box types that are useful for displaying product details in a clean manner.
The informational blurb box
Sometimes you might want a single piece of information to really stand out on a page so that people are sure to see it.
One way to do this is by adding styles to a paragraph, which looks like the following:
Don’t miss this special offer!
The code for the above box is as follows:
If you want to be able to use style sheets, you could simply make a new style for such boxes like the following:
You could then create the same box with:
• <p class="callout">Don’t miss this special offer!</p>
Atahualpa users could place the callout css in theme options under CSS Inserts via "Appearance" → "Atahualpa Theme Options" → "HTML/CSS Inserts" → "CSS Inserts"
Other themes would generally ahve this placed within the style.css file for the theme.
Another way to do this is by adding styles to a table, which looks like the following:
| Don’t miss this special offer! |
The code for the above box is as follows:
Of course, you could use a style to make entering this by hand easier:
That would change the table declaration to:
• <table class="callout">
If you wanted links inside, they would need styled as well.
To place the style inline, you would use:
• <a href="URL" style="color: #CE0000; font-weight: bold;">
To place the style in cascading style sheets, you might use the following code:
That would cause the link to look like the rest, but make the background turn red and the font turn black when you place your mouse over it.
Here is a little more information on the attributes used above:
- Borders
- border: 1px solid #000000;
- 1px
- Sets the width of the border as a whole in pixels
- 2px would make a two pixel border
- solid
- Tells the browser to draw a solid border
- Alternatives are dotted and dashed
- #000000
- Tells the browser to draw a black border
- The notation is #RRGGBB (red/green/blue)
- Background:
- background-color: #CCCCCC;
- CCCCCC is the red/green/blue value to color the border with
- Font weight:
- font-weight: bold;
- Various values available. The most common being bold or normal
- Font color
- color: #CE0000;
- The color to use for text. In this case a shade of red.
- Text decoration
- text-decoration: underline;
- Special decorations for text such as underline, strikethrough, and none.
There are certainly other attributes which can be tweaked, but that should give you some ideas.
The product attributes box
If you want a box to quickly show certain attributes of a product, I recommend using a table like one of the following:
| Size | Weight | Price |
|---|---|---|
| Large | 2 lbs. | $4.00 |
or
|
|
As with the boxes at the top, these tables can have their styles set as well.
Special info on tables:
It is worth noting that in tables, you can specify width to set how large the table will be.
This can be either a flat width in pixels or a percentage of the width available to the table.
You can also set widths on td elements. For example, if you had three columns and wanted all of them to be about the same width, you could set width="33%" in the first two td pieces which would force the third to use the other 34%.
