Measure the Layout
*** You can skip this section by going to www.neotacular.com (click on link) which will give you the exact same codes as the one below. Before going to the site you will need to upload the layout image and get a URL of the image The website allows you to create boxes with your mouse and at the end it will give you the exact same code as the one below but with different numbers***
I advise to learn the old fashion way because it can be useful in case the neotacular web goes down and it will easier for you to fix the boxes when needed.
After you are done with the Layout Tutorial you will need this code.
Save it to your computer.
This example code has random numbers.
<div align="left">
<div style="overflow: auto; position: relative; width: 200px; height: 300px; top: 125px; left: 100px; margin-right: -200px; margin-bottom: -300px;"><font size="2">TEXT FOR LAYER 1 GOES HERE</font></div>
<div style="overflow: auto; position: relative; width: 200px; height: 300px; top: 125px; left: 100px; margin-right: -200px; margin-bottom: -300px;"><font size="2">TEXT FOR LAYER 2 GOES HERE</font></div>
<div style="overflow: auto; position: relative; width: 200px; height: 300px; top: 125px; left: 100px; margin-right: -200px; margin-bottom: -300px;"><font size="2">TEXT FOR LAYER 3 GOES HERE</font></div>
<div style="overflow: auto; position: relative; width: 200px; height: 300px; top: 125px; left: 100px; margin-right: -200px; margin-bottom: -300px;"><font size="2">TEXT FOR LAYER 4 GOES HERE</font></div>
<img src="Paste Link Here" alt=""></div>
This will always go at the top:
<div align="left">
This will always be at the bottom with your image(background) Direct link:
<img src="Paste Link Here" alt=""></div>
This code has 4 scroll boxes but you can add a box or take away a box by removing or adding this section.
<div style="overflow: auto; position: relative; width: 200px; height: 300px; top: 125px; left: 100px; margin-right: -200px; margin-bottom: -300px;"><font size="2">TEXT FOR LAYER 0 GOES HERE</font></div>
Replace the layer "0" with the number of the box.
As you can see margin right and margin bottom are negative numbers.
Width = Margin right
Height = Margin bottom
Those numbers will be the same but the Margins will be negative.
Example : width: 125px , margin-right:-125px
height: 140px, margin-bottom: -140px
I advise to learn the old fashion way because it can be useful in case the neotacular web goes down and it will easier for you to fix the boxes when needed.
After you are done with the Layout Tutorial you will need this code.
Save it to your computer.
This example code has random numbers.
<div align="left">
<div style="overflow: auto; position: relative; width: 200px; height: 300px; top: 125px; left: 100px; margin-right: -200px; margin-bottom: -300px;"><font size="2">TEXT FOR LAYER 1 GOES HERE</font></div>
<div style="overflow: auto; position: relative; width: 200px; height: 300px; top: 125px; left: 100px; margin-right: -200px; margin-bottom: -300px;"><font size="2">TEXT FOR LAYER 2 GOES HERE</font></div>
<div style="overflow: auto; position: relative; width: 200px; height: 300px; top: 125px; left: 100px; margin-right: -200px; margin-bottom: -300px;"><font size="2">TEXT FOR LAYER 3 GOES HERE</font></div>
<div style="overflow: auto; position: relative; width: 200px; height: 300px; top: 125px; left: 100px; margin-right: -200px; margin-bottom: -300px;"><font size="2">TEXT FOR LAYER 4 GOES HERE</font></div>
<img src="Paste Link Here" alt=""></div>
This will always go at the top:
<div align="left">
This will always be at the bottom with your image(background) Direct link:
<img src="Paste Link Here" alt=""></div>
This code has 4 scroll boxes but you can add a box or take away a box by removing or adding this section.
<div style="overflow: auto; position: relative; width: 200px; height: 300px; top: 125px; left: 100px; margin-right: -200px; margin-bottom: -300px;"><font size="2">TEXT FOR LAYER 0 GOES HERE</font></div>
Replace the layer "0" with the number of the box.
As you can see margin right and margin bottom are negative numbers.
Width = Margin right
Height = Margin bottom
Those numbers will be the same but the Margins will be negative.
Example : width: 125px , margin-right:-125px
height: 140px, margin-bottom: -140px
***Now we will learn to create our own code using the layout image we previously made from the Layout Tutorial***
Step 1
Step 3
Step 5
Step 7
|
Step 2
Step 4
Step 6
When you are done measuring the boxes and replacing the numbers from the example code. Go to the
Paste the Layout tab |
