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
    Regular Coder
    Join Date
    Jun 2007
    Posts
    310
    Thanks
    86
    Thanked 3 Times in 3 Posts

    Displying three image elements together?

    Hello,

    I'm trying to create a container so that the three graphical elements, ie the arrow, the edit button and the exit button (cross) all appear alligned nicely.

    Now i've got the container to work, but can't get the graphical elements to line-up and the grey top bar does noit appear in Firefox, but does in IE.

    My Code I have is here

    Thanks
    Last edited by stfc_boy; 10-19-2009 at 07:57 PM.

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    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>boxes</title>
    <style type="text/css">
    <!--
    /* Start the stylesheet */
    
    * {
        padding: 0;
        margin: 0;
    }
    body {
        font: normal 11px verdana, arial, verdana, helvetica, sans-serif;
        background: #ECECEC;
        color: #000;
    }
    #wrapper {
        margin:auto;
        width: 1025px;
        border: 1px solid #cccccc;
        padding: 10px;
        background-color: #FFFFFF;
        min-height:200px;
        position:relative;
        z-index:2;
    }
    
      .box {
        background:#FFF;
        margin-bottom: 15px;
        padding-bottom: 6px;
        width:310px;
        height:200px;
        border: 1px solid #CCC;
        margin-bottom:5px;
    	margin:auto;
    	float:left;
    	margin-right:25px;
    
    }
      .box-top { /*The top grey bit*/
        height: 10px;
        width:310px;
        background:#CCC; margin:auto;
    }
    .header {     
    	background: #336699; margin-left:-5px;
        color: #fff;
        font-size: 1.4em;
        text-shadow: #777 1px 1px 1px;
    	padding-top:5px;
    	padding-bottom:5px;
    	margin-bottom:10px;
    	width:320px;
    }
    p.left { float:left; display:inline;  }
    img.left { float:left; display:inline; margin-left:5px; }
    img.right { float:right; display:inline; margin-right:5px; }
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div class="box">
        <div class="box-top"></div>
        <div class="header"> <img class="left" src="http://www.inspireaway.co.uk/down_arrow.jpg" width="14" height="14" alt="title" />
          <p class="left">Here is a heading</p>
          <img class="right" src="http://www.inspireaway.co.uk/edit.jpg" width="50" height="16" alt="title" /> <img class="right" src="http://www.inspireaway.co.uk/close.jpg" width="16" height="16" alt="title" />
          <div style="clear:both;"></div>
        </div>
        <p>Here is some text</p>
      </div>
      <div class="box">
        <div class="box-top"></div>
        <div class="header"> <img class="left" src="http://www.inspireaway.co.uk/down_arrow.jpg" width="14" height="14" alt="title" />
          <p class="left">Here is a heading</p>
          <img class="right" src="http://www.inspireaway.co.uk/edit.jpg" width="50" height="16" alt="title" /> <img class="right" src="http://www.inspireaway.co.uk/close.jpg" width="16" height="16" alt="title" />
          <div style="clear:both;"></div>
        </div>
        <p>Here is some text</p>
      </div>
      <div class="box">
        <div class="box-top"></div>
        <div class="header"> <img class="left" src="http://www.inspireaway.co.uk/down_arrow.jpg" width="14" height="14" alt="title" />
          <p class="left">Here is a heading</p>
          <img class="right" src="http://www.inspireaway.co.uk/edit.jpg" width="50" height="16" alt="title" /> <img class="right" src="http://www.inspireaway.co.uk/close.jpg" width="16" height="16" alt="title" />
          <div style="clear:both;"></div>
        </div>
        <p>Here is some text</p>
      </div>
    </div>
    </body>
    </html>
    you'll want to tweak it but the images line up as you wanted.

    replaced the h3 with a <p and a class> as I was testing, using a h3 should make no difference but be careful with padding/margin etc.

    I extended #wrapper to fit it all in but you can refine it as required.

    displays in ie+ff as shown
    Attached Thumbnails Attached Thumbnails Displying three image elements together?-boxes.jpg  

  • Users who have thanked met for this post:

    stfc_boy (10-19-2009)


  •  

    Posting Permissions

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