When it comes to layout markup and CSS I use FireBug and the Webdeveloper Toolbar for FireFox constantly.
With HTML block alignment a useful tool is the ruler under the Miscellaneous tab in the Webdev Toolbar.
The problem with it is this, every page refresh you need to add it back.
This is a pain when aligning a lot of different size elements, like forms for example.
So I made a simple tool for it, a graphic that is repeated with CSS over the area you are working in or the entire body.
A tiny bit of CSS and HTML goes a long way.
It is open source and available with an example on GitHub Grid Layout Overlay
Add the div to the area you want the grid to overlay.
|
1 |
<div id="grid"></div> |
Drop the image in an accessible path.
Add the CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#grid { display: block; position: absolute; background: url('../img/100grid.png') repeat; z-index: 10000; width: 100%; height: 100%; min-height: 800px; margin: 0; padding: 0; top: -12px; /* Adjust the Vertical position */ left: -6px; /* Adjust the Horizontal position */ opacity: .7; /* Adjust the opacity */ } |
Make sure to adjust the path to point to the image location url(‘../img/100grid.png’)
Then you should end up with a grid over your layout like this simple example.
I will be posting YouTube entries on this also.