unwanted apdivoverlap in nested divs

  • Noobydoo
  • Novice
  • Novice
  • Noobydoo
  • Posts: 16

Post 3+ Months Ago

Hi, i'm using dreamweaver 8. I have designed a webpage using pretty much exclusively APdivs. my problem is that i would like to have divs nested inside other divs, as well as other elements like pictures or forms in a table and whatnot. but i can't seem to find how to get around having multiple such elements inside an APdiv without having them overlap and without needing to resort to treating them like text.

basically i would like to get it so that text and forms, text placed elements if you know what i mean, automatically wrap around APdivs i have nested in the layer in question. this way i could have images in APdivs and have the text wrap around them, or have an AP div and a table that would automatically place itself so as not to be hidden by that APdiv.

i noticed that if i choose inherit rather than absolute for positioning in dreamweaver they won't overlap, but then i must use float to place them, thus losing some precision, but even at that when i preview it in firefox it still overlaps.

should i not be using APdivs for this?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Okay firstly, do you know what an APdiv is, and what the difference is between an APdiv and a div? If not, here:
Quote:
You aren't choosing between 2 tags. An AP div is just a div that is Absolutely Positioned.

basically, you'll have to know what the difference is between an Absolutely positioned div and a static div. Have you got the site live anywhere so we can see what you mean ... ?
  • Noobydoo
  • Novice
  • Novice
  • Noobydoo
  • Posts: 16

Post 3+ Months Ago

yes and no. i have it live (for testing purposes), but not in such a way that you could see what i mean.

i think i just need to use a regular div? and then put properties to it none of which have anything to do with positioning?

but you're right i don't really understand what static positioned means. i know absolute, fixed (which seems useless because of explorer) and relative.

basically the effect i would like to achieve would be to just put some type of div nested in an APdiv and have any text or table that i put in the parent APdiv wrap around my nested ones, or just move to the next available space like a table should do. rather than have the elements inside the APdiv be hidden or overlapped by the nested divs i added.

i think i half figured it out by just starting a div from scratch, but i think the difficulty might end up being that i won't be able to position it where i want since it doesn't have absolute positioning property. does this mean i can only use float? or should i use static in that case?

i think i just realized that not setting the position property WAS a static div.

i think in some cases i will be able to build a static div that is positioned directly beneath a layer thus making sure content outside it won't be under the layer. and i think i will be forced to just place them in the normal flow where i want them when it comes to pictures and such. or is there a better way?

it would have been nice if when you set the z index of a nested Apdiv the same as the parent APdiv, then text inside the parent div would wrap around it. or maybe set the z-index to 0 or inherit or something that could give that effect. i guess it's just too complicated to program elements that position outside the normal flow but interact with the normal flow.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

if you can show what you want I'm sure I can figure something out for you ... I don't quite understand what you're saying, but that might just be because I am really tired and need some sleep ... will check in again tomorrow ... and like I said it would help if I could see what you meant, even if it was just with an image ...
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

This is one of my issues with Dreamweaver.. it doesn't give any real understanding of CSS positioning. It seems to lead to using divs as if they were tables, in which case you might as well just use tables.

My advice would be to read this article, then I bet you'll have a much easier time getting the divs to do what you want them to.
  • Noobydoo
  • Novice
  • Novice
  • Noobydoo
  • Posts: 16

Post 3+ Months Ago

I think i found my solution,

actually jameson, i think i had posted before about css positioning and you had referred me to that same article which was gold jerry... gold. but it didn't really speak about static divs by name and used some terminology that at the time i didn't understand like, regular flow, and boxes and stuff like that. but now i think i understand. regular flow is like text based, or positioned as regular text is, and boxes are basically plain divs or static divs. but even at that with me not understanding those parts it was still crazy helpful for understanding apdivs and relative and margins and paddings and borders and stuff, and also that other stuff all clicked once i figured out what the hell they were talking about. i guess i was just a moron and never used the div button instead of layers in dw8. but actually still now i find i prefer to make a layer (apDiv)and then switch it to static, easier to eyeball the dimensions.

the solution that i've come up with which seems to work quite well, with explorer and firefox at least, is to place static divs where i don't want text to show, i tried to put text inside them but sometimes in firefox it did weird things like overlapping text, anyways if i put static divs where i would like to place an image, and place it in regular flow, sometimes using float property, text in the regular flow will wrap around it, and then i just nest an apdiv on top of the static div i had made. this way text won't flow right under my images. and the apdivs (my images) seem to act similarly in explorer and firefox whereas placing images directly in the static divs isn't quite so consistent.

this is basically what i mean:

________________
-----------------|texttexttexttexttexttexttext
--///////////-----|texttexttexttexttexttexttext
--///////////-----|texttexttexttexttexttexttext
--///////////-----|texttexttexttexttexttexttext
--///////////-----|texttexttexttexttexttexttext
---^------------|texttexttexttexttexttexttext
---|------------|texttexttexttexttexttexttext
APdiv with image|<----- static div ]text text
in it.-----------|texttexttexttexttexttexttext
______________|texttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttext


i'm not sure if this really the correct way to use static divs, but it seems to work so far.

are there shortcomings to doing it this way?

and btw thanks alot for taking the time to look at my problem guys.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

lol.. sorry to inflict that article on you twice, then. :D As you can probably tell, it's one of my favorites.. It's what made positioning really 'click' for me. I think the article doesn't talk about static divs because that's basically not using any positioniong settings at all- static is just the default setting that makes it flow along with the page.

I'm glad to hear you're getting it figured out. It's hard to tell without seeing the code, but it sounds like you're using the divs right by floating the div to get text to wrap around it. One thing, though, is if you put an absolutely positioned div inside of it, you need to set the positioning of the floated div to 'relative'. That'll allow you to move the apdiv around inside of it.
  • Noobydoo
  • Novice
  • Novice
  • Noobydoo
  • Posts: 16

Post 3+ Months Ago

oooooooooh ya, I see what you mean about setting the floated div to relative. I wasn't doing it that way. i was just putting a static div in APdiv "parent" we'll call it. and then putting another APdiv "child" nested inside of "parent" and just positioning "child" so it was over where the static div was, so i was just leaving the static div empty.

but if i make the static div a relative one and keep top, left = 0. then i can nest an ap div inside the floated div and that seems to be much more compatible positioning wise between firefox and explorer at least.

nice!

thx.

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 36 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.