PDA

View Full Version : How do I keep layers on topf of tables centered?


Dixie Chamberlain
02-13-2009, 03:21 PM
I centered my layout so that my web site will appear centered on every resolution screen. I put my page together using AP divs and converting them to tables and centering them that way. But I want to add some flash files on top of my images (for an awesome effect :mrgreen: ) but when I preview my web site, the swf files are scattered and way off where I want them to be.

How do I put these swf files on top of my tables so that they'll stay where I put them? I've been puttiing the swf files in separate AP divs on top of my tables.

Help!!!!

Corrosive
02-13-2009, 03:55 PM
I centered my layout so that my web site will appear centered on every resolution screen. I put my page together using AP divs and converting them to tables and centering them that way. But I want to add some flash files on top of my images (for an awesome effect :mrgreen: ) but when I preview my web site, the swf files are scattered and way off where I want them to be.

How do I put these swf files on top of my tables so that they'll stay where I put them? I've been puttiing the swf files in separate AP divs on top of my tables.

Help!!!!

Hi Dixie

Not sure why you have built your site this way but, as a suggestion, have you tried adjusting the 'Z-index' of your APdivs at all? Might work. Otherwise post a URL and we can take a look.

domedia
02-13-2009, 04:07 PM
I cannot believe that DW still has the option to convert 'layers' to 'tables'.

Ricky55
02-13-2009, 04:21 PM
I agree they should strip out all the rubbish like this, even the ability to just draw out layers, it encourages bad practise to new comers.

Corrosive
02-13-2009, 05:13 PM
I cannot believe that DW still has the option to convert 'layers' to 'tables'.

Yes, it's the 'send my design back to the darkages' button. It's got a caveman on it.

Dixie Chamberlain
02-14-2009, 06:06 AM
Well, the reason why I converted my ap divs to layers is to ensure that my web layout will always be centered in any monitor resolution. Is there a way to do that without converting my AP divs to tables?

edbr
02-14-2009, 06:41 AM
yes the usual way would be to make your divs position relative. give a width and use margins auto. you can make a dive and change its properties in the css panel . using the DW wizadry as you see from the comments is a bit weird, that that is still an option in DW it frankly is better to stay away from tables in general.

edbr
02-14-2009, 06:43 AM
if you want an example different style links examples (http://www.dreamweaverclub.com/forum/showthread.php?t=28749) is a basic centred page in a 'wrapper division'

Dixie Chamberlain
02-14-2009, 07:08 AM
OK, well, if someone knows how to add an AP div on top of centered tables and how to keep the ap div where I want it in any monitor resolution, that's really what i'm interested in.

I changed the z index of the ap div, but that will only work if the page isn't centered (and aligned all the way to the left).

Cary
02-14-2009, 07:25 AM
It can be done, but we need to be able to see your page. Do you have a test url we can look at?

Dixie Chamberlain
02-14-2009, 08:29 AM
OK, here's a test page.

Notice that the flash swf file is where the anime characters are. But in dreamweaver, the file is located directly in the middle of the two yellow and black striped bars, which is where I want them to be. So how do I get that to stay between those two bars in every resolution?

http://ultramegamanx.freezoka.com/Main.html

Dixie Chamberlain
02-14-2009, 02:28 PM
It seems that the link I gave isn't working

Dixie Chamberlain
02-14-2009, 03:38 PM
OK, this should work

ultramegamanx.uuuq.com

Notice that the flash swf file is where the anime characters are. But in dreamweaver, the file is located directly in the middle of the two yellow and black striped bars, which is where I want them to be. So how do I get that to stay between those two bars in every resolution?

Cary
02-14-2009, 05:34 PM
You'll need to add this style rule to your embedded styling:

#wrapper {
width:1072px; /* the width of your table */
margin:0 auto;
position:relative; /* so the absolutely positioned flash moves with the table */
}

Add this opening div tag just after the opening body tag and before div#apDiv31:

<div id="wrapper">

Add the closing div after the script at the end of the page, just before the closing body tag.

Now you can adjust the position of the flash, and it will stay put.


Here's an article on centering content using CSS:
http://www.dreamweaverclub.com/css-center-content.php

Dixie Chamberlain
02-15-2009, 04:26 AM
You'll need to add this style rule to your embedded styling:

#wrapper {
width:1072px; /* the width of your table */
margin:0 auto;
position:relative; /* so the absolutely positioned flash moves with the table */
}

Add this opening div tag just after the opening body tag and before div#apDiv31:

<div id="wrapper">

Add the closing div after the script at the end of the page, just before the closing body tag.

Now you can adjust the position of the flash, and it will stay put.


Here's an article on centering content using CSS:
http://www.dreamweaverclub.com/css-center-content.php
I'd like to get you a beer. Thank you so much for the help and dropping that link for css.

Cary
02-15-2009, 04:36 AM
No problem. :)

Cary
02-15-2009, 09:06 PM
I took a look at your updated page. <div id="wrapper"> can only be used once on the page because it's an ID and it has a unique pupose. So you should have

<body ...>
<div id="wrapper">

and

</div><!-- end of #wrapper -->
</body>

Dixie Chamberlain
02-16-2009, 06:37 PM
Thanks for the update Cary.. I'm learning this stuff really fast.