centered css textarea with character limit

Question

I'm new to stackoverflow and new to web development as well. I believe the first part of what I'm trying to do should be easy, but I'm having quite a bit of trouble figuring it out.

The first style obviously centers my background image and that seems to work fine. What I'd like to do next is add 3 elements to the page. 1. A graphic, 2. A fixed size textarea that limits the amount of characters entered to 300 characters, and 3. A submit button.

I'd like all of these elements to be centered. The textarea should be directly centered, the graphic should be aligned to the left edge of the text area and 10px above it, the submit button should be aligned to the right and 10px below it.

Here's what I have:

html { 

        background: url(field1.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;  

    }

#box {

    position: absolute;
    background-image:url(textarea.png);
    height: 250px;
    width: 550px;
    border-radius: 5px;
    margin: -125px 0 0 -275px;
    top: 50%;
    left: 50%;

}


#button {

    position: absolute;
    background-image:url(button.png);
    height: 55px;
    width: 151px;
    top: 260px;
    left: 399px;
    border-radius: 5px;
}

#graphic {

    position: absolute;
    background-image:url(graphic.png);
    height: 58px;
    width: 184px;
    top: -328px;
    left: -399px;
}

<div id="box"></div>
<div id="button"></div>
<div id="graphic"></div>

I have 3 DIVs, one for each of the elements in my HTML and I'm wondering how to add the textarea so that it's just a cursor within the centered box that limits to 300 characters.

At the moment I'd just like to get everything lined up properly with the textarea working. Then i'll work on submitting the text from the box, storing it, and using it to do a bunch of things. Any help would be very much appreciated. Thank you.

Answer 1

Like this? http://jsfiddle.net/zFcHp/3/ - I limited it to 10 not 300 because 300 is really irritating to test :). Just change the maxlength attribute.

Also be aware that you STILL need to check the length of the string coming back from the client, since anyone with firebug, or any one of a hundred other tools can unset your limitation on the client side and send you anything they like. They could even download the code for Firefox, and modify it to violate any web standards rule they want then recompile... Never trust the client to enforce anything!