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.
MoreWeb 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!
Faux Columns
Gary Paul, 11/15/2010
Making 2 or more side by side columns the same height regardless of the amount of content in the individual columns is one of the perplexing issues facing the novice or hobby web designer. Most first time efforts involve setting the height on all the columns the same, trying to make them just tall enough to work...but it doesn't.
First, setting heights in div tags have some pitfalls and should be discouraged in most cases. One of the methods to create even height div tags is called Faux Columns, which involves creating a background image that will give the illusion of even heights.
Lets take a look at a page I created to illustrate how faux columns work. It's not pretty as I used some pretty bright colors, but it should get the lesson across.
First, you will notice I have centered the page. I have a header then we have a container div. This holds the 3 columns that we will apply the background image to.
This is the CSS for the container div, as this is where all the rules for creating the faux columns:
#container {
width:800px;
margin:auto;
background-image:url(images/fauxtest.png);
background-repeat:repeat-y;
overflow:hidden;
}
You see this line: background-image:url(images/fauxtest.png);, which is an image that looks like this:
The image width is the same as the container div, and the different colors of the background image are the same widths as the individual columns or divs.
We have this image set to repeat-y, or vertically. It is set in the container and the overflow is set to hidden. This will make the image repeat vertically to the tallest div, which means the other 2 divs in my example will have the background color also set to the tallest div.
So again, if you look at the example page, you will see I set the content, or the text to different heights, but all of the columns appear to be even heights.
What you should do is to open the sample page, view the source, copy the code and paste it into a new page. Download the image, here and put it in your images folder. Put the page on your server and viola, you have a faux column page. It is a good idea for you to change some settings, add/remove content to get some familiarity with the rules.
So if you are creating a page with two columns or four or more, the principle remains the same. Create an image that will be your background image, have the widths of the different colors of this image the same as the widths of your columns or divs. Place that image in your container div, have it repeat-y and set the overflow to hidden, and you are done!
There are some other examples you can get from the sample page, such as I also created a mini-faux column in the right column as well as examples of floating divs in within other elements.
Hopefully you found this helpfully for you.
