Image description - width control

vinoman2

11-26-2009, 02:18 AM

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?

VIPStephan

11-26-2009, 02:21 AM

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.

vinoman2

11-26-2009, 02:48 PM

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 :)

vinoman2

12-01-2009, 12:41 AM

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;
}

VIPStephan

12-01-2009, 09:23 AM

#lone p, #middlecolumn p {width: 150px;}

Or if you want a different width in the columns then create separate rules for each selector.

vinoman2

12-01-2009, 02:24 PM

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>Pam as Emily
 
<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>Pam color close
 
<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>Pam B&W portrait
 
<a href="img/ed-sceneryplan.jpg" ><img src="img/ed-sceneryplan_thumbnail.png" width="161" height="107" border="0" alt="Scenery set" ></a>Stage setting
 

</div>

vinoman2

12-02-2009, 06:36 PM

I divided the styles into two:

#lone p {width: 150px;}

#middlecolumn p {width: 150px;}

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

I don't think this style works.

Any other clues?

Excavator

12-02-2009, 06:48 PM

Hello vinoman2,
I don't understand what's not working. When I add text to either it stays the width of the image above it...

<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>Pam as Emily
 
<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>Pam color close some more text to see it wrap and then more to see it wrap again
 
<a href="img/ed-pamheadshotbw.jpg"><img src="img/ed-pamheadshotbw_thumbnail.png" alt="Pam headshot b&w" width="125" border="0" height="127"></a>Pam B&W portrait
 
<a href="img/ed-sceneryplan.jpg"><img src="img/ed-sceneryplan_thumbnail.png" alt="Scenery set" width="161" border="0" height="107"></a>Stage setting
 

</div>

<div id="middlecolumn"><a href="img/emilycandle.jpg"><img src="img/emilycandle_thumbnail.png" alt="" width="155" border="0" height="106"></a>Emily with candle some more text to see it wrap and then more to see it wrap again

<a href="img/emilyatdesk3.jpg"><img src="img/emilyatdesk3_thumbnail.png" alt="" width="150" border="0" height="106"></a>Emily at her desk

vinoman2

12-02-2009, 08:48 PM