PDA

View Full Version : Floating AP Div - Need it to move with browser resize.


AnnaGirl2010
02-06-2010, 05:08 AM
I have GREAT success in Dw-CS3 thus far - although I don'y fully understand everything I have blended HTML tables with CSS and feel good about the results!

One issue though is on my contact page I have contact form table nested in a AP DIV - everything looks good until I resize my browser (ANY browser. Firefox, Opera, Safari).

Now I understand that AP Div rely on absolute positioning - that's cool, but if you see my attached examples I need to find a way to anchor it so it doesn't allow my background and other elements to shift away from it on a browser resize.

I've even tried a regular DIV tag but that felt more restrictive and forced my contact form up into the left hand portion of the container. When I started to add padding it pushed my neighboring HTML tables out creating ugly gaps.

Any help would be most welcome! I can provide my code too as I work in spilt mode and really try and keep an eye on it.

Anna -
Screen shot:

http://tiny.cc/KFpOm

http://i95.photobucket.com/albums/l126/ornatehoodmusic/Screenshot2010-02-05at113813PM.png

can post code too!

Corrosive
02-06-2010, 06:38 AM
Hi Anna and welcome to the forum. Here's how it works; and apdiv will reference its position from the top left hand corner of the browser unless you put it inside a relatively positioned div, in which case it will reference it's position from the top left hand corner of that div. Placing it as a child of a relatively positioned parent is probably what you are wanting to do. If you are using a container or wrapper div then make that relative.

This sentence worries me; I've even tried a regular DIV tag but that felt more restrictive and forced my contact form up into the left hand portion of the container. When I started to add padding it pushed my neighboring HTML tables out creating ugly gaps. because website page structures should be built with relative or naturally positioned div tags, no question.

AnnaGirl2010
02-06-2010, 06:49 AM
thank you sweetie!

and yes, I'm still so new to DIV's that I think I like the AP DIV's better for now - I just don't see how everything works together - graphics design and page layout I understand - even HTML tables - but CSS and these darn boxes!

I wish there was an interactive wire frame tutorial, you know for us visual learners - I'd love to see that, shows how the boxes and their options react to each other within a layout.

AnnaGirl2010
02-06-2010, 06:55 AM
ok - here's my wrapper / layout

http://i95.photobucket.com/albums/l126/ornatehoodmusic/Screenshot2010-02-06at25141AM.png

all set to relative - how do I make my AP DIV a child of that - by not creating a new style sheet? Let's say I've just drew my AP DIV on the layout.

What are the steps after that?


and THANKS! XO

Corrosive
02-06-2010, 07:01 AM
OK, because you have set the width to 100% you may as well have out the apdiv in the body tag. What is the width of your layout? In fact, could you put this online somewhere and I'll talk you through it?

AnnaGirl2010
02-06-2010, 07:10 AM
PM - 8) with details.

Corrosive
02-06-2010, 07:24 AM
OK, check your mail :)

AnnaGirl2010
02-06-2010, 07:38 AM
wrote u back from my work email!
:-D

fairwindschance
03-30-2010, 09:33 PM
Hey - I'm having a similar problem --- please --- what's the solution?

edbr
03-31-2010, 02:13 AM
Hey - I'm having a similar problem --- please --- what's the solution?

in general terms if you have a pelative ositioned div and inside that you have positive positioned items in that div, you will alwayys have them position in relation to the parent, relative div

the relative div will then position when floated in the flow of your design

Ricky55
04-01-2010, 06:40 PM
That totally correct Ed, you have to set a positioning context. Anna I'd just try to code these by hand, using the DW dialogues makes this more difficult than it actually is IMO.