View Full Version : Help With Div Layers

03-12-2010, 07:28 PM

A friend of mine has an issue and I was wondering if there was a fairly simple way of correcting it.

She is building a website for a course she is doing, she is doing this by making the whole page in photoshop as 1 image, adding it to dreamweaver and using hotspots for the link. The image is not in a div layer or anything like that, it is just sitting by itself with <centeR></center> tags giving it a fluid center attribute.

The problem she is having is that she has a flash animation that needs to be placed in a very specific part of the image, she tried adding the animation to a div layer and placing it where she needed it, but the div layer had a life of its own and did not stay in the position wanted, and also obviously, while the centered image stays centered when the window is resized the animation does not, and is lost off screen.

Is there anything (as simple as possible) she could do to correct this?

I came up with a few ideas of how to sot it but neither worked, but maybe there was a simple reason why not.

My first idea was -

Add the image (the one of the page) to a div layer, center the div, insert a table in to the div overlaying the image, then she could move the rows and columns to create a cell in the right place to add the flash animation.

This didnt work because it seems like I cant lay a table over the image, only positioned above or below it.

After this I thought I could have the image centered by itself, then add a separate centered div (With a table, the size of the image inserted) over the top of the image, but like the first issue, it seems like i cannot overlay it, only have it positioned above or below.

Can anyone help me with this problem?

d a v e
03-12-2010, 08:10 PM
what kind of course is teaching this kind of outdated method of web design?

it needs slicing up and exporting as individual images and laying out with the document flow with parts of the site inserted as images and the rest as real text (on background images if necessary).

if this all sounds alien to your and your friend then you need to ask yourselves whether this sort of course is worthwhile if they aren't teaching modern good practice.

03-12-2010, 08:21 PM
Well, its a course that covers a wide range of digital media avenues, for instance in the time of the course I have studied 3D animation, 2D animation, digital image manipulation, and web design. Web design is only one section and in it we are generally left to our own devices to make the website as we see fit. We have been taught how to make websites in flash, as well as in the method you have mentioned, but for some reason my friend decided to make it this way (despite me telling her it would probably cause alot of problems)

With the deadline approaching very fast I feel it is far too late to change the website substantially, everything works perfectly on the site, and considering the constraints she placed on herself it looks quite good, but this flash problem is the main thing stopping her from completing it.

So past completely remaking her site (which seems like an impossible task at this point) is there ANYTHING she can do to get around this issue?

03-13-2010, 12:17 AM
its a bad way but make a relative 'content' div to include your content add your table (cant believe i said that) then if you want to overlay something make a absolute positioned div rather than centre though which will make it fluid depending on screen size maybe .
frankly though the course is very questionable for web design if it is promoting these methods.

03-13-2010, 01:44 AM
Thanks for your assistance,

I completely agree with you, each of our other paths (3D, 2D etc) have all been taught by lecturers with atleast educational (Masters level qualification) and largely professional experience. However I feel the web design portion bore the brunt of not having a qualified lecturer teaching it, he has taught us the technical do's, but hasn't taught us the don'ts.

Unfortunately had he merely told us things we couldnt do, alot of people would have largely ignored him, as his teaching methods have garnered little respect, which makes me feel he should have made it a criteria of the assignment that we do not use photoshop in the way that my friend has. Sadly, it is too late to change anything now.

I have experience with designing web sites, but unfortunately my coding knowledge is only at an intermediate level if that, would it be possible to get step by step info of what I should do to achieve what you have said?

This is the content -

800x727 image (our lecturer asked us to make our sites for an 800x600 resolution, despite the fact that I do not know anyone who uses anywhere near that anymore, hence the width of the image)

A small flash animation, possibly 150x60

As mentioned previously, but that I will reiterate, she wants the image to be centered (and stay centered as window is resized) and obviously wants to animation to be anchored to its original position so that it moves with the image when centered and resizing.

I have also just remembered that a number of her pages use iframes to provide more space, so obviously these would have to be linked to the centered image also.

So yeah, if it would be possible for you to go in to more detail on how I could achieve what you have said I would be extremely grateful.