SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple problem, complex headache (wrap position image)

    Sorry bad english. Im from Brazil.

    Internet Explorer: 6.0.2900

    The simple code:

    HTML Code:
    <TABLE border=1 width="500">        
    <tr>
    <td>             
        <nobr>                   
        Anything here
        <IMG src="anyimage" height=16 width=16>
        </nobr>
    </td></tr>                        
    </TABLE>
    Shows a table with word and picture in a row, aligned. (the picture base is aligned with the letters base)

    Adding a simple align=right on img, like following:

    HTML Code:
    <TABLE border=1 width="500">        
    <tr>
    <td>             
        <nobr>                   
        Anything here
        <IMG src="anyimage" height=16 width=16 align=right>
        </nobr>
    </td></tr>                        
    </TABLE>
    It shows me the same but disaligned.

    Please tell me how to do this align=right but the row aligned.

    Consider I cant create another <td> or another table, ok?


    Any advice is welcome.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would use CSS, apply a class to the image, and then float the image to the right (this does mean removing the <nobr> tags).

    Like this:
    HTML Code:
         
        <TABLE border=1 width="500">        
        <tr>
        <td>
            Anything here
            <IMG  class="right" src="anyimage" height="16" width="16">
        </td>
        </tr>                        
        </TABLE>
    And in a separate stylesheet, use this:
    Code:
        .right img {
        float: right;
        }
    If you're not comfortable with CSS, you can always use align="right" on the image itself, but only if you use a Transitional DOCTYPE (or no DOCTYPE at all).
    HTML Code:
         <TABLE border=1 width="500">        
         <tr>
         <td>
             Anything here
             <IMG align="right" src="anyimage" height="16" width="16">
         </td>
         </tr>                        
         </TABLE>
    But either way, you'll have to remove the <nobr> tags.

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    I would use CSS, apply a class to the image, and then float the image to the right (this does mean removing the <nobr> tags).
    Quote Originally Posted by Dan Schulz
    If you're not comfortable with CSS, you can always use align="right" on the image itself, but only if you use a Transitional DOCTYPE (or no DOCTYPE at all).

    Sorry chief it didnt work. The image still apear disaligned (the picture base with the word base) with the word


    Please help me

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, sometimes stepping away for a bit can help one's thinking.

    You want the top of the image to align with the text, rather than the bottom of the image aligning with the text, right? To do that, all you have to do is swap the location of the text and the image.
    HTML Code:
      <img class="right" src="image.jpg" width="16" height="16" alt="descriptive text here">
      Some text here.
    And then style its alignment using CSS as I showed you earlier (repeated here for redundancy)
    Code:
      .right {
      	float: right;
      }
    You may also want to remove the <nobr> element, unless you have a particular use for it which is important to your particular situation.


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
  •