Website Technician

Sometimes you need to space thing on your site and don’t want to mess around with the CSS coding to accomplish the proper space requirement. In the past I have used line breaks to create vertical spacing. I have also used ascii spaces to create horizontal spacing.

No more, now I use a 1 pixel by 1 pixel transparent .gif file to do this work. Open your graphics editor and create a new image. Make the image a 1px x 1px file and leave it blank. When you start setting up a new file, be sure to have the background be transparent. Save the file as spacer.gif and upload it to your server.

When you need a vertical spacing then place the link to the file in your document and use the Height and width parameters to create the space.  For example if you need vertical spacing it would look like this:

<img src="http://www.you.com/spacer.gif" alt="Spacer" height="400" width="5" />

Need a bit of horizontal spacing:
<img src="http://www.you.com/spacer.gif" alt="Spacer" height="1" width="50" />

Try it out.

Steve

Here is the CSS parameters for setting up a simple table. I don’t know why they are disliked, especially when intended to keep everything tidy on a web page or blog post.

If you have more than one table, just add a class name, in this case .black. Then the table would start like this: <table class=”black”>

table.black{
margin: 10px 8px 10px 8px;
padding: 10px 8px 10px 8px;
table-layout: automatic;
text-align: Left;
font-family: Times New Roman;
font-size: 20px;
line-height: 110%;
word-spacing: 1px;
color: #FFEFC9;
}

That was fairly straightforward and are used on my tutorial here:
Click here to look at the page.

Then there is a need to use them in blog posts to keep everything tidy.

Like Here

If you have Excel, get a copy of my HTML generator(right sidebar, below). This is real handy if you use a shopping cart. It can generate a simple table like this one without a cart entry, or one that employs a cart.

Click image to enlarge.

Copper Pendant Item # sample, $45.00

Steve

Here is an interesting site:

Click Here

Steve

I like my links in blue and underlined. Below is the CSS entries that make this happen. Inside a WordPress blog you have to go to the Appearance section and click on Editor. This will open the CSS editor of your theme. Then you have to find the correct section and look for the “a” tag, since links start with <a href=”http://.

I found it and made it the color I wanted, the #1E0ECF color, added the underline and then made the Hover color slightly darker blue to make it look like a link.

.contents a{
color: #1E0ECF;
text-decoration:underline;
font-size:18px;
}

.contents a:hover{
color: #190CAA;
text-decoration:underline;
font-size:18px;
}

The Reference site

This would also apply if it were a part of a CSS in a traditional HTML page.

Steve

You need to check out an interesting article, “53 CSS-Techniques You Couldn’t Live Without”
By Vitaly Friedman
Visit this Turorial

Cascading Style Sheets are a bit tough for beginners to get their heads around, but is a must-learn. Start with simple controls and springboard from there.

The Reference site

Steve