Div around contact form

Hi ron!

long time no hear ah sorry about the delay :smirk: so first of all before i adds the new divs i want you to help me with the form menu according to my plan (see image) do you think i have to increase again the notebook image and if i do not want to do and i want it like it is now but like in my plan so what to do?

the plan


the image

how the page look right now

the code
contact2.html (6.8 KB)

thanks galia

Welcome back, Galia. I hope you had enjoyable holiday.

I cannot tell what you want me to do. The new notebook image is about the same size as the previous one but this one has a cleaner page under the form so the form is easier to read. It might help if the notebook image were a couple of cm wider… the form would fit better.

Your code is much easier to read than it was before. You’ve been busy and it shows.

It seems like a good time to go ahead and post your code with the new divs so we can compare the old and new.

Hi ron!

thank you ron but the code is like it was before i think like you show me to change
and now i want to know how to fit the table form to this image may be to resize it how to do that if it can and if it not i will do it wider?

thanks galia

I will prepare some suggestions based on the current notebook image. The fields seem fairly narrow to me (using Firefox), which is why I suggested making the image at least a couple of centimeters wider, especially the right side of the image. But we can keep the image this size if you wish.

I would like for you to text the <textarea> field and decide it you like the way it works now or if you want it changed. Click the “resize” triangle in the lower left corner of the <textarea> field and drag it left, right, and down the window. See how the <textarea> field resizes. Is that OK with you? If it is not, you will have to consider using more CSS.

One last question. Do the JavaScript navigation menus work properly for you? The don’t for me. I do not see the “current page” icon as silver and I do not see any icon turn silver when the mouse hovers over it. Do the navigation menus behave correctly for you?

can you show me what do you mean?

One last question. Do the JavaScript navigation menus work properly for you? The don’t for me. I do not see the “current page” icon as silver and I do not see any icon turn silver when the mouse hovers over it. Do the navigation menus behave correctly for you?

yes they are

Yes, of course.

This is the <textarea> field and its resize triangle as it appears in your form.

When I click the resize triangle and drag it around the window, I see that the <textarea> field can be made very small.

I also see that the <textarea> field can be made very large.

How does it behave for you when you test it?

Hi ron!

thank you and do you mean to do that on the browser? so i did but i can just to make it larger and see how the form look right now

thanks galia

Yes, that is what I mean. Firefox and Chrome behave differently in some cases.

Cross-browser testing is important. You really should have Firefox on your computer so you can test your project in different browsers. Your instructor said that the first project should have been tested before it was submitted.

Anyway, back to the resize triangle and form behavior. This is how you learned to make a form. If you are happy with this behavior, then we will move on and make the form fit into the notebook image… unless you want to make the notebook image a little wider. That was another question that your asked and I said it was a good idea.

So, what would you like to do next?

ok i want that the form will fit to the notebook image but i have to ask if it will be too small?

You can certainly make a wider image with Photoshop and see how it looks.

You can also try typing information into the form as if you are a typical user and see if there is enough room in the form fields for the person’s name, e-mail address, or whatever you are requesting.

Just let me know when you have decided.

but i do not know how it will look with a smaller field to decide and what is more Convenient to do wider or smaller?

thank you galia

I guess you will have to experiment using width values that are narrower than those that you’ve chosen.

Or you could use your artist’s intellect and perhaps Photoshop to imagine how a narrower form might look over that notebook image. Just like you could make the notebook image a little wider and see how the existing form looks over it (which was my suggestion). Don’t forget to practice entering text in the form fields so you can estimate whether or not narrower will work for your users.

You are the designer. That is a decision that you must make.

Hi ron!

so ron i am sending to you two options in photoshop i could not do it in dreamweaver it is an images how they look wider or smaller sorry i did not send sooner but my keyboard and my internet was shut down but now it is ok what do you think i have to do I would like to do the smaller one but if i have to do the wider i do it if it is more useful for the users
and by the way someone from this discussion send me a message and file that he solved my problem do you want to see it?

the images

the wider

the smaller

thanks galia

Did you try it? Did it solve your problem? I don’t remember seeing it. What is the message number of that post?

In the meanwhile, I’ll see what I can do.

Did you try it? Did it solve your problem? I don’t remember seeing it. What is the message number of that post?

no i did not try it i got this message just recently( in 5 january) i thought is from you the message supposed to be after your recent message do you what to see it?

thank you galia

There were some bogus messages posted yesterday (the 5th) which were removed by the moderators. If it was posted in this thread, then it sounds like the message you have may be one of them. If so, it is just a solicitation and is of no value. If it was a PM, then you may post it if you wish. Please use your judgement.

Galia,

Using the smaller notebook image, this is a screenshot of the form in Firefox and Chrome on my PC.

I can make changes to the height of the form, the width of the fields, or positions of the buttons, if you wish.

You said that you want to keep the Dreamweaver nested tables. I did not change ANY of the table tags. However, to make the form fit like this, I added some classes to the table tags, used some CSS, and deleted unnecessary table attributes such as width, align, valign, and border. Those attributes were replaced by CSS. Some of the CSS is necessary to achieve the appearance that you see in this screenshot; some just helped clean up the HTML.

If using the CSS is OK with you, then I can send the code in my next post. If it is NOT OK, then you will have to remind me what is OK to use and what is NOT OK.

the message were send to me in 13:15 what do you think?

Hi ron!

first is it the image that you sent is it more wider than the smaller image that i sent?

I can make changes to the height of the form, the width of the fields, or positions of the buttons, if you wish.

yes that what i want i send you an image exactly how i what it will show (see image)

You said that you want to keep the Dreamweaver nested tables. I did not change ANY of the table tags. However, to make the form fit like this, I added some classes to the table tags, used some CSS, and deleted unnecessary table attributes such as width, align, valign, and border. Those attributes were replaced by CSS. Some of the CSS is necessary to achieve the appearance that you see in this screenshot; some just helped clean up the HTML.

if it not harm the javascript of the form it is ok to use css and if not to use css what are the options?

the image

thanks galia

You have a very good eye, Galia. You are right, I used the wrong notebook image. This image came from post #364.

Please take a look at this screen shot and see if it is satisfactory. Please talk about anything that does not look right or that you would like to have changed.