SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: photo problem

  1. #1
    SitePoint Guru
    Join Date
    Mar 2006
    Posts
    701
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    photo problem

    I have this div with the style bellow.
    When I add padding-bottom to #newproduct #newproducttitle the div newproduct is destroyed.(The background image is shown left and the other image at right of the middle content.
    How can newproducttitle and newproduct have some pxs between them ?
    I want to do the same for the offer div.
    I hope to be undestood.
    Code:
    <div id="firstpage">					
    <div id="newproduct">
    <span id="newproducttitle">
    product</span><br />
    <img src="images/product.jpg" alt="" /></div>
    <div id="offer">
    <span id="offertiitle">offer</span>
    <br />
    <img src="images/offer.jpg" alt="" /></div>
    <div style="clear: both;">&nbsp;</div>
    ......
    </div
    Code:
    #firstpage
    {
     margin-left: 0px;
      margin-right: 0px; 
     float:right;
     height:600px;
    }
    #newproduct
    {
     position:relative;
     margin:4px 0 0 0px;
      padding:0 px 10px 0; float: left;
    }
    #newproduct #newproducttitle
    {
    padding-left:.3em;
    float: left;
    width: 312px;
     border: none;
    	color: #FFFFFF;
    	margin-bottom:.01em;
    	padding-bottom:.01em;
     background:  url(images/newproduct.jpg) no-repeat  ;
    }
    
    #offer
    { position:relative; margin:5px 0px 0 6px; 
    padding:0 0px 0px 5px; float: left;
    }
    #offer #offertiitle
    {
    padding-left:.5em;
    
    float: left;
    width:311px;
    
     border: none;
     color:#FFFFFF	;
    	 overflow:inherit;
     background:url(images/month_offer.jpg) no-repeat;
    }

  2. #2
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe your second id is overwriting your first id. Can't give you the specifics as to why (Paul, Ralph, XHTML?)

    so in essence newproduct is not used and newproducttitle styles are being used.

    why not put newproducttitle in a class? That way newproduct stays intact and newproducttitle should follow.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You have a typo here which is killing the padding on newproduct.

    Code:
    #newproduct {
        position:relative;
        margin:4px 0 0 0px;
        padding:0 px 10px 0;
        float: left;
        background:red
    }
    That will invalidate the padding and it will be ignored.

    It should be:

    Code:
    #newproduct {
        position:relative;
        margin:4px 0 0 0px;
        padding:0px 10px 0;
        float: left;
        background:red
    }

  4. #4
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh Paul you always correct me. I need to read thoroughly before posting.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by AtSea webdesign View Post
    Oh Paul you always correct me. I need to read thoroughly before posting.
    No worries. I didn't really understand the question but spotted the typo and went for it


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
  •