SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple image box help

    Hello,

    I've written some CSS than will hold an image and a caption but I want it be be flexible so that the image is 150 pixels wide the caption wrap onto the line according to the width, but as you can see from what i've done below it does not. Can anyone help please as I just can't seem to do it?

    HTML 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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Pic Test</title>
    <style>
    * {
    	margin:0;
    	padding:0;
    }
    
    body{
    	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; 
    	font-size:12px;
    }
    
        .pic_float_right {
      clear:right;
      float:right;
      border:solid 1px silver;
      padding:5px;
      margin-left: 5px;
      margin-top: 10px;
      margin-bottom: 10px;
      }  
      
      .picture_text {
      text-align: center;
      background:#EEEEEE;
      font-weight: bold;
      color: #333333;
      font-size: 11px;
      padding-top:5px;
      padding-bottom:5px;
      width:auto;
    } 
    
    </style>
    </head>
    <body>
    
      <div class="pic_float_right">
        <img src="picwrap.jpg" width="300" height="200" />
        <p class="picture_text">This is some text that will wrap onto thenext line nomatter the width of the pic.</p>
      </div>
    
    </body>
    </html>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    http://www.pmob.co.uk/temp/caption3.htm

    Something like that? If you don't want the text to wrap under the image give the <p> that holds the text a left margin equal to the images width+padding/margins set on it. You can work out hte math.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but not really like that.

    That's trying to wrap text around a pic which i'm fine with. What I need if possible is for any sized image to have the caption underneath it and go onto the next line and break the line if needed in the style i've created in the example posted.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Via PM I got the link.


    If yo uwant the text to wrap once it meets the imagse width, just give the text the same width as the image
    Code:
    .picture_text{width:300px;}
    The odd big word or so won't make it be entire width due to the word drop, so you can change the text-align to justify, instead of center.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you are trying to do something automatic like this:

    http://www.pmob.co.uk/temp/table-caption2.htm

    The point being that the text will always wrap at the width of the image no matter how wide the image is. The only cross browser way to do this is to use a table as shown above.

    You can do something for good browsers like this:

    http://www.pmob.co.uk/search-this/stcaption5.htm

    It use an expression for ie6/7 to make the text wrap.

    However given the complexity I think the table aproach in my first link is the winner in this round

  6. #6
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks both of you. I'll have a play!


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
  •