SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Wonky images

  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wonky images

    I'm trying to put two images on the same "line" on a page, one left aligned, one centred. I've tried putting them in a table but that doesn't work in IE although it does in Firefox. I think IE screws it up cos I've got

    padding: 10px 40px;
    margin: 12px;

    in my CSS.

    I've tried

    HTML Code:
    <img src="images/ISO-9001regsm.gif" alt="ISO 9001 registered" width="120" height="70" align="left">
     <div align="center"><img src="images/veritas-tr.gif" alt="Veritas Chambers" width="384" height="42" vspace="14" align="middle"></div>
    and that centres the 2nd image in the space remaining and I want it centred on the page.

    My guess is I need to use CSS to do the job properly (and consistently) but I'm not sure what I need. Any suggestions, please?

    Cheers G :-)>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is not quite as straightforward as you may think

    If you float one image and try to centre the other then the image on the left offsets the centre image. So you could float another element to the right of the centre image that is the same size as the left image and this will even it up.

    However it might be better to place the left image absolutely and remove it from the flow and the centre image will centre normally. You just then need to set a margin on the centre image to stop it overriding the left image.

    Of course this all depends on there not being any other content on the same line.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #outer{
    position:relative;/*stacking context*/
    height:70px;
    text-align:center;/*centres image*/
    background:#fffccc;
    }
    #leftimage{
    position:absolute;
    left:0;
    top:0;
    }
    #outer #imgcentre {margin:14px 120px;}
    </style>
    </head>
    <body>
    <div id="outer">
    <img id="leftimage" src="images/ISO-9001regsm.gif" alt="ISO 9001 registered" width="120" height="70" >
    <img id="imgcentre" src="images/veritas-tr.gif" alt="Veritas Chambers" width="384" height="42" >
    </div>
    </body>
    </html>
    Hope that helps.
    Paul

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    This is not quite as straightforward as you may think

    Paul
    That's a British understatement n'est pas?

    Thanks for the code. I'll give it a whirl.

    Cheers G :-)>

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That has worked a treat, thanks Paul. http://www.chambersveritas.co.uk


Bookmarks

Posting Permissions

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