Solved

scale a text input box

Posted on 2004-04-22
6
243 Views
Last Modified: 2010-05-18
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?
0
Comment
Question by:finnstone
  • 4
  • 2
6 Comments
 
LVL 14

Expert Comment

by:Esopo
ID: 10896788
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
 
LVL 14

Expert Comment

by:Esopo
ID: 10896826
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
 

Author Comment

by:finnstone
ID: 10896906
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 14

Accepted Solution

by:
Esopo earned 500 total points
ID: 10900326
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
 

Author Comment

by:finnstone
ID: 10901725
thx this is great!
0
 
LVL 14

Expert Comment

by:Esopo
ID: 10905257
My pleasure.
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question