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.
Sunday, May 31, 2009
Positioning of a DIV Box: Float and Clear Float
One of the reasons I did not use DIV with CSS as the layout at the beginning was that I did not know how to position the DIV boxes properly. I could use "float" property in the CSS stylesheet to place a DIV element to the left or to the right. However if I added another DIV element below the floated elements, the newly added element would not be at the place that I wanted it to be. Are you encountering the same issue right now? If so, maybe you made the same mistake I did.
The default display format for DIV elements is "block" which means the DIV elements are laid out vertically, starting at the top. If we want two DIV elements side by side, we can add a "float" property to the elements. This property specifies whether an element should float (to the left or to the right) or not. If so, the floated element will be shifted to the left or to the right as far as it can go depending on what value we assign to it. Now if we want to add another DIV element below these floated elements, we might forget to do one thing: adding the "clear" property to the newly added element.
This "clear" property specifies which sides of an element cannot be adjacent to any floated elements. In this case, we should apply "clear:both" property to the newly added element so that it will not wrap around any floated elements and instead it will go right below them. So the key here is: after applying the floats, make sure you CLEAR them. Good luck!
The default display format for DIV elements is "block" which means the DIV elements are laid out vertically, starting at the top. If we want two DIV elements side by side, we can add a "float" property to the elements. This property specifies whether an element should float (to the left or to the right) or not. If so, the floated element will be shifted to the left or to the right as far as it can go depending on what value we assign to it. Now if we want to add another DIV element below these floated elements, we might forget to do one thing: adding the "clear" property to the newly added element.
This "clear" property specifies which sides of an element cannot be adjacent to any floated elements. In this case, we should apply "clear:both" property to the newly added element so that it will not wrap around any floated elements and instead it will go right below them. So the key here is: after applying the floats, make sure you CLEAR them. Good luck!
Friday, May 29, 2009
Table Layout vs. Div with CSS Layout
A few months ago, I tried to create my first website. Since my budget was very tight, I had to do everything myself, designing the web pages and writing the codes. Although I had some programming experience before, I had no knowledge in this web design area. Thanks to internet, I can learn everything free online.
After reading a few materials about HTML, I started to write my own for my first web page. There were two options for the layout: table based layout and Div based with CSS layout. At that time "Div" and "CSS" were totally strangers to me. On the contrary, "table" is a very familiar name. So I decided to use table layout for my first try. I was wrong.
I was a web newbie and an absolutely amateur "designer". So it is not hard to imagine how "unprofessional" my web pages looked like. Two months later, I tried to redesign my web pages. It was really a pain. Simply speaking, the modifications to the codes were tedious even if I just tried to insert a cell in the table. Fortunately I have gained some knowledge of Div and CSS in these two months and felt that it would be easier to re-write everything from scratch by using Div with CSS layout. I was right.
The Div with CSS layout is kind of like separating content and the presentation layout into two different parts. The advantage is that you can concentrate on the content first while writing the HTML codes and worry about the web page presentation design later in a separate CSS stylesheet. It is just a lot more flexible and easier to make changes to a stylesheet. Also since the stylesheet can be stored in the cache at the client side if it has visited the same page before, it is faster to download the web page and therefore a better user experience.
If you are a newbie in this web design area as I was a few months ago and have no knowledge in HTML at this moment, you might not understand what I am talking about. But don't make the same mistake as I did before. Use Div with CSS layout for your first website and you will not regret.
Friday, May 1, 2009
Privacy Policy for web-newbie.blogspot.com
At web-newbie.blogspot.com, the privacy of our visitors is of extreme importance to us. This privacy policy document outlines the types of personal information is received and collected by web-newbie.blogspot.com and how it is used.
Log Files
Like many other Web sites, web-newbie.blogspot.com makes use of log files. The information inside the log files includes internet protocol ( IP ) addresses, type of browser, Internet Service Provider ( ISP ), date/time stamp, referring/exit pages, and number of clicks to analyze trends, administer the site, track user’s movement around the site, and gather demographic information. IP addresses, and other such information are not linked to any information that is personally identifiable.
Cookies and Web Beacons
web-newbie.blogspot.com does use cookies to store information about visitors preferences, record user-specific information on which pages the user access or visit, customize Web page content based on visitors browser type or other information that the visitor sends via their browser.
DoubleClick DART Cookie
If you wish to disable cookies, you may do so through your individual browser options. More detailed information about cookie management with specific web browsers can be found at the browsers' respective websites.
Log Files
Like many other Web sites, web-newbie.blogspot.com makes use of log files. The information inside the log files includes internet protocol ( IP ) addresses, type of browser, Internet Service Provider ( ISP ), date/time stamp, referring/exit pages, and number of clicks to analyze trends, administer the site, track user’s movement around the site, and gather demographic information. IP addresses, and other such information are not linked to any information that is personally identifiable.
Cookies and Web Beacons
web-newbie.blogspot.com does use cookies to store information about visitors preferences, record user-specific information on which pages the user access or visit, customize Web page content based on visitors browser type or other information that the visitor sends via their browser.
DoubleClick DART Cookie
- Google, as a third party vendor, uses cookies to serve ads on your site.
- Google's use of the DART cookie enables it to serve ads to the users based on their visit to your sites and other sites on the Internet.
- Users may opt out of the use of the DART cookie by visiting the Google ad and content network privacy policy at the following URL - http://www.google.com/privacy_ads.html
If you wish to disable cookies, you may do so through your individual browser options. More detailed information about cookie management with specific web browsers can be found at the browsers' respective websites.
Subscribe to:
Posts (Atom)