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 9 of 9
  1. #1
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Image description - width control

    on this page:
    http://emilydickinson.us/media.html
    notice the description on the third photo in the second column. What style is needed to keep the verbiage about the width of the photo?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,630
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    Either you set the width of the paragraph(s) explicitly or you use some kind of wrapper that contains the image and the text, and you set a width to the wrapper element.

  • #3
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Either you set the width of the paragraph(s) explicitly or you use some kind of wrapper that contains the image and the text, and you set a width to the wrapper element.
    Thank you

  • #4
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I've been looking over the style for an hour and I can't figure out how to make the style to make the paragrah for the two columns 200px wide.

    What would the style be?

    something like this?

    p.middle {
    width: 200px;
    }

    How do I add the width to both columns,

    #middlecolumn{
    position: relative;
    top:0px;
    width:300px;
    float: right;

    }

    #lone {
    width: 300px;
    float: left;
    }

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,630
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    Code:
    #lone p, #middlecolumn p {width: 150px;}
    Or if you want a different width in the columns then create separate rules for each selector.

  • #6
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the style: #lone p, #middlecolumn p {width: 150px;}

    How do I place it in the xhtml ? I've tried, <div id="lone p"> and it didn't work.

    <div id="lone">
    <a href="img/ed-gestures.jpg" ><img src="img/ed-gestures_thumbnail.png" width="149" height="135" border="0" alt="emily" ></a><p>Pam as Emily</p>
    <br clear="all">
    <a href="img/ed-pamheadhi-res300dpi.jpg" ><img src="img/ed-pamheadhi-res300dpi_thumbnail.png" width="150" height="111" border="0" alt="close up" ></a><p>Pam color close</p>
    <br clear="all">
    <a href="img/ed-pamheadshotbw.jpg" ><img src="img/ed-pamheadshotbw_thumbnail.png" width="125" height="127" border="0" alt="Pam headshot b&w" ></a><p>Pam B&W portrait</p>
    <br clear="all">
    <a href="img/ed-sceneryplan.jpg" ><img src="img/ed-sceneryplan_thumbnail.png" width="161" height="107" border="0" alt="Scenery set" ></a><p>Stage setting</p>
    <br clear="all">

    </div>
    Last edited by vinoman2; 12-02-2009 at 12:21 AM.

  • #7
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I divided the styles into two:

    #lone p {width: 150px;}

    #middlecolumn p {width: 150px;}

    but when I test out more verbiage in the <p> tags, it still doesn't work. I can't see what else to do!

    I don't think this style works.

    Any other clues?

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello vinoman2,
    I don't understand what's not working. When I add text to either <p> it stays the width of the image above it...

    Code:
    <div id="lone">
    
    <a href="img/ed-gestures.jpg"><img src="img/ed-gestures_thumbnail.png" alt="emily" width="149" border="0" height="135"></a><p>Pam as Emily</p>
    <br clear="all">
    <a href="img/ed-pamheadhi-res300dpi.jpg"><img src="img/ed-pamheadhi-res300dpi_thumbnail.png" alt="close up" width="150" border="0" height="111"></a><p>Pam color close some more text to see it wrap and then more to see it wrap again</p>
    <br clear="all">
    <a href="img/ed-pamheadshotbw.jpg"><img src="img/ed-pamheadshotbw_thumbnail.png" alt="Pam headshot b&amp;w" width="125" border="0" height="127"></a><p>Pam B&amp;W portrait</p>
    <br clear="all">
    <a href="img/ed-sceneryplan.jpg"><img src="img/ed-sceneryplan_thumbnail.png" alt="Scenery set" width="161" border="0" height="107"></a><p>Stage setting</p>
    <br clear="all">
    
    </div>
    
    <div id="middlecolumn"><a href="img/emilycandle.jpg"><img src="img/emilycandle_thumbnail.png" alt="" width="155" border="0" height="106"></a><p>Emily with candle some more text to see it wrap and then more to see it wrap again</p>
    
    <a href="img/emilyatdesk3.jpg"><img src="img/emilyatdesk3_thumbnail.png" alt="" width="150" border="0" height="106"></a><p>Emily at her desk</p>
    <br clear="all">
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello vinoman2,
    I don't understand what's not working. When I add text to either <p> it stays the width of the image above it...

    Code:
    <div id="lone">
    
    <a href="img/ed-gestures.jpg"><img src="img/ed-gestures_thumbnail.png" alt="emily" width="149" border="0" height="135"></a><p>Pam as Emily</p>
    <br clear="all">
    <a href="img/ed-pamheadhi-res300dpi.jpg"><img src="img/ed-pamheadhi-res300dpi_thumbnail.png" alt="close up" width="150" border="0" height="111"></a><p>Pam color close some more text to see it wrap and then more to see it wrap again</p>
    <br clear="all">
    <a href="img/ed-pamheadshotbw.jpg"><img src="img/ed-pamheadshotbw_thumbnail.png" alt="Pam headshot b&amp;w" width="125" border="0" height="127"></a><p>Pam B&amp;W portrait</p>
    <br clear="all">
    <a href="img/ed-sceneryplan.jpg"><img src="img/ed-sceneryplan_thumbnail.png" alt="Scenery set" width="161" border="0" height="107"></a><p>Stage setting</p>
    <br clear="all">
    
    </div>
    
    <div id="middlecolumn"><a href="img/emilycandle.jpg"><img src="img/emilycandle_thumbnail.png" alt="" width="155" border="0" height="106"></a><p>Emily with candle some more text to see it wrap and then more to see it wrap again</p>
    
    <a href="img/emilyatdesk3.jpg"><img src="img/emilyatdesk3_thumbnail.png" alt="" width="150" border="0" height="106"></a><p>Emily at her desk</p>
    <br clear="all">
    It did work this time. I don't see any difference, but it's working Thanks.
    http://emilydickinson.us/media.html


  •  

    Posting Permissions

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