Even though you are writing the standard HTML and CSS codes for your website, it might look differently in different browsers. Why is that?
The main reason is the vague standard. The browser developers might have different understanding of those words written in the standard manuals. Also they might assign different default values to the HTML elements. As a web design newbie, you may not know all the differences between all popular browsers. So it is not unusual that your new website look differently in different browsers.
It is very important to make sure your website look correctly in all browsers. Many of us will not have all kinds of browsers installed in our computers. Then how to verify your website? This site http://browsershots.org/ can help you get snapshots of your website for many browsers. So you do not need all browsers in your computer to test your websites. Is it a big relief?
Monday, June 22, 2009
Thursday, June 11, 2009
Center a Web Page Horizontally
It is easy to center a web page horizontally when you use the table based layout. There is an "align" attribute for the table tag. We just need to assign the value "center" to this attribute and the table as a container for your web page will be in the center. But as I mentioned in my earlier post, it is recommended to use the Div based with CSS layout. Then can we do the same thing to center a web page?
The answer is no. The "align" attribute for the div tag is deprecated and will not be supported by the newer browsers. But this is not the key reason. The key reason is that the "align" attribute means differently for the div tag. It specifies the alignment of the content inside the div element, not the div element itself. So we cannot use this attribute to center the div box as a container. What can we do then?
CSS is our friend. The easiest way to center a div box horizontally is to assign a width to the box and apply this style protery: "margin: 0 auto". The first value for the margin proterty is for the top and bottom margins. The second value is for the right and left margins. Also the doctype declaration must be HTML 4.01 strict or above. All these together will place your web page in the center. Not very hard, right?
The answer is no. The "align" attribute for the div tag is deprecated and will not be supported by the newer browsers. But this is not the key reason. The key reason is that the "align" attribute means differently for the div tag. It specifies the alignment of the content inside the div element, not the div element itself. So we cannot use this attribute to center the div box as a container. What can we do then?
CSS is our friend. The easiest way to center a div box horizontally is to assign a width to the box and apply this style protery: "margin: 0 auto". The first value for the margin proterty is for the top and bottom margins. The second value is for the right and left margins. Also the doctype declaration must be HTML 4.01 strict or above. All these together will place your web page in the center. Not very hard, right?
Friday, June 5, 2009
Floated Elements Don't Float?
Did you fail to float a box element to the left (or right) even though you have assigned the style property "float:left" (or "float:right") to that box? I believe many newbies experienced this problem when they worked on their very first websites. So why didn't it float as you want?
The "float:left" style property should shift the box to the left. But will it place the box to the leftmost side of the containing box? Many newbies may say yes. But the answer is: sometimes. If one or more preceding boxes float to the same direction, say left in this case, the current box with a "float:left" style property will not be at the leftmost side of the containing box. It will be shifted to the left but at the right hand side of the preceding boxes that have the same "float:left" property. Is there any solution if I really want to place the current box to the leftmost side?
Of course there is. The solution is the same as I mentioned in my previous post. Just assign the style properties "clear:both" and "float:left" to the current box. It will be floated to the leftmost side of the containing box as you want. So clearing the float is the magic again.
The "float:left" style property should shift the box to the left. But will it place the box to the leftmost side of the containing box? Many newbies may say yes. But the answer is: sometimes. If one or more preceding boxes float to the same direction, say left in this case, the current box with a "float:left" style property will not be at the leftmost side of the containing box. It will be shifted to the left but at the right hand side of the preceding boxes that have the same "float:left" property. Is there any solution if I really want to place the current box to the leftmost side?
Of course there is. The solution is the same as I mentioned in my previous post. Just assign the style properties "clear:both" and "float:left" to the current box. It will be floated to the leftmost side of the containing box as you want. So clearing the float is the magic again.
Subscribe to:
Posts (Atom)