I have made two boxes as you can see in the pictures below but Im struggling to add text into the box they always seem to end up outside the box I want it it.

 

 

 

Any help.

Got a link? or some code we can go from?

 

You're going to need to use relative positioning for something like this.

<div class="matchbox">

                <img class="nextmatchpic"/>


              Saturday, 28th August 2010
              Stoke City
              Competition: Premier League
               Stadium: anfield

		   <img class="lastmatchpic"/>

              </div>

 

 

Here is the css code aswell

 

 .matchbox { 

  background:transparent url(http://www.talkthereds.net/matchboxbg.png) no-repeat scroll 0 0;
  border:1px solid #CFCFCF;
  width:608px;
  height:130px;
  margin-top:3px;

}

.nextmatchpic {
 -moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
background:transparent url(http://www.talkthereds.net/NextMatch.png) no-repeat scroll 0 0;
color:#FFFFFF;
float:left;
height:120px;
padding:0;
width:295px;
margin-left: 6px;
margin-top:5px;
margin-bottom:5px;


}

.lastmatchpic {
 -moz-background-clip:border;
 -moz-background-inline-policy:continuous;
 -moz-background-origin:padding;
 -moz-border-radius-bottomleft:4px;
 -moz-border-radius-bottomright:4px;
 -moz-border-radius-topleft:4px;
 -moz-border-radius-topright:4px;
 background:transparent url(http://www.talkthereds.net/LastMatch.png) no-repeat scroll 0 0;
 color:#FFFFFF;
 float:left;
 height:120px;
 padding:0;
 width:295px;
 margin-left: 6px;
 margin-top:5px;
 margin-bottom:5px;


}

The only thing I can think of, is not using the img tag. Try using a div. Because you need to contain the text in something.

The only thing I can think of, is not using the img tag. Try using a div. Because you need to contain the text in something.

 

No luck on that buddy.

You need to set the lastmatch/nextmatch images to be the background of the container which holds the text, at the moment they just sit as images. Something along the lines of:

 

<div class="nextmatchbg">

Saturday, 28th August 2010

Stoke City

Competition: Premier League

Stadium: anfield

</div>

 

.nextmatchbg {

background:transparent url(http://www.talkthereds.net/NextMatch.png) no-repeat scroll 0 0;

color:#FFFFFF;

height:120px;

padding:0;

width:295px;

}

 

Then put that into whatever other container you want, and set padding or whatever on the nextmatchbg class to format the text inside it.