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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2009
    Posts
    401
    Thanks
    118
    Thanked 0 Times in 0 Posts

    aligning text to top corner of image, like a table

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

    Code:
    	<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>
    Code:
    .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;
    }

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    Code:
    .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; }
    Code:
    <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>
    Attached Thumbnails Attached Thumbnails aligning text to top corner of image, like a table-boxes.jpg  

  • Users who have thanked met for this post:

    sixrfan (10-09-2009)

  • #3
    Regular Coder
    Join Date
    Aug 2009
    Posts
    401
    Thanks
    118
    Thanked 0 Times in 0 Posts
    that worked. thanks so much!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


  •  

    Posting Permissions

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