Overlapping Divisions with CSS

Discussion in 'HTML' started by Dennis Marks, May 12, 2004.

  1. Dennis Marks

    Dennis Marks Guest

    I have a page that has a division with three buttons. Immediately below
    it are three divisions that occupy the same positions. Two are hidden
    and one is visible. They are switched between with the buttons. This
    all works fine.

    My question is. I am using "left: 0px; top: 45px;" on all 3 to put them
    in the same positions. The problem is that if the page is made narrower
    the buttons occupy move space making it's division taller which
    overlaps the 3 divisions. It there a way to make the 3 divisions move
    up and down with the size of the button division.

    If I leave out "top" they do not overlap.

    You can see the page at my site. Just select Amtrak Train Routes.

    --
    Dennis Marks
    http://www.dcs-chico.com/~denmarks/
    To reply change none to dcsi.


    -----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
    http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
    -----== Over 100,000 Newsgroups - 19 Different Servers! =-----
     
    Dennis Marks, May 12, 2004
    #1
    1. Advertising

  2. On Wed, 12 May 2004 15:48:15 -0700, Dennis Marks <> wrote:

    > You can see the page at my site. Just select Amtrak Train Routes.


    I can't find the page in question? And I'm not sure what the question is.
    :)

    --
    Using M2, Opera's revolutionary e-mail client: http://www.opera.com/m2/
     
    Foofy (formerly known as Spaghetti), May 13, 2004
    #2
    1. Advertising

  3. Dennis Marks

    Richard Guest

    "Dennis Marks" <> wrote in message
    news:120520041548150365%...
    > I have a page that has a division with three buttons. Immediately below
    > it are three divisions that occupy the same positions. Two are hidden
    > and one is visible. They are switched between with the buttons. This
    > all works fine.
    >
    > My question is. I am using "left: 0px; top: 45px;" on all 3 to put them
    > in the same positions. The problem is that if the page is made narrower
    > the buttons occupy move space making it's division taller which
    > overlaps the 3 divisions. It there a way to make the 3 divisions move
    > up and down with the size of the button division.
    >
    > If I leave out "top" they do not overlap.
    >
    > You can see the page at my site. Just select Amtrak Train Routes.
    >


    Learn how to apply z-index.
    Multiple divisions occupy the same physical space.
    Instead of opening a new page for a small change, z-index allows the swap to
    be made on the same page.
    Somewhat similar to an image swap.
     
    Richard, May 13, 2004
    #3
  4. Dennis Marks

    Dennis Marks Guest

    In article <>, Richard <Anonymous@127.001>
    wrote:

    > "Dennis Marks" <> wrote in message
    > news:120520041548150365%...
    > > I have a page that has a division with three buttons. Immediately below
    > > it are three divisions that occupy the same positions. Two are hidden
    > > and one is visible. They are switched between with the buttons. This
    > > all works fine.
    > >
    > > My question is. I am using "left: 0px; top: 45px;" on all 3 to put them
    > > in the same positions. The problem is that if the page is made narrower
    > > the buttons occupy move space making it's division taller which
    > > overlaps the 3 divisions. It there a way to make the 3 divisions move
    > > up and down with the size of the button division.
    > >
    > > If I leave out "top" they do not overlap.
    > >
    > > You can see the page at my site. Just select Amtrak Train Routes.
    > >

    >
    > Learn how to apply z-index.
    > Multiple divisions occupy the same physical space.
    > Instead of opening a new page for a small change, z-index allows the swap to
    > be made on the same page.
    > Somewhat similar to an image swap.
    >
    >

    As I have said the division swap works. What I want to know is if there
    is a way to have multiple divisions occupying the same space without
    using an absolute position with left and top (which is what I do). I
    would like all three divisions to move as a unit when divisions above
    push them down.

    --
    Dennis Marks
    http://www.dcs-chico.com/~denmarks/
    To reply change none to dcsi.


    -----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
    http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
    -----== Over 100,000 Newsgroups - 19 Different Servers! =-----
     
    Dennis Marks, May 13, 2004
    #4
  5. Dennis Marks

    Mitja Guest

    Dennis Marks <>
    (news:130520040651411568%) wrote:
    > In article <>, Richard
    > <Anonymous@127.001> wrote:
    >
    >> "Dennis Marks" <> wrote in message
    >> news:120520041548150365%...
    >>> I have a page that has a division with three buttons. Immediately
    >>> below it are three divisions that occupy the same positions. Two
    >>> are hidden and one is visible. They are switched between with the
    >>> buttons. This all works fine.
    >>>
    >>> My question is. I am using "left: 0px; top: 45px;" on all 3 to put
    >>> them in the same positions. The problem is that if the page is made
    >>> narrower the buttons occupy move space making it's division taller
    >>> which overlaps the 3 divisions. It there a way to make the 3
    >>> divisions move up and down with the size of the button division.
    >>>
    >>> If I leave out "top" they do not overlap.
    >>>
    >>> You can see the page at my site. Just select Amtrak Train Routes.
    >>>

    >>
    >> Learn how to apply z-index.
    >> Multiple divisions occupy the same physical space.
    >> Instead of opening a new page for a small change, z-index allows the
    >> swap to be made on the same page.
    >> Somewhat similar to an image swap.
    >>
    >>

    > As I have said the division swap works. What I want to know is if
    > there is a way to have multiple divisions occupying the same space
    > without using an absolute position with left and top (which is what I
    > do). I would like all three divisions to move as a unit when
    > divisions above push them down.


    Not that I know.
    Try doing it like this: the DIV to be displayed has display:block set, the
    other two display:none. This way, they won't be even hidden - they simply
    won't be there, neither to see, nor to take up space.
     
    Mitja, May 13, 2004
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. time waster
    Replies:
    5
    Views:
    804
    informant
    Nov 17, 2003
  2. Dennis M. Marks

    Positioning Divisions with CSS

    Dennis M. Marks, Dec 10, 2003, in forum: HTML
    Replies:
    1
    Views:
    589
    Terry Joyce
    Dec 10, 2003
  3. Richard
    Replies:
    3
    Views:
    416
    Richard
    Jan 10, 2004
  4. Richard
    Replies:
    5
    Views:
    492
    rblah
    Jan 17, 2004
  5. Richard
    Replies:
    1
    Views:
    387
Loading...

Share This Page