Advanced Firebug Techniques in Windows XP Home
(Page 1 of 4 )
In the previous article, we discussed important Firebug techniques for inspecting and editing CSS. We also started to analyze CSS metrics. In this last part of the three-part series, you will learn how to maximize the CSS metrics, analyze web page loading times and start using Firebug with JavaScript. In short, we are starting to look into the advanced uses of Firebug.
Again, it is highly recommended that you read the first two parts of this tutorial if you are completely new to Firebug.
Actual Example of CSS Metrics Adjustment
One of the most useful and basic functions in Firebug, which appears tricky, is adjusting layouts. We ended part two of this tutorial with a basic introduction to making CSS metrics adjustments. Let us give an example:
Suppose we wish to widen the post width and decrease the sidebar width, and want to test it using Firebug. The first thing we will do is conduct measurements (in pixels) and measure the total width occupied by both the post and the sidebar.
Total width = Total post width + Total sidebar width
Note: The screen shot combines two CSS measuring elements for both post and sidebar for clarity purposes. When you do the real inspection, you can only do this one at a time (for example, measuring one element after another)
The post width is 660 pixels while the sidebar width is around 300 pixels. These widths are a total of the padding widths and the actual widths: (1+10+278+10+1). Therefore the total width is around 960 pixels:
Total width = 660 pixels + 300 pixels = 960 pixels
If we plan to increase the post width to 730 pixels, for example, we'll want to preserve the total width. To preserve it, the sidebar width will decrease, to around 230 pixels (960 pixels - 730 pixels = 230 pixels). In order to edit the values, just click on the number, and then you can replace it with your desired values. Firebug will automatically increase the width. See below for the sample revisions. The value of 660 pixels was changed to 730 pixels.
As simple as this example is, you can apply this concept to adjust complicated layouts.
Next: Improve Loading Times with Firebug >>
More BrainDump Articles
More By Codex-M
