Solved

Layers - how to line up correctly?

Posted on 2004-09-29
9
240 Views
Last Modified: 2010-04-25
I have a template which I needed to edit a lot.  The main table built into the css had 2 columns.  I created a layer to span the two columns so I could have a wider area of text.  I also wanted to add some menu titles on top of a bg image.

I cannot get my layers to line up.  If they line up in DW, they don't in IE and vice versa.  How can I make my layers line up - and work across any screen resolution?
0
Comment
Question by:rjmiller15
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 10

Expert Comment

by:rockmansattic
ID: 12181408
layers and tables are not compatable like this.
you can put a table inside a layer (think of it like a transparency for overhead projectors)
but cannot (tmk) put a layer inside a table.  

But you can always line up layers using absolute positioning.

<div id="Layer1" style="position:absolute; left:115px; top:97px; width:267px; height:84px; z-index:1"></div>


do you have an online example?
Rockman
0
 
LVL 3

Author Comment

by:rjmiller15
ID: 12181629
http://www.thelifefocuscenter.com/index.htm

I used absolute positioning and it didn't work -
0
 
LVL 10

Expert Comment

by:rockmansattic
ID: 12181693
Sorry, reread you question:
" If they line up in DW, they don't in IE and vice versa"
so you want to them to look the same for you.!

DW is simply a tool for such things, it is not perfect for lining up itmes (by visual ques)  They may not look the same beacuse of several reasons, one could be becasue of invisable scripting   >>view>>visual aids   may be turned on, and there for shifting things.  The main thing is that they line up in a browser.

Rockman
0
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 3

Author Comment

by:rjmiller15
ID: 12182013
In other words I will line up the div (layer) in DW and when I check it in Internet Explorer - it's all out of whack.  I adjust it in DW and check IE and it's all out of whack there.

It I get it lining up in the browser - other screen resolutions make it all messed up.
0
 
LVL 10

Expert Comment

by:rockmansattic
ID: 12184375
First off , cross browser is always going to be an issue.  Maby not to this extent, but that is one thing we always are considering.  What I ment in my post is that you cant completly rely on DW to adjust layers and pixles.  Making a site cross browser can be a  slightly different issue.

just an idea (if Im seeing this correct)

change
<div id="Layer4" style="position:absolute; left:131px; top:548px; width:252px; height:130px; z-index:4">
                                  <div class="style5" style="padding-left:20px "> 

to

<div id="Layer4" class="style5" style="position:absolute; left:131px; top:548px; width:252px; height:130px; z-index:4">
                             
close to line 122

is that where your issue is?

0
 
LVL 19

Expert Comment

by:webwoman
ID: 12199829
You're thinking that DW is a WYSIWYG tool. It's not. It's a WYSISWYG, or WYSINWYG -- sometimes you get what you see in DW, most times you don't.

For that reason, using layers the way you are isn't the way to go about this. If you need to span 2 columns of a table, that's what colspan is for. If you want to add a title to an image, it probably shouldn't be a background. That implies you're putting something else (probably text) on top of it, which often means it isn't readable. If you want to add a copyright line, you can do that directly on the image, or add another cell under that one and put it there, very small.

You don't need layers for any of that.  
0
 
LVL 5

Accepted Solution

by:
bitter_chicken earned 250 total points
ID: 12206041
Hey hey

I understand your problem - dont despair. This can be acheived with layers. The real problem is that your table is centred, so the layers cant be absolute - they have to move relative to the table.

Method 1 (not preferrable): Place the DIV tag INSIDE the table, preferrably near the top.
This will cause the layer to be positioned relative to the TABLE. The problem with this is that in Dreamweaver it will be positioned relative to the top left of the screen rather than the top left of the table, which is what happens in a web browser, making it hard to position.

Method 2 (preferrable): This is probably the best way to get a layer centered on the screen.
Make sure the layer is OUTSIDE of the table this time (as it already is i believe)
Now, set the layer properties as follows:
<div id="Layer4" class="style5" style="position:absolute; left:50%; top:548px; width:252px; height:130px; margin-left:XXXpx; z-index:4">
The key components are the left, and margin-left components.
The left peroperty is set to 50%. This is valid CSS, and positions the left-hand edge of the layer in the centre of the screen, no matter what resolution. Now replace XXX with a NEGATIVE number. This will shift the layer to the left. Just make it line up with where you want it.
This will look right in Dreamweaver and IE. THe problem is positioning within dreamweaver. If you try "dragging" the layer within dreamweaver, it will change the percentage value to a pixel value, and your layer will not be centered anymore. So you will have to select the layer, and adjust the margin-left property manually until it is positioned perfectly.

bc :-)

0
 
LVL 3

Author Comment

by:rjmiller15
ID: 12245305
Bitter Chicken's answer is by FAR the BEST answer I have ever received from EE.  Thanks so much to you!!!!

0
 
LVL 5

Expert Comment

by:bitter_chicken
ID: 12247182
wow i'm ego tripping

^ ^ click that little feedback link ^ ^

that way i can forever be reminded how damn good i am

bc ;-)
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question