www.webdeveloper.com
Results 1 to 4 of 4

Thread: CSS image layout help

  1. #1
    Join Date
    Dec 2003
    Location
    Canada
    Posts
    60

    Question CSS image layout help

    Here's my prob.

    I'm redesigning my website (www.eyecravedvd.com) and am attempting to place everything centered in a 768px wide table.

    I want to place my logo superimposed on top of the table using the


    Code:
    style="position:absolute

    and defining the paramaters, but if someone with a screen res larger than 800x600 visits the site, the logo won't be where I want it to be. Does anyone know how I can work around this or define it so that it will always be with the table, which will always be the same size?

    Thanks.

  2. #2
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Well I can't see on your web-site which image you are referring to, so I'm just going to give a series of general answers.

    If you want the image to be centred on the page, do this:

    position:absolute;left:50%;left-marginminus half the image width);

    That will centre it on any screen but not necessarily centre it in the table (unless your table is also centred). If you want, you could put the image as the first thing in the table and do something like this:

    <table style="position:absolute;"><tr><td>

    <img src="lavalamp.png" style="position:absolute;left:50%;margintop margin) (right margin) (bottom margin) (left margin);">

    you can change the margins to position the image pixel perfect on the page and it will look the same in all browsers and on all resolutions.

    Hope this helps but I can't do more without seeing an exmple page of what you're trying.
    Every fight is a food fight when you’re a cannibal.

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    <!-- Boy what a bad case of tableitis! -->

    A common technique is to position the image at 50%/50% and then set the top and left margins to negative values that are half the height and width respectively of the image. This works great with a CSS layout but I'm afraid it'll take a lot of extra work with that complex table layout you've got.

  4. #4
    Join Date
    Dec 2003
    Location
    Canada
    Posts
    60
    Here's an image of what I'm attempting to do. I think I may have figured it out though. I may have to create an 800px wide table and force the image to stay within that.

    I'd prefer not to use a table and do it mostly CSS for the header.
    Attached Images Attached Images

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