scale a text input box

i need a text input box to be an exact size width and height, do i have to do this through code or can i do it via a tool in dreamweaver?

also, i am going to put this text box in a gif image using dreamweaver layers, will that work?
finnstoneAsked:
Who is Participating?
 
EsopoConnect With a Mentor Commented:
Ok, for the second part:

Yes, if you are planning to send  the information somwhere you'll be needing a form.

My table suggestion is quite simple really. You mentioned you wanted to have a gif  image and put the text box on top. You said you thought of layers for that part.  I suggested to use a simple table cause tables allow you to have a graphical background and normal information and controls (such as a textbox) on top.

Basically the table is just for the textbox, not for any other control and certainly not for the entire page.

Say your gif is 400 x 400 pixels. You make a table with the same size and set your gif file as the background of that table. For this case you'll be using a table with just one cell. Now that you have a 400 x 400 pixels table displaying your gif as background, you can put the textbox in the cell and it will be on top of the graphic; that is the code I posted above:

<table width="400" height="400" border="0" background="something.gif">
  <tr>
    <td><input name="textfield" type="text" style="height: 300px; width: 300px;"></td>
  </tr>
</table>

Notice how I set the border property of the table to 0 so it will display no border. The result is the textbox on top of the graphic. If you need to position your textbox in an exact position within the cell on top of the graphic (other than center, left, etc) use CSS style positioning, works just like the steps in my first comment, if you need help with this let me know.

Of course you'll be needing to put the table (with the textbox in it) within the form tags, something like:


<form action=something.asp method=post>

...some controls for your form...


<table width="400" height="400" border="0" background="something.gif">
  <tr>
    <td><input name="textfield" type="text" style="height: 300px; width: 300px;"></td>
  </tr>
</table>


...some more controls for your form + a submit button so you can send it...

</form>


Best regards,

Esopo.
0
 
EsopoCommented:
The first part:
You can do it both ways. Use CSS, you can write the code directly in code view or you can use the CSS Styles in the Design panel like this:

- choose: New CSS Style

- Name: .TextBox1
- Type: Make Custom type (class)
- Define in: This Doc only
      click -ok-

- Category: Box
- Width: your choice
- Height: your choice
      click -ok-

Now you have your CSS style named .TextBox1
Insert a new textbox and apply the style to it by selecting the textbox and clicking the style.

Thats it!

You can also do it by code, inserting this inside your head tags:
************
<style type="text/css">
<!--
.TextBox1 {
      height: 300px;
      width: 300px;
}
-->
</style>
************

And then somewhere in your body:
<input name="textfield" type="text" class="TextBox1">

Thats it!
0
 
EsopoCommented:
You can also add the style to the textbox directly in one line through code.
Say this is you textbox:
<input name="textfield" type="text">

Add the style:
<input name="textfield" type="text" style="height: 300px; width: 300px;">

A lot more simple, but I think you should get used to using CSS and the CSS styles in the Design panel, it's very easy to get around, fast and very powerful to manipulate your designs.

Now, for the second part:

I wouldn't use layers. They are messy, seems like browsers simply gave up on them and never fixed the bugs. It's not advisable to use layers anywhere, there are many solutions instead, I prefer using tables.
Insert a table, put your textbox inside, now assign a background image to either the whole table or the cell your textbox is in, like this:

<table width="400" height="400" border="0" background="something.gif">
  <tr>
    <td><input name="textfield" type="text" style="height: 300px; width: 300px;"></td>
  </tr>
</table>

Don't forget to make your table the size of the image (in this case 400 x 400).

Best regards,

Esopo.
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
finnstoneAuthor Commented:
cool thanks guys. first part seems nailed.

for the second part,

 i dont understand. are you suggesting i make a table that is the whole size of the web page and then only make one cell visible , the cell where i need the person to input their username? dont i need a form, and isnt there an easier way?
0
 
finnstoneAuthor Commented:
thx this is great!
0
 
EsopoCommented:
My pleasure.
0
All Courses

From novice to tech pro — start learning today.