Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

scale a text input box

Posted on 2004-04-22
6
Medium Priority
?
249 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
[X]
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
  • 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
[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

 
LVL 14

Accepted Solution

by:
Esopo earned 2000 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

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 article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
Sometimes it takes a new vantage point, apart from our everyday security practices, to truly see our Active Directory (AD) vulnerabilities. We get used to implementing the same techniques and checking the same areas for a breach. This pattern can re…
In this video, Percona Director of Solution Engineering Jon Tobin discusses the function and features of Percona Server for MongoDB. How Percona can help Percona can help you determine if Percona Server for MongoDB is the right solution for …

721 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