|
|
|
3 Things You Must Do To Create Personal Web Pages
Almost everyone I have known since getting on-line five years ago has a driven ambition to design their own web site or sales pages for some project of theirs. Yours is a special design or article that makes it tough to design everyday web-pages for...
Cheap Website Design - Dangers of Cheap Web Design for Your Business
We have all heard the saying "you get what you pay for" this holds true for website design as well. I have been in the website design and internet marketing industry for over 6 years now and I have talked to a lot of people who have made the mistake...
Digital Printing for artworks
Digital printing is continuously on the rise in the world of technology with the modern times. Many businesses and art graphic companies have relied on the use of digital printing. This is a breakthrough which has advanced in the foundation of art...
Effective Web Design
D.zigns dzignerwebs The Basics Before starting on how to design a website effectively, how about clearing some basic web design concepts? Designing Effectively Now that you know what web design and related terms mean, lets get down...
Eliciting Constructive Website Feedback
"It's good." "You've done a nice job." "I don't like it." At some point, you have probably received comments like this when asking for constructive criticism of your website efforts. Unfortunately, the generic nature of these comments does not...
How to customize web templates on your own to create unique websites
How to customize web templates on your own to create unique websites Web templates are raw materials that need to be refurnished/edited to be published online. Editing web-templates could include content insertion, graphic insertion/modification,...
How To Work With Your Design Team
As the Creative Director at JV Media Design, I oversee and manage all creative projects and staff. In order to undertake this task, I have developed an outline for our team to follow that facilitates the process which takes each project from concept...
Linking out is good
Many websites I come across don't have a single link to another website. Ask the webmaster why not, and the answer you get is simple enough: "If I link to other websites people might leave my site." At this point I break the news that site...
What is a content management system and Why do i need one?
This article introduces content management systems and gives an overview of their features and benefits. It should be read by anyone unsure of quite what a CMS can do for them. What is a CMS? A content management system is a piece of software...
YOUR FIRST HTML PAGE - I
I often hear and read about various web authoring tools available that can help you create the coolest web pages in a jiffy, for example, FrontPage2000, Dreanweaver, CoffeeCup etc. But let me tell you one thing, there is nothing like using a simple...
|
|
| |
|
|
|
|
|
|
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
|
|
|
|
|
|