Absolute coords on centered image.

Discussion in 'HTML' started by simast, Sep 18, 2004.

  1. simast

    simast Guest

    Here is what i need:

    I would like to have some sort of base image that is big and i center
    it on the screen. Then i would like to position several other smaller
    images on top of that centered big image. The problem is that i need
    to use pixels to set positions for those small images and how can i
    acomplish that? Note that those positions must be absolute to base
    image. That is x=100 and y=100 will position inside base image
    (100,100) and not inside browser window coordinates.
    And i would prefer to use <div> instead tables if it is possible...
    simast, Sep 18, 2004
    #1
    1. Advertising

  2. simast

    Kris Guest

    In article <>,
    (simast) wrote:

    > Here is what i need:
    >
    > I would like to have some sort of base image that is big and i center
    > it on the screen. Then i would like to position several other smaller
    > images on top of that centered big image. The problem is that i need
    > to use pixels to set positions for those small images and how can i
    > acomplish that? Note that those positions must be absolute to base
    > image. That is x=100 and y=100 will position inside base image
    > (100,100) and not inside browser window coordinates.
    > And i would prefer to use <div> instead tables if it is possible...


    <div class="gallery">
    <img class="primary" ..>
    <img class="secondary first" ..>
    <img class="secondary second" ..>
    <img class="secondary third" ..>
    </div>

    #gallery {
    width: 500px;
    margin: 0 auto;
    position: relative;
    }

    ..secondary {
    position: absolute;
    }

    ..first {
    left: 10px;
    top: 10px;
    }

    ..second {
    right: 10px;
    bottom: 10px;
    }

    etcetera...

    --
    Kris
    <> (nl)
    Kris, Sep 19, 2004
    #2
    1. Advertising

  3. simast

    Kris Guest

    In article <4all.nl>,
    Kris <> wrote:

    > <div class="gallery">
    > <img class="primary" ..>
    > <img class="secondary first" ..>
    > <img class="secondary second" ..>
    > <img class="secondary third" ..>
    > </div>


    This would even make it more simple.

    <div class="gallery">
    <img ..>
    <div class="thumbnails">
    <img class="first" ..>
    <img class="second" ..>
    <img class="third" ..>
    </div>
    </div>

    --
    Kris
    <> (nl)
    Kris, Sep 19, 2004
    #3
    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. Bazil

    Centered Image

    Bazil, Dec 12, 2004, in forum: HTML
    Replies:
    3
    Views:
    449
    Mr Bean
    Dec 13, 2004
  2. Albert Wiersch
    Replies:
    14
    Views:
    1,550
    Neredbojias
    Aug 19, 2005
  3. Roger
    Replies:
    1
    Views:
    366
    Roger
    Dec 10, 2006
  4. Vangelis Natsios

    Getting coords of visible part of a scrolled image

    Vangelis Natsios, Jul 8, 2003, in forum: Javascript
    Replies:
    1
    Views:
    100
    Silvio Bierman
    Jul 8, 2003
  5. Andrew Poulos

    Get relative coords of clicked image

    Andrew Poulos, Aug 6, 2008, in forum: Javascript
    Replies:
    1
    Views:
    80
    Thomas 'PointedEars' Lahn
    Aug 6, 2008
Loading...

Share This Page