|
|
|
Can I Optimize A Site Designed With Frames?
Can you optimize a site designed in frames? Of course you can! The question should be, "how effectively can I optimize a web sire designed in frames?" Framed sites – in my opinion – have little use in today's web design....
Common Advertising MISTAKES
One of the mistakes most often made, is not looking at your product or service announcement from the point of view of your customer. Stand back and look at what you are offering, how can you present that service or product in such a way that it...
Easy Web Design Tips
Pick an easy layout; easy to design and easy to maintain. I have wasted many hours trying to design a site that was easily three steps above my skill level. This was a complete waste of time and I promised myself that I won't make the same mistake...
Web Source Web Design Tips - Adding An Image Background To Your Tables
You can add an image background to your table cells by adding BACKGROUND="yourimage.gif" to your tag. About the Author
Shelley Lowery slowery@web-source.net Tip provided by: Web Source: Your Guide to Professional Web Design and...
Why Have An Article Website?
Know the fact Presumably, you already knew what internet is all about. Its all about content. With free quality content, you can easily attract the masses. Some may consider this as an investment while some may treat it as a hobby. If you are...
|
|
| |
|
|
|
|
|
|
How to Create Columns with Div's
When we at Ecommerce Partners (http://www.ecommercepartners.net) started using div’s rather than table for web page layout, the most daunting experience for me was how to create columns using div’s. So, here is the solution for all those website developers who are struggling to use div’s for web page layout.
The div tag can be defined as the division in a web page. It is a block level element. This implies that the default behavior of div’s is to stack up one above the other. This serves the purpose of using div’s for a simple web page layout where all the elements stack one above the other. When we have a columnar web page layout (which happens to be the most common layout for majority of the websites), we need to know how to use div’s to create two or more columns in a web page.
The following method will cause div’s to stack up side by side rather than one above the other.
Let’s say that we have two div’s:
{div id=“div1”}{/div}
{div id=“div2”}{/div}
(in order to display it right on a browser "{" has been used in place of "<" in the above example)
Now, in the stylesheet declare the following rules.
#div1 { float:left; width:50%;}
#div2 { marging-left:50%; width:50%;}
The result will be two columnar div’s. You may use this method to create as many columns as needed on the web page.
Now, if you need these two columnar div’s to expand vertically equal to each
other you can use the following method.
First create a background image that if tiled vertically will look like two columns. For reference, please visit http://www.ecpgroup.net. Here, background image (http://www.ecpgroup.net/images/content_bg.gif) has been used in the container div that holds the body and the footer of the web page.
This background image must be 1 pixel high and as wide as the container that contains all the elements of your web page.
In the html document:
{div id=“container”}
{div id=“div1”}{/div}
{div id=“div2”}{/div}
{/div}
(in order to display it right on a browser "{" has been used in place of "<" in the above example)
Declare the following rules in the stylesheet:
#container { background: url(the_Url_Of_The_Background_Image.gif) repeat-y 0% 0%; }
#div1 { float:left; width:50%;}
#div2 { marging-left:50%; width:50%;}
The result will be the appearance of two columnar div’s expanding vertically equal to each other. So, although we cannot extend a div vertically equal to another div, we can make it appear so. This is exactly the method used at http://www.ecpgroup.net.
About the Author
Shruti Gupta works for ECommerce Partners.net (http://www.ecommercepartners.net) - a website design company in New York. We pride ourselves in developing search engine friendly and standard compliant websites. Email: info@ecommercepartners.net
|
|
|
|
|
|