For this tutorial, I already have the background image made. I misaligned everything on purpose to show how you can align divs in the layout. Also, how to change the background color of a div by using the Color Picker. Instead of guessing like me, I did not realize how good the Pixel Measurer actually is, until i tested it. It works perfectly. So if you want to figure out how much space is required to move a div to the left, right, up, or down, just use the tool below. Questions, comments, suggestions. The zoom worked well here, is it too far? Any questions, comments, suggestions, just say.
Watch is High Quality (HQ): http://www.youtube.com/watch?v=ItUhjfqcLo0&fmt=18
Where is the Code? http://www.fileden.com/files/2008/6/12/1956714/1divblueblack.txt
How do you hide the bottom links? http://www.fileden.com/files/2008/6/12/1956714/hidebottonlinks.txt
What do you use to pick a color to match the background color of anything? http://www.iconico.com/colorpic/
How do you measure the pixel distance between divs to not blind guess? Here is a good measurer I found, you need to download the firefox browser to use it. It will download to the add-ons. Just click the blue link. http://www.kevinfreitas.net/extensions/measureit/
Who made the layout? I did.
I will be showing how to make a div overlay layout, just follow along. The first code is the original code I started out with, the second link is the image we want our background to look like, the third link is the final code. We go from this div overlay layout http://msdazzlebackgrounds.com/myspace-layouts/preview/3406 to this layout http://msdazzlebackgrounds.com/myspace-layouts/preview/3401
Code 1 -http://www.fileden.com/files/2008/6/12/1956714/before%20code%20feb%203%202009.txt
Background Image- http://i216.photobucket.com/albums/cc191/atord1987/remadebeautifulgreenblackdiv.png
Code 2- http://www.fileden.com/files/2008/6/12/1956714/feb%202%2009%20div%20green%20white%20yellow%20layout.txt
I am trying to make it not to be confusing by explaining every step i'm doing. If you follow along, you should be able to do one of your own! Any questions, comments, suggestions, ask away. Feel free to rate, comment, or subscribe.
****Some tools you need are ****
MeasureIt (Measures the amount of pixels between two divs, also measures the width and height of something, so you don't need to guess. http://www.kevinfreitas.net/extensions/measureit/
Firefox Browser (To be able to use the pixel measurer) http://www.mozilla.com/en-US/products/download.html?product=firefox-3.0.5&os=win⟨=en-US
Color Picker - Picks any color on the internet into an html web color for you to use. http://www.iconico.com/colorpic/
I will be showing how to measure the distance in pixels between two divs, and how to know the exact width and height of anything on your screen using 'MeasureIt'.
Code link - http://www.fileden.com/files/2008/6/12/1956714/1divblueblack.txt