Solved

scale a text input box

Posted on 2004-04-22
6
241 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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
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…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …

706 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now