...

View Full Version : 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><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>

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 <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?

Excavator
12-02-2009, 06:48 PM
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...



<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">

vinoman2
12-02-2009, 08:48 PM
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...



<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum