static ap divs and sliced pages in dreamweaver

[woody382]

I designed my webpage in photoshop and sliced it for web ready to use on dreamweaver. The page looks fine on dreamweaver and also in a test browser. I then need to add Ap Divs so that i can place table, images and titles where i want them on the page.

When i absolute position the ap divs in dreamweaver it looks great and also in the browser, but if i change the size of the page in the browser the alignment changes for the ap divs, so they seem to move around depending on the size of the page. I therefore figured out that I need to use static ap divs and use the margins elements to place the ap divs. On testing it worked fine.

HERE'S THE PROBLEM:

If i place a static Ap Div over a sliced page in dreamweaver it places the Ap Div inbetween the slices instead of over the the page. From closer investigation the margins of the Ap div pushes the slices apart to fit in position.

Is there anyway i can place static Ap divs on a sliced page, which in affect using the margins, but doesn't affect the slices.

i hope you can help with this problem.

cheers

[Xapti]

Well first of all, I wouldn't recommend designing a page where you just have a sliced up image consisting of most of the page, but that's not my decision.

Secondly, before I continue, I kind of need to know what an Ap Div is. A wild guess is Absolutely Positioned div, but I have no clue why you did the strange capitalization each time, as if it was a name.

If Ap Div means absolutely positioned, what do you mean by static absolutely positioned?

If you are doing absolute-type positioning I could see 2 (or 4) potential things you're doing:
1. position absolute in fixed units (px, em, etc.), which is slightly different, but similar to position:fixed with fixed units.
2. position absolute with relative units (percentage), whereby it's positioning stuff based off the width of the window (or really containing block). Same goes with position:fixed.

As long as you were using the percentage method (and don't ask me why you were, it makes no sense to me), the answer would be to switch to fixed units, or even to just add a containing block around your page, assuming your page is fixed width (which I assume it is considering the images).
Establishing containing block is essentially as simple as putting in <div style="position:relative; width:desired width of page">insert page content here</div>

[woody382]

Thanks for your reply, it was a great help. From reading and looking at online lessons, I designed my page in photoshop ie, background colours and navigation bar for rollovers. I then sliced the page which enabled me to use it in dreamweaver.

What do you suggest is the best way to design a web page, as i though the photoshop method was one of the best ways.

cheers

[Xapti]

Well what you want to start out with is a layout concept when designing a page.
You can make this concept layout on paper, in photoshop, something like dreamweaver, or just in your mind (if you're the only person who needs to see it, which is very unlikely).
The difference between having the concept in photoshop and using it as a reference, and just slicing up the photoshop image is quite substantial.
With scratch coding based off a layout, you ensure you get a clean, low-maintenance, hassle-free design which can be resized easily, have colors changed, and other stuff. The useful traits of using divs for holding content is that they can easily be moved around and resized, as well as having dynamic widths... either widths based off ems, or relative widths (percentage). They can also take up much less markup space or less file size compared to tables or images. They are the internet standard for containing and displaying general content.
Using images aren't not great for accessibility, although you can introduce alt descriptions for things which contain text, and most screenreader sare probably quite smart. Possibly the biggest problem using too many image slices is ensuring that content flows in the ideal fashion for screen readers or CSS-less browsers... this is a particular problem if you use absolute/fixed positioning (but generally easy to fix)