Posts Tagged ‘Heading’

10
Jan
2010

How to center a header, with HTML and CSS

1 Comment

Welcome to my blog, please feel free to subscribe to my RSS feed, join me on Twitter or leave a comment.

Here’s a quick tip that’ll help you centre a heading using nothing more than a little bit of HTML and CSS.

First, in a new HTML document (which you can create using something as simple as NotePad or Textedit simply by saving your text document with the .html extension), you’ll want to create a new heading. You can do it by including the following code in your document:

<h1>Hello World</h1>

This text adds a standard heading to your website but what if you want to centre the heading on the page? Easy! Let’s modify the standard <h1> tag to apply a style sheet directly to it:

<h1 style=’text-align:center;’>Hello World</h1>

You’ll notice that I don’t need to setup an individual style sheet to accomplish this task, simply adding the style attribute will allow me to make the changes to this one specific item. If I want to be able to centre multiple items, I could use a style sheet class to accomplish the task:

<style>
.center {text-align: center;}
</style>
<h1 class=’center’>Hello World</h1>

Note the class is represented in the style sheet as a period (.) plus the name of the class. Similarly, if I wanted to assign the centre to all occorances of the <h1> tag I could use:

<style>
h1{text-align: center;}
</style>
<h1>Hello World</h1>

Tags: , , , , , , , , , , , , , , , ,
Posted in HTML Programming

read more
23
Apr
2009

How to center a header in HTML without using the center tag

5 Comments

The HTML <center> tag is one of those funny little tags left over from the early days of websites when designers often mixed the publishing of web content with design. These days, it’s much easier to separate content and design by using effective style sheets.

To center any text in HTML and CSS, we can simply add a couple of lines of code to our stylesheet file as follows:

[source lang="css"].center {
text-align:center;
}[/source]
This little code snippet will center the content within a block tag (such as a <p> or <h1>) but only if it already knows the width of the object you’re centering too! To get around this, we can simply add the display:block tag to our CSS:

[source lang="css"].center {
text-align:center;
display: block; 
}[/source]
Now our code knows to center text.

To apply it to our HTML code, you need to simply apply the code to an object as a class. For example let’s turn a heading into a centered heading by applying the new class like so:

[source lang="html"]
<h1 class=’center’>This is my header.</h1>
[/source]

 

It is of course also possible to simply align all <h1> tags to the center by using the code:

[source lang="css"]h1 {
text-align:center;
display: block;
}[/source]

What about converting existing pages?

Luckily if you already have a bunch of documents which use <center> tags there’s fairly simple fix for you to clean up those files. Using a tool like Adobe Dreamweaver you can do bulk search and replace functions across multiple files.

The replace is a two step process. (please backup your site before doing this)

First, let’s replace the phrase </center> with </div> across the entire site. This will change the closing tag (remember all tags come in pairs right?) to be a normal div tag.

Now, let’s replace the phrase <center> with <div class=’center’> to turn the opening tag into a div tag with the center class assigned.

You can now add the .center details to your CSS file and presto, your website is now using the proper center formating!

Tags: , , , , , , , , , , , , , , , , , , , , , ,
Posted in HTML Programming

read more
22
Oct
2004

Newsletters are great for business

1 Comment

Publishing a newsletter for your business is one of the best ways to increase both customer loyalty and sales since it’s a direct line from you to your customers and keeps your business fresh in their minds.

Newsletters provide you with the ability to show your clients that you are an expert in your field, as well as providing them with well-written and useful news which is sure to improve their understanding of your industry.

A great newsletter is one that gets forwarded to friends, business partners and associations so makings sure your readers feel comfortable forwarding it onto their contacts is important. To do this, make sure the information is accurate and timely and that you include the tools required to print, email and forward the newsletter easily.

Here are five great tips to help you publish an effective newsletter:

Stick to what you know
Sounds silly right? Well you’d be surprised. So make sure your newsletter is accurate and the information in it is the best information you can provide.

Mail it out
Send your newsletter to your existing mailing list as well as community groups or associations you feel may benefit from your expertise. Remember, you should be proud of your newsletter, if it will help area businesses then send it to them.

Focus on subjects of interest
If you’re an accountant and tax season is coming up, talk about subjects to help your readers or if you’re a retailer heading into Christmas, why not provide facts or services to entice your audience?

Make the most of your text
Write well rounded, clean articles and check for spelling or grammatical errors. If you’re not a strong speller, use a spell check program but don’t depend on it. Print out your newsletter and have a friend read it. If you still need more help, hire a writer and have them write the articles.

Put it online
Once your done with your newsletter, archive it to the Internet and link to it online. Remember that when you send it out in print, include a link to your website so that people can find it easily.

This article first appeared on my old website in 2006 but was recently recovered from my old archives.

Tags: , , , , , , , , , , , , , ,
Posted in Web Site Advice

read more