SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background position

    Hi all, I have a listing page and I would like to divide the listing items with a background image in the left bottom corner of each item. But whatever I try the background image appears at approx 85% of the top instead of at 100%. Here are mine CSS and HTML:

    Code:
    * {/* For testing only */
    	margin: 0;
    	padding: 0;
    	list-style: 0;
    }
    
    .content {
    	width: 585px;
    	margin: 50px auto 0;
    	overflow: hidden;
    }
    
    .content .listing {
    	width: 585px;
    	height: 80px;
    	margin: 0 0 5px;
    	background: url(images/site/listing.png) 0 100% no-repeat;
    	overflow: hidden;
    }
    
    .content .listing img {
    	width: 100px;
    	height: 75px;
    	margin-right: 15px;
    	float: left;	
    }
    
    .content .listing .listing_details {
    	width: 470px;
    	float: left;
    }
    
    .content .listing .listing_details li {
      width: 100%;
    	display: block;	
    }
    
    .content .listing .listing_details li p {
      margin:0 !important;
    	line-height: 1;
    }
    HTML Code:
    <div class="content">
    	<div class="listing">
    		<img src="package_photos/thumbnails/tour1.jpg" alt="" />
        <ul class="listing_details">
        	<li>
    				<p><strong>Pilgrimage Excursion to Holy Sites & Mt Sinai, Cairo
    CAIRO</strong></p>
    				<p>Air Travel</p>
            <p>4 Days</p>    
        	</li>
        </ul>
      </div>
      
    	<div class="listing">
    		<img src="package_photos/thumbnails/tour2.jpg" alt="" />
        <ul class="listing_details">
        	<li>
    				<p><strong>Pilgrimage Excursion to Holy Sites & Mt Sinai, Cairo
    CAIRO</strong></p>
    				<p>Air Travel</p>
            <p>4 Days</p>    
        	</li>
        </ul>
      </div> 
       
    </div>
    Does anyone see what I'm doing wrong? Thank you in advance.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by donboe View Post
    Does anyone see what I'm doing wrong?
    You aren't giving us a live link.

    The CSS looks ok to me, but it would be much easier with a live link.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

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