Div/css help

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.

 

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

 

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

 

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.

 

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.

 

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):

 

Hi i have now fixed it you can see it here working how i wanted it.

Thanks for all your help