Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can one use the left, and top, properties in relation to a specific cell?

    I do not know if i had posted this already, but i was wondering if the left, and top, properties worked in relation to anything else other than the body element? To be specific, can i use it in order to co-ordinate a blocks location within the region of a Table cell?
    LovesWar

  • #2
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Well, if you give the element a position:relative definition, its left and top properties would be relative to the container element, which is the table cell assuming there's no other wrapping elements surrounding it (ie: a <p>).
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #3
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    from WA:

    Well, if you give the element a position:relative definition, its left and top properties would be relative to the container element, which is the table cell assuming there's no other wrapping elements surrounding it (ie: a <p>).
    And if there are other elements surrounding the object of discussion, what then?

    I asked, because well, i see the left, and top, properties as being good only if you are basically working with a relatively small area of the screen, so it wouldnt be hard to more or less position blocks, or what i think of as layers. However, suppose you are working on a toturial, and it dawns on you that you want to have a Table like set up somewhere on your page, that is like 40 paragraphs down. What then? Do i continue to always use the left, and top, properties in order to control location, or positioning of a block?

    I have in mind a 4 cell-like table arrangement, without any actual tables, but i dont know CSS well enough to know how to pull that off effectively. My first inclination is to do it the hard way, and that is to literally use the left, and top properties. However, since one can throw a div tag between a set of paragraphs, the block will be located exactly where the div tags are. This takes care of a single div tag between 2 paragraphs.

    But what if i want to have a table-like arrangement, between 2 paragraphs, regardless of where those 2 paragraphs are? Am i to do a div with-in a div, and the what not? And once, i have my main div, and its litter of sub-divs, am i to basically reference a specific CSS definition for each div? If so, does that mean i will be using the left, and top, properties, in order for me to co-ordinate their relationships geographically speaking? How am i actually controlling their relationships?

    Do you follow what i am asking? If not, here's an example:
    Attached Thumbnails Attached Thumbnails Can one use the left, and top, properties in relation to a specific cell?-chart.gif  
    LovesWar

  • #4
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Quote Originally Posted by SpiritualStorms
    And if there are other elements surrounding the object of discussion, what then?
    Hmmm then things get more tricky. It's been a while since I've had to tackle this issue, but I would gather a loop that adds up all the x and y offsets of each element along the hierarchy would be needed until it hits the table cell in question. The sum would then correctly reflect the x/y offset of the element in question relative to the table cell.

    I'm not exactly sure I understand what you're trying to accomplish exactly though. The image didn't really help explain things for me.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #5
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    from WA:

    I'm not exactly sure I understand what you're trying to accomplish exactly though. The image didn't really help explain things for me.
    Let me see, if i can simplify. I want to imitate what a table is able to do, but i do not want to do it with an actual table. I want 4 blocks: 2 for a header, and 2 for content. I want to achieve this arrangement, but not necessarily with an actual table. I already have a table, and i dont want to get into the habbit of nesting tables with-in tables. At any rate, i need a 4 block arrangement using CSS a lone. Is it at all possible?
    LovesWar

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Why?

    Your question has been answered: yes, you can relate absolutely positioned blocks to their parent element by giving the parent a "position: relative".

    I'm only wondering why you would want to use absolute positioning anyway; why is simply inserting this table-like content in whatever appropriate markup you'd choose in between the mentioned paragraphs a problem?

    A look at the actual markup might help.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    from ronold:

    Your question has been answered: yes, you can relate absolutely positioned blocks to their parent element by giving the parent a "position: relative".

    I'm only wondering why you would want to use absolute positioning anyway; why is simply inserting this table-like content in whatever appropriate markup you'd choose in between the mentioned paragraphs a problem?

    A look at the actual markup might help.
    OK, i know about relating blocks in relation to the body tag. My thing was about whether or not there was another way. You see, i can do something like this,

    Code:
    <p>
    ......................."paragraph content"................................
    </p>
    
    <div class="definitionName">
    .........."i want to format this div so as to show 4 individual blocks"..........
    </div>
    
    <p>
    ......................."paragraph content"................................
    </p>
    and have the div tag pretty much be where it's at in the markup. To this end, i dont have a problem with CSS. The problem is in creating 4 div cells that are located where i want them to, without having to use the left, and top properties necessarily, just like one can create a single div tag with-out having to use any left, and top, properties. That's my problem. And the reason its a problem is, that i dont always know what the exact co-ordinates are for when the location goes past the visual part of the screen, you know for when i have to really, really, really scroll down.

    I am getting the impression there's no way around the left, and top, properties, which is what i was afraid of.
    LovesWar

  • #8
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No? Yes? Anyone care? Is there no way of doing so? Am i to assume that the top, and left, properties are limited?
    LovesWar

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Set the partent object to position: relative;, then in your child element set position: absolute; left:; top:;, and the coords will be relative to the parent.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •