...

View Full Version : aligning text to top corner of image, like a table



sixrfan
10-09-2009, 12:09 AM
how do i use CSS or divs to mimic the effect of the HTML table with pics and descriptions that starts with the third picture down here: http://www.pooltees.com/scrapbook1.htm? Basically I want the description for each image to align to the upper right of the img section.

obviously the way i'm doing it is not working, as you can see with the top two items I put in. for some reason the description for the second img doesnt start at the upper right of that img.

thanks in advance!!!



<h3>Charlie &quot;Hillbilly Bryant&quot;</h3>
<p class="scrapbook_text">trades in his overalls for an even less classy PoolTees t shirt at the '09 BCA National Team Championships.</p>
<span class="clrflt"></span>
</p>
<p>
<span class="scrapbook"><img src="pics/pool_players/charlie_bryant.jpg" alt="Charlie Hillbilly Bryant" /></span>
<p>&nbsp;</p>
<h3>Charlie &quot;Hillbilly Bryant&quot;</h3>
<p class="scrapbook_text">trades in his overalls for an even less classy PoolTees t shirt at the '09 BCA National Team Championships.</p>
<span class="clrflt"></span>
</p>




.scrapbook {
width: 375px;
text-align: center;
margin: 5px;
float: left;
height: auto;
padding: 0px;
background-color: #FFFF00;
}
.scrapbook_text {
width: 345px;
margin: 0px;
float: left;
height: auto;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}

met
10-09-2009, 12:19 AM
.book { width:750px; border:1px solid red; margin-bottom:10px; }

h1.scrapbook_header { margin-bottom:10px; padding:0; font-size:16px; }

.scrapbook {
width: 375px;
text-align: center;
margin: 5px;
float: left;
height: 150px; /*auto is fine, 150px for testing */
padding: 0px;
background-color: #FFFF00;
}
.scrapbook_text {
width: 345px;
margin: 0px;
float: right;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}
.scrapbook p {
font-size:12px;
padding:5px;
}
.clear-scrap {clear:both; }




<div class="book">
<div class="scrapbook"><!-- your picture --></div>
<div class="scrapbook_text">
<h1 class="scrapbook_header">Caption</h1>
<p>Some text bla bla bla</p>
</div>
<div class="clear-scrap"></div>
</div>

sixrfan
10-09-2009, 01:35 AM
that worked. thanks so much!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum