casual card games from 'up with a bang'
del.icio.us icon

Online Layout Tool

Impatient? then just jump down and use the tool now

This tool will code <div> tags so that the result will look identical between MS Internet Explorer and FireFox (and other standards compliant browsers). It does not use "hacks". It chooses its use of certain CSS elements that work correctly in either environment.

When to use

This script was written as a response to the popular need to cut up a design image and represent it on a webpage. ie: design a web page in Photoshop then convert it to HTML/CSS.

What it does

After you enter the required parameters, the script will output the code you need in a new window. "View Source" and copy the code for your own purposes.

Help me debug it

If you have tried your own page in this tool and are not getting the results you expect please send me a note with the coordinates you entered. I will try to find the problem if it exists within the program.

How to Use

  1. Draw your website in your favorite drawing program
  2. Cut up your image into the boxes that you need as DIVs
  3. Write down the coordinates of each box, top/left corners, and bottom/right corners (NOT WIDTH, HEIGHT)
  4. Enter the coordinates of each box in the text area below as described
  5. If you enter a URL for a background image, it will use that too
  6. See the special note regarding embedded boxes at the bottom.

Please direct any comments or questions to our contact page.

Random colours are assigned to the background of boxes that don't have background images assigned.

There are 2 examples. Below is a simple 3 box example. Following that is the Up With A Bang front page generated by the coordinates.

Format: one div box per line. leftX,topY,rightX,bottomY,background-imageURL


Note: This script generates divs left-to-right, top-to-bottom. It floats all boxes left. All boxes must be flush with other boxes - ie: no spaces between boxes. It is necessary to group vertically stack boxes inside a containing box for correct layouts. For example, in the table below the 2 stacked boxes should be defined within a containing box

  
 
  • 0,0,39,59 (left box)
  • 40,0,69,59 (right containing box)
  • 40,0,69,29 (top right box)
  • 40,30,69,59 (bottom right box)

Up With A Bang front page



Source Code