Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow Placing an image and caption in middle of div

    Hi,
    I wish to place a small image with a caption by its side in the middle of a div. What would be the better approach, (i)to put the two in a div and use absolute positioning or (ii)to use margins to position the two. Either way seems to work but I am looking for an approach that would be considered correct by a professional web developer. All help would be greatly appreciated.
    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>
      <style type="text/css">
        body 
        { text-align: center;
          min-width: 1044px;
          margin: 0px;
          padding: 0px;
          font-family: arial;
        }
        #wrapper 
        { position: relative;
          text-align: left;
          width: 1044px;
          height: 100%;
          margin: 0px auto;
        }
        #top-header-block
        { width: 1010px;
          height: 170px;
          background-color: cyan;
        }
        #top-header-block img
        { height: auto;
          width: auto;
        }
        #logo
        { float: left;
        }
    /*------------------------------------------*/
        #inner-div
        { height: auto;
          width: auto;
          position: absolute;
          left: 567px; 
          top: 41px;
        }
        #inner-div img
        { float: left;
        }
        #inner-div p 
        { float: left;
          margin-top: 3px;
          margin-left: 5px;
          color: #0d2474;
          font-family: arial,sans-serif;
          font-size: 11px;
          font-weight: bold;
        }
    /*------------Alternative to above-------------*/
        #img-B
        { float: left;
          margin-left: 315px;
          margin-top: 40px;
        }
        #top-header-block p 
        { float: left;
          margin-top: 43px;
          margin-left: 5px;
          color: #0d2474;
          font-family: arial,sans-serif;
          font-size: 11px;
          font-weight: bold;
        }
    /*------------------------------------------*/
      </style>
    </head>
     
    <body>
      <div id="wrapper"> 
        <div id="top-header-block">
           <a href="#">
            <img id="logo" src=""
               alt="" width="248" height="65"/></a>
         <div id="inner-div">
           <a href="#">
            <img src=""
               alt="" width="66" height="20" /></a>
          <p>: 0 items</p>
         </div>
    <!-------------Alternative to above---------------->
           <a href="#">
            <img id="img-B" src=""
               alt="" width="66" height="20" /></a>
          <p>: 0 items</p>
    <!---------------------------------------------------->
       </div>
    </div>
    
    </body>
    
    </html>

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    I'm guessing the image is always the same size... in which case, I'd go with margins to ensure that if you ever move it around, you don't have to make sure its container has position:relative; or position:absolute;.


  •  

    Posting Permissions

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