paulgdesigns.com

Custom Web Designs

  • Upgrades & New Designs

  • Repairs & Tutorials

  • Blogs & Bulletin Boards

  • MySQL Databases

  • Shopping Carts & E-Commerce

  • Search Engine Optimization

Whether this is your first web site, or you have an existing site in need of an upgrade or facelift, we can help.

From the "business card" site of just a page or two, to a dynamically controlled site that allows you to store all of your customers on the web for access anywhere in the world, we can help.

With technology and the web evolving at its current rate, it is no longer acceptable just to have a web site. It is at the point that just having a web site thrown up, or one that is out of date, can cause you more harm than good.

More

Web sites, like technology and fashion do not stand still. We all know that a 13" black and white television with rabbit ears is old fashioned, and a bee hive hairdoo is not the latest. And we also know that if you were thinking of doing business with someone with a hairdoo and tv as mentioned, you just might to opt out.

Web sites are no different, people can regconize old tired web sites, and when they opt out, you dont see them again.

Getting found on the web is not as easy as it used to be. Taking advantage of technology that does not cost any extra money, thats just smart.

Find out how we can help you to get found, and its all included!!

Some sites are just in need of some repair work. Others we can take your existing content and apply it to a new design. Others just take a little tweaking to get it into productive high gear.

Every web site we create is a billboard for our service! A $300 web site gets the same creative service that one costing many times that would!

PaulgDesigns

Saint Peters Village, Pa

1-610-469-8643

Contact

Centering your web page

Gary Paul, 11/15/2010

One of the most common questions posted on help board for developing a web site is how to center the content of your page. In HTML, the default alignment is left, so unless you set the rules for overriding the default, you page will stay left.

Fortunately, it is very easy.

First lets open a new page, and you should see this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

In between the head tags, type the following:

<style type="text/css">

</style>

So now your new page looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

</style
</head>

<body>
</body>
</html>

So we are going to create a new <div> and call it container. So we now enter this code and insert some sample content so the div will appear. This line of code will go in between the body tags:

<div id="container">Sample content goes here</div>

One last item and you will be ready to give it a test run. In between the script tags that you have already inserted into the head, enter the follow code:

#container {
width:900px;
margin:0px auto;
border:#cccccc 1px solid;

}

The code you have just entered is your Cascading Style Sheet, or CSS rules. We have told the browser that there is a <div> called container, it is 900 pixels wide, and the margins are set to 0 and auto, which is the centering rule. We have also added a border, this was done so it was easier for you to see.

So now your code page should look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

#container {
width:900px;
margin:0px auto;
border:#cccccc 1px solid;
}

</style>
</head>

<body>
<div id="container">Sample content goes here</div>
</body>
</html>

And your page will look like this(Click Here)

A few points of explanation. The hash mark, # , is used in CSS to give an ID to an element, in this case a division tag <div>. You can also create CSS rules with class rules. All you would need to do with that is to replace the hash mark #, with a period . , and you have a class rule. One of the main differences is that with an ID, there can only be one per page, with a class rule, there can be as many as you want.

For you to center an element, you must declare a width and set the margins to 0 and auto. The width can also be a percentage as opposed to a fixed width like in the example. It is not a bad idea for you to change some of the rules around to see what the result is.

If you notice, the <div> is centered, but the text is not. If you want to center your text, you would add another rule to your container set of rules like this:

test-align:center;

And your text will then be justified center.

I hope you found this helpful, there is more information on the next page about division tags and faux columns.

Care to post a comment?

Contact
paulgdesigns.com Saint Peters Village, Pa 610-469-8643
Contact
PHP Adobe MySQL Microsoft NetBeans Wordpress Project Seven HostMonster



Visa Mastercard Paypal