SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Wrapping thread around a table

    How do I wrap text around a table? The text I've entered is below and I want it to the right of the table?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Sounds like you need to float the table.

    Code:
    table {float: left;}
    See if that helps, and report back.

  3. #3
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That worked fine for the table, but then I realized that all the images on the same page were listed as follows:

    <table class="image" align="center">
    <tr>
    <td><img src="images/trees.jpg" height="400" width="600" alt="These trees surround what was once an old homesite">
    </td>
    </tr>
    <tr>
    <td class="caption"><center><b>These trees surround what was once an old homesite</b></center></td>
    </tr>
    </table>

    As a result all the images were pushed to the left....??? Any suggestions on how to wrap text around the table, and yet keep the photos aligned as previously set. I used this code in order to have captions under the photos.



    <center><h2><font color="#8A360F">*******

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Barnum View Post
    As a result all the images were pushed to the left....??? Any suggestions on how to wrap text around the table, and yet keep the photos aligned as previously set.
    The <center> element is really out of date. Anyway, you could try something like this:

    Code:
    td img {
      margin: 0 auto;
    }
    Not sure if that will work here, but that's the normal way to center an element.

  5. #5
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for replyiing....unfortunately that didn't do the trick.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Yes, sorry, I just went away and tested it and noted that. Strange. Someone better at CSS might explain why it didn't work.

    Anyway, here's a solution you could use if no better option comes up:

    Wrap the image in <p> tags, like so

    Code:
    <p><img src="" height="400" width="600" alt=""></p>
    and apply this style:

    Code:
    td p {margin: 0; text-align: center}

  7. #7
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This does not work either... Really stymied by this. Any help would be appreciated.

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Not sure if that will work here, but that's the normal way to center an element.
    That's the normal way to centre a block-level element.

    For inline elements (like img) you can use text-align:center instead.
    Birnam wood is come to Dunsinane

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Barnum View Post
    This does not work either... Really stymied by this. Any help would be appreciated.
    Hmm, I tested that and it worked in Firefox. What browser are you viewing this in?

    Quote Originally Posted by AutisticCuckoo View Post
    That's the normal way to centre a block-level element.

    For inline elements (like img) you can use text-align:center instead.
    Yes, I realized that after posting. But when I tried text-align: center it didn't work. Not sure what I was doing wrong. Does the behavior change inside a td? (I'll try it again...)

  10. #10
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Maybe I am not defining the problem correctly. When I used the float left notation in CSS the text indeed wrapped around the table fine, but I used the table definition for my photos on the page as well (in order to use captions). As a result the align right/left designations are negated, and all the photos now line up on the left side of the page. I want them alternating in the page. One on the right, next one on the left, next on the right, etc....

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Sorry, you've lost me there. Do you have a link to the page, or can you post an image of the layout you want? I can't picture what page layout you are shooting for. Sounds like there's a better option than tables.

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Barnum View Post
    Maybe I am not defining the problem correctly. When I used the float left notation in CSS the text indeed wrapped around the table fine, but I used the table definition for my photos on the page as well (in order to use captions). As a result the align right/left designations are negated, and all the photos now line up on the left side of the page. I want them alternating in the page. One on the right, next one on the left, next on the right, etc....
    Then give an ID to the table that you want the text to flow around, and alter the CSS rule to apply to that ID only.

    Code HTML4Strict:
    <table id="special">...</table>
    Code CSS:
    #special {float:left}

    The deprecated align attribute is implemented as a CSS float in browsers.
    Birnam wood is come to Dunsinane

  13. #13
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is how I have my photos on the page:

    <table class="image" align="right">
    <tr>
    <td><img src="images/topo.jpg" height="600" width="400" alt="Early Dallas Plat">
    </td>
    </tr>
    <tr>
    <td class="caption"><center><b>Early Dallas, Texas, plat</b></center></td>
    </tr>
    </table>

    The table with text is listed as follows:

    <div align="justify">

    <table border="1 px" cellpadding="0" cellspacing="30" width="20%">
    <tr>
    <td width="22%" valign="top" bgcolor="#efe7d6">
    <br>
    <br>


    <!-- start top of left section -->


    <h4><center>Useful Links</center></h4>


    <a href="http://www.defunctparks.com"><center>Amusement Parks<center>
    </center>
    <p>


    <a href="http://www.ipl.org"><center>Online Library</a></font></center>
    </p>

    <a href="http://memory.loc.gov/ammem/gmdhtml/gmdhome.html"><center>Maps</a></font></center>
    </p><p>

    <a href="http://www2.johnstown.k12.oh.us/cornell/states.html"><center>Old Schools</center></a></font></center>
    </p><p>


    <a href="http://www.dmoz.org/Recreation/Scouting/Campsites/United_States/"><center>Scout Camps<center></a></font></center>
    </p><p>


    <a href="http://www.over-land.com/westfort.html">Old Forts</a></font>
    </center>
    </p><p>


    <a href="http://www.legendsofamerica.com/LA-Treasures.html"><center>Lost Treasure</center></a></font>
    </center>
    </p><p>


    <a href="http://www.ghosttowns.com"><center>Ghost Towns</center><a></font></center>
    </p><p>


    <a href="http://fleausa.com/"><center>Flea Markets</center></a></font></center>

    </p>



    <!-- End Bottom of Left Section --></td>


    </table>


    How do I get the text to wrap about the text table, and still have the photos
    aligned as noted? i.e., I want the align="right", align="left", to be valid. The float left notation shifts all the photos to the left. The last suggestion using <p> with photos does seem to do anything....?

    Sorry I am not better with my questions....

  14. #14
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    s'okay, Barnum... me, I'd want some ascii art because the code looks like a menu on the left and a bunch of photos-n-captions on the right, so I'm not sure which text is supposed to wrap which table.

    Even something whipped up in Paint would show me what it's supposed to look like.

  15. #15
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    When I entered the TEXT table, I could not get text to wrap around it. The PHOTO tables work fine, and the text wraps fine. Why is the text not wrapping around the TEXT table?

  16. #16
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Solved my problem finally.... Tried this and it works fine....

    <table bgcolor="#FEE8D6" border="10"border color="black" align="left">
    <tr>
    <td>
    <h3><center>A Few Useful Links</center></h3>
    <br>

    <b><a href="http://www.defunctparks.com"><center>Amusement Parks<center></b>
    <br>
    <b><a href="http://www2.johnstown.k12.oh.us/cornell/states.html"><center>Old Schools</center></a></font></center></b>
    <br>
    <b><a href="http://www.ipl.org"><center>Online Library</a></font></center></b>
    <br>
    <b><a href="http://memory.loc.gov/ammem/gmdhtml/gmdhome.html"><center>Maps</a></font></center></b>
    <br>
    <b><a href="http://www.dmoz.org/Recreation/Scouting/Campsites/United_States/"><center>Scout Camps<center></a></font></center></b>
    <br>
    <b><a href="http://www.legendsofamerica.com/LA-Treasures.html"><center>Lost Treasure</center></a></font></b>
    <br>
    <b><a href="http://www.driveintheater.com/"><center>Old Drive Ins</a></font></center></b>
    <br>
    <a href="http://www.ghosttowns.com"><b><center>Ghost Towns</center><a></font></center></b>
    <br>
    <a href="http://fleausa.com/"><b><center>Flea Markets</center></b></a></font></center>
    </td>
    </tr>
    </table>


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
  •