View Full Version : Dreamweaver Layers Problem...

06-11-2007, 03:21 PM
Well, I've aligned the layers correctly in DW, but it comes up differently in FF:

(how it appears in Dreamweaver)

(in FF)

06-11-2007, 06:03 PM
Post up the code.

Did you move the boxes around within dreamweaver? or did you input the values of where they are supposed to be?

I wont be able to give a quick response as I have a lot of revision to get done, so I'm sure someone else will be able to help you.

06-11-2007, 06:37 PM
Erm ok, I moved the boxes around within Dreamweaver.

06-11-2007, 06:48 PM
So either move them back up or show us something we can look at to determine what you've done ;-)

06-11-2007, 06:51 PM
Moving it up will just cover up the problem, I won't to get rid of it... (somehow)

06-11-2007, 07:58 PM
Please post your code so we can better help you.

06-11-2007, 08:18 PM
<div id="Layer30">
<div align="center"><span class="style7"><img src="topps3/pic2.png" width="200" height="150" onClick="MM_openBrWindow('topps3/pic2big.png','pic2','toolbar=yes')"><span class="style10">Leo</span></span></div>
<div id="Layer31">
<p align="center"><img src="topps3/pic1.png" width="200" height="150" onClick="MM_openBrWindow('topps3/pic1big.png','','toolbar=yes')"><br>
<strong><span class="style11">pic1</span></strong></p>

06-11-2007, 08:23 PM
Can you post the css as well please.

06-11-2007, 08:51 PM
Whats CSS?

06-11-2007, 09:02 PM
You have used CSS right, that is why you have named the divs?

<div id="Layer30">

Looking at your code and looking back at your first post you have definitely used CSS, otherwise I don't see how you could have made the two shapes in your original post look like that.

At the top of your code, in between the <head> and </head> tags should be another tag saying <style> and ending in </style. Post that code.

If there is none of these tags you may have it saved as an external file, in which case you will have something similar to this in between your head tags.

<link href="external.css" rel="stylesheet" type="text/css" />

Which ever one you have, post the code from them.

06-11-2007, 09:09 PM
I think you guys are misunderstanding me. Yes, I'm using Dreamweaver's Design function edit my website. But for some reason an error has occurred as stated in the first post.

06-11-2007, 09:10 PM
Ok, one side is obviously getting confused.
So that we can work out who it is that is confused, could you please post all the code?



06-11-2007, 10:22 PM
Right, I know you haven't replied to my post yet but I'm going to post what my reply would have been.

If you had posted your code like asked we could have got this sorted out sooner.

In order to create what you posted in the first post, I personally believe you should learn CSS and how to use DIV tags. Even if your not going to create what you created in the first post, I still recommend you learn CSS.

The following is a bit of CSS I quickly knocked up. Forget about what you need help with for a second.

In Dreamweaver open up a new CSS page. Copy and paste the following code into the document and save this as 'external.css'

#redbox { /*Ok, this is a CSS rule, as you can see we start the rule of with a '#' symbol this is so that we can add all of the properties below to an 'ID' */

background:#FF0000; /* This sets the colour we want our DIV to be. In this case it will be red, so we put the colour red code */
height:200px; /* This sets the height of our DIV, the height of this DIV will be 200px, so we put the value '200px'*/
width:200px; /* This sets the width of our DIV, the height of this DIV will be 200px, so again we put the value '200px'*/
position:absolute; /* This piece of code says how we want to position the DIV tag on the page. There are several options you can use to position your DIV tag on the page. We will just use absolute*/
top:10px; /* This piece of code says that we want the DIV tag to be position 10px from the top of the screen*/
left:10px; /*This piece of code says that we want the DIV tag to be position 10px from the left of the screen*/


#bluebox {
background:#0000FF; /* This sets the colour we want our DIV to be. In this case it will be blue, so we put the colour blue code */
top:10px; /* This piece of code says that we want the DIV tag to be positioned 10 px from the left of the screen, N.B. it is at the same distance from the top as the redbox*/
left:220px;/* This piece of code says that we want the DIV tag to be positioned 220px from the left of the screen. 'Why 220px?'. The redbox is set at 10px from the left, and the size of the redbox is 200px, thus if we want the bluebox to be shown directly next to the redbox we need to add 10px to that 200px, however in this case we also want 10px separating the two boxes, so we add a 10px spacer, which gets added to the 210px to make 220px*/

}Please take in the comments I have put next to each property.

Next, open up a new html or php file, whichever you want to use. Save this page as whatever you want.

Above the </head> tag paste the following code:

<link href="external.css" rel="stylesheet" type="text/css" />This piece of code basically includes the 'external.css' file on the page.

Next I want you to create two DIV tags. Give one the ID 'redbox' and the other the ID 'bluebox'.

Or alternatively copy and past this code in between your body tags.

<div id="redbox"></div>
<div id="bluebox"></div>Now, save the file and make sure the external.css file is saved. Press F12 to open the page up in the browser. You should now see the following.


As you can see they are now perfectly aligned next to each other.

If you have any more problems don't think twice about asking.


06-12-2007, 03:15 PM
Cool, thanks.

06-12-2007, 04:09 PM
No problem.