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.

HTML included. I don't have much. It's basically just 3 DIVs. I'd like to include the textarea transparently above the "box" div. Basically, I just want the user to type something and hit the button. The 3 DIVs are working, and lined up properly, along with the background image.. so i'm all set except for this transparent text area. — stokexx, Sep 13 '12 at 23:01

Gus · Accepted Answer · 2012-09-13T18:50:49.157

0

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!

edited Sep 13 '12 at 18:50

answered Sep 13 '12 at 18:45

Gus

6,719
6
37
58

That does help a bit, thank you. I'm still confused how I can create a text area over top of the box that i've already styled. I'd really like to make the textarea transparent except for the actual cursor and the text that's inputted by the user. – stokexx Sep 13 '12 at 22:56
I believe I answered the original question already, but here's the transparent effect. http://jsfiddle.net/zFcHp/4/. If my answer was useful you should upvote it. If I've solved the question you posed you should also give it a green checkmark. Thanks. – Gus Sep 14 '12 at 15:20
Note that enclosing in divs works just the same as the example with the br tags... http://jsfiddle.net/zFcHp/5/ – Gus Sep 14 '12 at 15:25

centered css textarea with character limit

1 Answers1