Creating Page Layouts Using CSS? Here are the Tips that you can Use
Using tables as a design tool has become almost a prehistoric technique. Almost everyone in the web designing community agrees that tables are not the best way anymore to create page layouts.
So, the obvious choice left is to use CSS to neatly organize and structure their web pages.
Here are some cool tips to help you use CSS more effectively for creating layouts.
1. Make Use of Nested DIVs
A very basic understanding of the two types of positioning used in CSS can already help you create better CSS layouts.
While relative positioning is considered to be the most flexible way to create layouts, there are certain scenarios where absolute positioning seems to be a better choice. One such case is when you use nested DIVs with absolute positioning.
Nested DIVs with absolute positioning behave differently, which will be helpful if you want your nested DIVs to flow with the container DIV.
An absolutely positioned DIV nested inside another DIV will appear on the upper left corner of the DIV container by default. So, it flows along with the container DIV when the browser window is sized.
2. Always Test Even the Smallest Changes
Whenever you make a change in the attribute values of a style, make sure that you immediately test the changes.
Even a small change in the positioning or size values can cause major discrepancies in the web page, because the positioning of a single component can impact the positioning of several other components relative to it.
By testing out every change, you can easily detect the cause of a problem which will be quite difficult to do when you test after several changes have been made.
Testing every change will also allow you to discover new things as to how you can improve the look of your web page. So, make small changes and keep testing them regularly.
3. Avoid Using Layers Exclusively
A layer can also simply be put as a DIV with absolute positioning. However, similar to the use of tables, using layers for creating a page layout is considered a bad practice.
As layers make use of only the absolute positioning, they offer a rigid and inflexible layout. You should always use a combination of absolute and relative positioning for the DIVs to achieve the desired page layout.
4. Large Goes Before Small
You should make it a rule to place the larger components before the smaller ones. You can position the smaller components relative to the larger component which will help you get a consistent look for your web page.
5. Use SuperPreview
SuperPreview is a feature that lets you see a preview of your page in the various versions of Internet Explorer (IE). By testing your page layouts using SuperPreview, you can easily detect discrepancies in the page design and correct any type of positioning issues.
6. Look at the Quick Position Display Box
If you are using a tool, you might as well make the best of it. So, when you use SuperPreview to view a particular component, you can see a quick position display box that displays the dimensions and positioning details of the component.
Remember to take a look at this box, since it can provide you with insights into detecting the cause of positioning problems which you may encounter.
7. Choose Your HTML Elements Carefully
Certain HTML elements are rendered differently by different browsers. You must thus remember to test them out and only use the HTML elements that will offer a uniform page layout in all web browsers.
For instance, menus can be created using both unordered lists with a float enclosed in DIVs with explicit positioning or with the help of nested DIVs. While the former may result in varied positions, depending on the browser, the latter will give you a consistent look.
8. Pay Attention to HasLayout
HasLayout is an internal property found in the IE Document Object Model (DOM). You can only make use of this property implicitly and you need a clear understanding of its working procedure.
You can use it to avoid positioning properties encountered in IE by rendering the desired element with this property in the DOM SuperPreview.
You can also check this property by noting the color of the bracket around an element: Orange means that the HasLayout is set to true and gray means that it is set to false. But, this property does not hold any importance in the IE 8 mode.
9. Centering DIVs
Aligning DIVs to the center position must be done properly because improper center alignment can lead to a chaotic page layout. The following three steps should be followed to properly center DIVs:
- – Set the position property.
- – Set the width of the DIV.
- – Set the left and right margin of the DIV to “auto”.
10. Using Graphics and CSS Color Properties
Matching CSS color properties to that of the graphics used on the web page is necessary to give a proper and consistent look to your web page.
However, if you choose to go the easy way and do it with the help of a color picker, it may not actually give the results you want. Colors may be rendered differently in different browsers and hence you must only use the accurate color values.
So, you must make sure that the color values in the CSS layout are the same as those of the color values used in the page graphics.
Have you applied any of the aforementioned tips? Do you have any tips to share or questions to ask? Please feel free to drop us a note below and thanks for reading!