Img align top right of table cell

  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

I'm having a few troubles getting the image logo.jpg to align to top & right of the cell, any ideas? It aligns to middle of the right side.

Code: [ Select ]
<table width="740" border="0" cellspacing="0" cellpadding="0"  id="tableID">
    <tr>
        <td style="background-image:url(header.jpg); height:120px; valign:top;">
            <div style="vertical-align:top; text-align:right">
                <a href="index.php">
                    <img src="/logo.jpg" id="Home" style="border:0px" alt="Home"/>
                </a>
            </div>
        </td>
    </tr>
...
  1. <table width="740" border="0" cellspacing="0" cellpadding="0"  id="tableID">
  2.     <tr>
  3.         <td style="background-image:url(header.jpg); height:120px; valign:top;">
  4.             <div style="vertical-align:top; text-align:right">
  5.                 <a href="index.php">
  6.                     <img src="/logo.jpg" id="Home" style="border:0px" alt="Home"/>
  7.                 </a>
  8.             </div>
  9.         </td>
  10.     </tr>
  11. ...
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

There are a couple different ways to get this to work. My suggestion would be to set the height of your DIV equal to the table cell...

Code: [ Select ]
<table width="740" border="0" cellspacing="0" cellpadding="0"  id="tableID">
    <tr>
        <td style="background-image:url(header.jpg); height:120px;">
            <div style="text-align:right;height:120px;">
                <a href="index.php">
                    <img src="/logo.jpg" id="Home" style="border:0px" alt="Home"/>
                </a>
            </div>
        </td>
    </tr>
  1. <table width="740" border="0" cellspacing="0" cellpadding="0"  id="tableID">
  2.     <tr>
  3.         <td style="background-image:url(header.jpg); height:120px;">
  4.             <div style="text-align:right;height:120px;">
  5.                 <a href="index.php">
  6.                     <img src="/logo.jpg" id="Home" style="border:0px" alt="Home"/>
  7.                 </a>
  8.             </div>
  9.         </td>
  10.     </tr>


Alternately, you could use the "valign" attribute of the TD element.
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

Muchly appreciated - I'll test it tonight :)
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

or you could add that as a background-image and add the following:
Code: [ Select ]
background-image:url('/logo.jpg');
background-position:top right;
background-attachment:fixed;
  1. background-image:url('/logo.jpg');
  2. background-position:top right;
  3. background-attachment:fixed;


Try it here

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 66 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.