Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

scale a text input box

Posted on 2004-04-22
6
244 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
website template 12 344
ENTRY AGE IN A REPEATING REGION, DREAMWEAVER 10 413
Issue when emailing and there is a space 7 402
Remove LF from html text 5 417
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 use Hyena, from SystemTools Software, to bulk import 100 user accounts from an external text file. View in 1080p for best video quality.

840 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