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 11 of 11

Thread: No Wrap tag

  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    406
    Thanks
    0
    Thanked 0 Times in 0 Posts

    No Wrap tag

    I have a td tag which have a long sentence (the length of the sentence varies based on a search query) and 2 images. When the sentence gets long some time the 2 images are breaking - means one image stays on the first line with the sentence and the second image goes to the next line. I want my 2 images to be together at all times. What can I do. Here is the code:

    <tr><td valign="top">This is the long sentence <a href="a.html"><img src="images/x.gif" border="0></a> <a href="b.html"><img src="images/y.gif" border="0"></a></td></tr>

    I dont want to use <td NOWRAP> because it will put every thing in one line and it will cause a vertical scroll bar to appear which I dont want. The way I want is if the sentence is too short, then all of them can stay in the first line. If the sentence get very very long and wraps to the next line is also ok because then both images will be in the second line together. But if the sentence is barely long enough to fit in the first line there is a chance that one image will wrap to the next line. I dont want this to happen.
    Any suggestions?

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Try enclosing both images in a block element, like <div>. Assign the div the properties you'd like, say, the total width and height of both images, and appropriate margin/padding.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    406
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I added a <div> tag and now both images are together but it looks like its acting also like a <br> tag because not matter how small a sentence is both images are going to the next line. Now they are not staying together at all in one line (The sentence and the images).

    <tr><td valign="top" colspan="2"><a class="SmBlackText">6304 records found in search database</a> &nbsp; &nbsp; &nbsp; <a class="DecLink" href="#">Save Search</a> &nbsp; <a class="SmBlackText">|</a> &nbsp; <a class="DecLink" href="#">Create E-mail Alert</a> &nbsp; <a class="SmBlackText">|</a> &nbsp; <div><img src="images/rss.gif" alt="RSS" border="0" align="absbottom"> <img src="images/help.gif" border="0" align="absbottom"></div></td></tr>

  • #4
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    make your div display inline, or use a span

    div.search_results_block
    {
    display:inline;
    }

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    406
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It still doesnt work the way I want. May be you can try with what I am diong. copy the below code and and go to a browser (I checked in ID 6.X) and slowly reduce the size of the browser. At one point the first image stays in the first line and the second image wraps to the next line.

    What I want is at any point in time both these images should be together. Either in the first line or if the sentence a bit long, both images should wrap to the next line.
    The reason I want this way is, the first image is to download some XML and the second image is a help icon for the first image. So if the second one wraps to the next line, users might not notice it in case they need some help.

    <html>
    <head>
    <style type="text/css">
    div.search_result
    {
    display:inline;
    }

    </style>
    </head>

    <body>
    <table width="100%" cellspacing="0" cellpadding="0">
    <tr><td valign="top" colspan="2"><a class="SmBlackText">6304 records found in compendex for ((parasite wn all) AND (insects wn ky) OR (pests wn ab)), 1990 - 2004, English only</a> &nbsp; &nbsp; &nbsp; <a class="DecLink" href="#">Save Search</a> &nbsp; <a class="SmBlackText">|</a> &nbsp; <a class="DecLink" href="#">Create E-mail Alert</a> &nbsp; <a class="SmBlackText">|</a> &nbsp; <div class="search_result"><img src="images/rss.gif" alt="RSS" border="0" align="absbottom"> <img src="images/blue_help.gif" border="0" align="absbottom"></div></td></tr>
    </table>
    Last edited by chelvis; 02-17-2005 at 04:01 PM.

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Try:
    Code:
    div.search_result {
     display: inline;
     white-space: nowrap;
     }
    You're basically just confining the no wrap attributes to the two images rather than the entire table cell.

  • #7
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    That did the trick when I tested it

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Posts
    406
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much rmedek. It works

  • #9
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    no problem

  • #10
    New to the CF scene
    Join Date
    Jan 2005
    Location
    Virginia, USA
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    you could have just put a <nobr> tag around the images, but I guess that's a little too outdated for most people here

  • #11
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by mjohn117
    you could have just put a <nobr> tag around the images, but I guess that's a little too outdated for most people here
    Yep.

    <nobr> is supported in some browsers, but was only a specification in the IE 3.0 DTD... we're all about web standards here (most of us, anyway )


  •  

    Posting Permissions

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