www.webdeveloper.com
Results 1 to 5 of 5

Thread: Lock Position

  1. #1
    Join Date
    Feb 2007
    Posts
    6

    Lock Position

    does anyone know how to lock an image/layer in a stable position.
    For example right now i have it set to left:262:top:115 and it's perfectly their but when i resize the window it is STUCK at that position, i want to to move realtively to the site.


    <div style="position:absolute;display:none;visibility:hidden;left:262;top:115" id="accident">
    <tr>
    <td><img src="images/home1_07.gif" width="693" height="173" alt=""></td>
    </tr>
    </div>

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    The way to do that is to first NOT use absolute positioning as you have, and NOT to use tables for layout (and it looks as though you have the div WITHIN a table ???).

    Think of a web page as building a pyramid of blocks (except gravity acts from the top left corner) - the position of any block is determined by the size and position of those before it. Natural flow will naturally adapt to screen size changes - the less you try and "force" things into position with absolute positioning, the easier fluid sites are.

    Cheers
    Graeme

  3. #3
    Join Date
    Feb 2007
    Posts
    6

    full html

    hi thanks for that help.....i sort of understand what you mean but not quite maybe you can take a look at my full coding of the page and let me know what i am doing wrong.....

    What do you think? did i do anything wrong?
    Last edited by mlp55; 02-04-2007 at 10:40 AM.

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Do you have the site up somewhere? There would appear to be absolutely no content on this site - only graphics. And without the graphics, I cannot tell what you are trying to achieve at all.

    All graphics and no content means search engines cannot index the site, non-graphical browsers (including screen readers for the vision impared) cannot read or navigate your site. Building a web site should be about CONTENT - then style that content to make it look the way you want. And this process definitely does NOT involve Imageready slice-and-dice....

    If we can see the full layout, then we can steer you in the right direction.

    Cheers
    Graeme

  5. #5
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    To set an overlay relative to some set content.

    1. For the set content use display:relative
    2. Put the overlay inside the set content that has display:relative
    3. Add display:absolute to the overlay content and then set the top and left position relative to the set content.

    eg.

    <div style="display:relative">
    Some content
    Some more content
    <div style="display:absolute;left:20px;top:30px;">
    Some content to display over the other content but offset slightly
    </div>
    </div>

    See http://www.felgall.com/cshow09.htm for a more detailed description and an example.
    Last edited by felgall; 02-04-2007 at 01:43 AM.
    Stephen

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles