Div/css help

Discussion in 'CSS' started by joesgraphics, Feb 22, 2007.

  1. #1
    Hi i need help with placeing some text on a image iv made the css but only half of it is working here is the css and code im useing.

    css:
    
    .bid-info{
    background: url(images/info-body.gif);
    width:575;
    height:151; 
    }
    
    .bid{
    color:#ffffff;
    line-height:20x;
    font-size:20px;
    font-family:"Trebuchet MS";
    padding-top:55px;
    padding-left:45px;
    }
    
    .cbid{
    color:#ffffff;
    line-height:20px;
    font-size:10px;
    font-family:"Trebuchet MS";
    padding-top:37px;
    padding-left:37px;
    }
    
    .bid-title{
    color:#ffffff;
    line-height:0px;
    font-size:20px;
    font-family:"Trebuchet MS";
    padding-top:0px;
    padding-left:170px;
    }
    
    .bid-desc1{
    color:#ffffff;
    line-height:20px;
    font-size:20px;
    font-family:"Trebuchet MS";
    padding-top:15px;
    padding-left:170px;
    }
    
    .bid-desc2{
    color:#ffffff;
    line-height:20px;
    font-size:20px;
    font-family:"Trebuchet MS";
    padding-top:5px;
    padding-left:170px;
    }
    
    Code (markup):





    Divs:
    <div class="bid-info">
    
    <div class="bid">£99</div>
    <div class="cbid">Change Bid</div>
    <div class="bid-title">Title</div>
    <div class="bid-desc1">Desc 1</div>
    <div class="bid-desc2">Desc 2</div>
    
    </div>
    
    HTML:

    you can view an example of the image here

    and a example of the example of all the code here and i have just seen in firefox the image is going 100% across the screen u should eb able to see were i need the title and desc1 and 2 should be.

    if any 1 can help would be great. :)

    Thanks in advanced.
     
    joesgraphics, Feb 22, 2007 IP
  2. unitedrokz

    unitedrokz Peon

    Messages:
    86
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    the problem is with all the padding you are using on each div - because they are all relative they are affecting each other.
    you can make all the divs absolute positioned to fix it easily enough - but there is probably a better solution than that
     
    unitedrokz, Feb 22, 2007 IP
  3. CollyMellon

    CollyMellon Peon

    Messages:
    749
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Replace this:

    .bid-info{
    background: url(images/info-body.gif);
    width:575;
    height:151;
    }

    With this:

    .bid-info{
    background: url(images/info-body.gif) no-repeat left top;
    width: 575px;
    height: 151px;
    }

    Should sort it out, CollyMellon
     
    CollyMellon, Feb 22, 2007 IP
  4. joesgraphics

    joesgraphics Peon

    Messages:
    206
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Ok thanks that fixed the image problem just have to postion the text now i did try absolute position but then the text was not showing i dont no why.
     
    joesgraphics, Feb 22, 2007 IP
  5. boyponga

    boyponga Banned

    Messages:
    1,013
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Try to change the color of your text. And about the design, if you know slicing in Adobe Photoshop then combine all using just CSS background-image code.
     
    boyponga, Feb 23, 2007 IP
  6. nwk

    nwk Well-Known Member

    Messages:
    385
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    158
    #6
    I'm not clear where you actually want the texts to be but try this code and check if their positions are in the positions you want them to be.
    
    .bid-info{
    background: url(http://www.chetos.es/test/link-bid/images/info-body.gif) no-repeat;
    width:575;
    height:151; 
    }
    
    .bid{
    color:#ffffff;
    line-height:20px;
    font-size:20px;
    font-family:"Trebuchet MS";
    padding-top:10px;
    padding-left:45px;
    }
    
    .cbid{
    color:#ffffff;
    line-height:20px;
    font-size:10px;
    font-family:"Trebuchet MS";
    padding-top:37px;
    padding-left:37px;
    }
    
    .bid-title{
    color:#ffffff;
    line-height:0px;
    font-size:20px;
    font-family:"Trebuchet MS";
    padding-top:0px;
    padding-left:170px;
    }
    
    .bid-desc1{
    color:#ffffff;
    line-height:20px;
    font-size:20px;
    font-family:"Trebuchet MS";
    padding-top:15px;
    padding-left:170px;
    }
    
    .bid-desc2{
    color:#ffffff;
    line-height:20px;
    font-size:20px;
    font-family:"Trebuchet MS";
    padding-top:5px;
    padding-left:170px;
    }
    
    
    Code (markup):
     
    nwk, Feb 24, 2007 IP
  7. joesgraphics

    joesgraphics Peon

    Messages:
    206
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Hi i have now fixed it you can see it here working how i wanted it.

    Thanks for all your help :)
     
    joesgraphics, Feb 24, 2007 IP