CODEWITHSUNDEEP
htmlcsstextarea
user1648409
user1648409

Reputation:

HTML textarea positioning with css

i am currently trying to position a textarea with CSS and to make it look nice. However it's not working.

Relevant CSS:

#BoardInput {
padding:0px;
width:100%;
height:100%;
}
#BoardSmiley {
min-width:100px;
width:20%;
padding:10px;
border-right:thin solid #4E6011;
border-bottom:thin solid #4E6011;
background-color:#C6E466;
}
#BoardCode {
 border:thin solid #4E6011;
background-color:#C6E466;
padding:3px;
}

Relevant HTML:

<div id="BoardCode">
    <button onclick="addBBCode('[FETT]','[/FETT]');">Fett</button>
    <button onclick="addBBCode('[KURSIV]','[/KURSIV]');">Kursiv</button>
    <button onclick="addBBCode('[UNTERSTRICHEN]','[/UNTERSTRICHEN]');">Unterstrichen</button>
    <button onclick="addLink();">Link</button>
    <button onclick="addImage();">Bild</button>
</div>
<form action="index.php?s=board&action=addedit&where=<?=$Result['Overview']['PostID']?>" method="POST">
<table id="Board">
    <tr>
        <td>
              <textarea id="BoardInput" name="Text"></textarea>
            <input type="hidden" name="ThreadID" value="<?=$Result['Overview']['ThreadID']?>" />
        </td>
        <td id="BoardSmiley">
        <?php
        $BoardTemplate->showSmileys();
        ?>
        </td>
    </tr>
    <tr colspan="2">
         <td><input type="submit" value="OK" />
    </tr>
</table>
</form>

The problem is that i want the "Code" Box at the top, the Smileys-Box at the right and the textarea at the left. And i want them to be fully adjusted to each other. However the textarea is 1px more intented to the right than the Code box above and 2px more intented to the top than the Smileys-Box on the right.

What am i doing wrong here?

EDIT:

jsFiddle: jsfiddle.net/SSxSN and an image:

enter image description here

Upvotes: 2

Views: 10781

Answers (2)

user14510706
user14510706

Reputation: 27

Use:

resize:none;

in your css code in textarea.

Upvotes: 1

darwin
darwin

Reputation: 240

Add negative margins for left and bottom, like this:

#BoardInput {
    padding:0px;
    width:100%;
    height:100%;
    margin: 0 0 -8px -1px;
}

http://jsfiddle.net/SSxSN/1/

Upvotes: 0

Related Questions