I need help creating a box.

I am making a website and need help making a box that looks good for me just to type in before I upload the files. I don't want just a basic rectangular shape box that looks ugly. I want a box that looks like this.



If anyone can give me the HTML code, it would be appriciated.

Thanks.

 

Do you just want a table ? or do you want to code the text into the image ( 2 ways, just html or css & html )

 

I just want the table and then I can write in that table.

 

i think you mean a text area
put this code.
<textarea></textarea>

 

<table board="1"> text here </table>


see if you like that

 

@ mssarath - No I don't mean a text area, I mean an area just like a text box that only i can type into before I upload the pages to my host and then when I view them it just seems like a border around my text.

@ Emailsforlife - When I put that in, nothing comes up accept the text I put in. Any other ideas?

 

That requires a form control, textarea. Form controls have limited stylability. Roger Johansson has done a bunch of form control tests and presents his results, with screen shots, for several platforms and browsers.

cheers,

gary

 

If you want an upload box use CSS. Otherwise... use CSS

Chop up your image so that you have the top part of your box, the content part, and the foot part and use background-image as it says in the code

<style>
  .head{  	
    /* slice your image so that you have the curved top part    */
    /* and use background-image: url("images/YOUR_IMG.gif"); */
    /* instead of background: #123456; Do the same for foot   */
    background: #000000;
    width: 300px;
    height: 30px;
  }
  .content{
    background: #CCCCCC;
    background-repeat: repeat-y;
    padding: 10px;
    width: 280px;
  }
  .foot{
    background: #F2F2F2;
    width: 300px;
    height: 30px;
   }
</style>

<div id="box">
   <div class="head"><!-- head --></div>
   <div class="content">test</div>
   <div class="foot"><!-- foot --></div>
</div>

Code (markup):

 

I'll show you guys what I mean, go here : http://www.directoryofpoker.co.uk/ and look on their homepage at their boxes,

 

what you want is text area, but you want to change its looks , - use CSS.

 

No, text areas allow anyone to type in them. I'm not sure you understand what I want.

 

This is reallyyyy basic HTML / graphic design that you are trying to accomplish here. I will try to walk you through it ... first, open up Photoshop or some other graphic design program. Create the box in this program. Then, cut off the top 20 pixels or so and save it as a graphic called, let's say, "table_header.jpg". Then, cut out a section of the "middle" portion of the box that is at least 10 pixels tall. Save that as a graphic called "table_bg.jpg". Repeat the same process with the bottom 20 pixels of the box, and name it "table_footer.jpg". Then, create a table in HTML which has border=0, cellpadding=0, and cellspacing=0 and which is the exact same width as the image files you saved, and which has 3 rows. Put the "table_header" graphic in the TOP row, set the "table_bg" graphic as the BACkGROUND of the MIDDLE row, and insert the "table_footer" graphic in the BOTTOM row. If you did it right, you can put whatever text you want in the MIDDLE row and it will automatically expand (vertically) while keeping your text "in" the original box.

This is not the BEST way to accomplish what you are trying to do, but it is the most simple html-wise.

Good luck,

-Phil

 

Here's an example of three images created for the same purpose as I described above:

tommillsrealestate.com/graphics/header_welcome.jpg
tommillsrealestate.com/graphics/right_bg_1.jpg
tommillsrealestate.com/graphics/right_footer_1.jpg

<-Put HTTP:// in front of these urls, the damn forum wouldn't let me post live links yet.

When lined up in a table they create the box effect you are looking for. Hopefully looking at these will make more sense of the post i made above.

-P

 

Excatly. I gave CSS code to do it up there ^ Just make images like these and throw them together with the code I gave and you have yourself a working box.

 

In a nutshell, you'll want to create or use some images you have that look like the ones on the sample page you showed, then set them as a background in a table either using html or css coding. Once you have the image or images set as a background, then you'll enter the text in the content area like you normally would.

Debs