Div around contact form

I sent one full working page with which you could replace your older file. It retains several HTML table attributes and adds the least new CSS.

The second file contains only the code for #apDiv5 and the form. It uses few HTML table attributes and more CSS. I could send that to you as a full working page if you prefer to use that method.

I believe you would prefer the first file because it uses the old HTML table coding methods.
If you want to use cleaner HTML and more CSS, then the second file would be the way to go.

Your choice.

ok ron thank you i will change row by row the old file for the first file and do it too to a new file for the second choice to look how it look the different and how it behaves

galia

I hope I’m misunderstanding, but you should be saving backup copies of your files.

Maybe not for minor tweak changes, but certainly for others.

I am usually sloppy and simply rename like
myfile → myfile1
newfile → myfile

upping the number each time.

A much better way (that I try to do for more important files) is to add a “datetime” like
myfile → myfile-2015-02-07
newfile → myfile

Of course the best practice way is to use a versioning system, but that discussion is out of scope here

2 Likes

Galia, you can double-click both of the files and open them in your browser and see how they behave. They both behave the same. There is no difference in their behavior.

The difference between the files is the way they are coded and I explained that above.

I do not understand what you are talking about “change row by row”. You should not have to make any changes to anything to test the files.

And you should be able to tell Dreamweaver to open one of them and add it to the project without changing your existing files.

I really do not understand/appreciate how difficult this is for you. Sorry.

Ron i though to change the codes of contact2 to do it by my self and i am still think to do it to the first file and do the same in the copy of the secound file
but as i understand you want me first to test the files and tell you how it goes it is correct?

galia

I would think that it would be to your advantage and in your interest to test the files in your browser (Chrome and Firefox) before expending a lot of time and energy changing files in Dreamweaver. Test first. If you like what you see, then change your file, if that’s how you work.

Can you open these files in Dreamweaver and look at the code in code view and design view without changing any of your project files?

As I said, I do not understand how you work.

yes ron i can see?

As I said, I do not understand how you work.

i want to copy and write by myself the code row by row to understand more

galia

OK, very good. When you copy the code, please copy “line-by-line” rather than “row-by-row” because you need to be sure to get all of the new CSS and delete the old HTML and CSS.

Dreamweaver does seem to like the first (older) method.

Not sure about the second method. The buttons are not vertical-align:bottom as they should be.

Good luck

OK, very good. When you copy the code, please copy “line-by-line” rather than “row-by-row” because you need to be sure to get all of the new CSS and delete the old HTML and CSS.

thank you ron and i do the copy code and by the way what is the difference in english line by line and row by row and do you know if in ie there is zoomtext? and in chrome i could not zoom on the text and yes i have zoom text do you know what to do?
thanks galia

Hello, Galia.

In English, the words “line” and “row” are very similar. Both words usually refer to something that is horizontally aligned. The difference in this case is one of common usage.

For example, we commonly refer to a “line” of text rather than a “row” of text.
Programmers often refer to the number of lines of code in a program.
We think of HTML and CSS and poetry as being made up of “lines”.

Chairs are aligned in rows. Spreadsheets have rows and columns (just like HTML tables).

When you mentioned row by row I was not sure if you meant “table-row” by “table-row” or “line by line”. A table-row would be made up of several lines of code which does not necessarily include the CSS, so I wanted to be sure I understood.

A “line” of people would not necessarily be straight nor oriented in any particular direction whereas a “row” of people would be expected to be horizontal and straight, such as soldiers in formation. English can be confusing sometimes.

No, IE and Chrome do not have the ability to zoom text only. I believe you downloaded a plug-in for Chrome that was supposed to allow you to do that, but it has not worked reliably. As far as I know, only Firefox comes with the ability to zoom text only.
EDIT: Please see @RyanReese’s next post. One CAN zoom text only in Chrome! Thanks, Ryan.

do to or do about what? I don’t understand.

2 Likes

You can increase the font size only in Chrome.

Top right corner hit the three line icon. A dropdown appears.
Hit settings
At the bottom, hit advanced settings.
Then, halfway down the screen, you will see a select dropdown for font size. Increase it there.
Not easy but you can do it.

2 Likes

Hi ryan!

Top right corner hit the three line icon. A dropdown appears.
Hit settings
At the bottom, hit advanced settings.
Then, halfway down the screen, you will see a select dropdown for font size. Increase it there.
Not easy but you can do it.

thank you i try that and yes it is increase the font size of the sites but not the page of my project sorry

galia

Hi ron!

Hello, Galia.

In English, the words “line” and “row” are very similar. Both words usually refer to something that is horizontally aligned. The difference in this case is one of common usage.

For example, we commonly refer to a “line” of text rather than a “row” of text.
Programmers often refer to the number of lines of code in a program.
We think of HTML and CSS and poetry as being made up of “lines”.

Chairs are aligned in rows. Spreadsheets have rows and columns (just like HTML tables).

When you mentioned row by row I was not sure if you meant “table-row” by “table-row” or “line by line”. A table-row would be made up of several lines of code which does not necessarily include the CSS, so I wanted to be sure I understood.
A “line” of people would not necessarily be straight nor oriented in any particular direction whereas a “row” of people would be expected to be horizontal and straight, such as soldiers in formation. English can be confusing sometimes.

first thank you for your great explained
and for that

do to or do about what? I don’t understand.
it is about zoomtext chrome if you know what to do that it do not work but you answer me on that

thanks galia

Hi ron!

I am sending to you the code how it look now and as you know i want to put divs to the page but first i what to ask you and i do not know if i do that but if it possible to put around or just on the bottom of the the text field border or make the frame of the text field more bold?

here is the code i am still not removed the test line:

contact2.html (6.1 KB)

thank you galia

Do you want to put a border around just the <textarea> box or do you want to put a border around each of the text fields so they all look the same?

Some Observations

You changed the position of the top of the form correctly. That’s good.

However, you removed the non-breaking space from between the two words in the top label. That was not so good because when those words wrapped, you then added padding to the button row to make the column wider and stop them from wrapping but doing that reduced the width of the text fields and changed the position of the buttons. You then changed the HTML attribute that positioned the buttons at the bottom of the table cells from valign=“bottom” to valign=“middle” unnecessarily and you compensated for the change in position of the buttons by increasing the height of the bottom row.

What do you want to do about those last changes?

(1) the non-breaking space served a purpose since I don’t believe Dreamweaver understands CSS {white-space:nowrap} (just guessing. I could be wrong).

(2) increasing the width of the column with the labels reduces the width of the text fields unnecessarily.

(3) changing the height and valign attributes of the button row was ??? unexplainable. Does valign=“bottom” not work in Dreamweaver? If it does not, then apply CSS {vertical-align:bottom} to the button cells and see if that works.

Dreamweaver is run off of an extremely old Opera engine (IIRC? Dreamweaver is so dated I’m trying to remember what engine it is…) and you are correct that it doesn’t render white-space:nowrap in Design view.

1 Like

Hi ron!

Do you want to put a border around just the box or do you want to put a border around each of the text fields so they all look the same?

i want to put border or make the frame of the box more bold around or just on the bottom of each of the text fields i want to know how it is look like that not sure i keep it like that

You changed the position of the top of the form correctly. That’s good.

ok thanks

However, you removed the non-breaking space from between the two words in the top label. That was not so good because when those words wrapped, you then added padding to the button row to make the column wider and stop them from wrapping but doing that reduced the width of the text fields and changed the position of the buttons. You then changed the HTML attribute that positioned the buttons at the bottom of the table cells from valign=“bottom” to valign=“middle” unnecessarily and you compensated for the change in position of the buttons by increasing the height of the bottom row

i removed the non-breaking space because i saw that it is not affect the space between the two words i changed from valign=“bottom” to valign=“middle” to put the buttons more inside to the middle and i changed the bottom row height because it look for me too much height
so what to do about that?

Does valign=“bottom” not work in Dreamweaver?

it is works look like on the web but i wanted to change the position

thanks galia

Please make a screen shot of the page and draw “pretend” borders where you want them on the screen shot with your favorite drawing program. When you decide what you like, send the screen shot to me and I will help you write the code.

Why do you think I put it in the code? What did you see that made you believe it was not affecting the space between the two words?

It was doing EXACTLY what a non-breaking space is supposed to do. The non-breaking space put a space between the two words and prevented them from wrapping. Did you not see that as soon as you removed that non-breaking space the words wrapped? The non-breaking space was doing exactly what it was supposed to do.

Those changes were not appropriate. I will send you another page on which those styles have been repaired.

If you want to change anything, please talk with me about it first. I think the logic in the code used in your page will make more sense to you if we can talk about one item/change at a time.

contact2-20150302a.html (6.2 KB)

Hi ron!

Please make a screen shot of the page and draw “pretend” borders where you want them on the screen shot with your favorite drawing program. When you decide what you like, send the screen shot to me and I will help you write the code.

here are the options of what i was thinking (it is before i was putting the new changing):

that

or

Why do you think I put it in the code? What did you see that made you believe it was not affecting the space between the two words?

look at the images in the first answers that was making me believe that that no need to use that code i did not know it is also prevent wrapping of the words i thought it is just code for a space between words in the images that are up there is still space between the words and the words are not wrapping even i did not put that code why is that ?

about the code that you sent to me i change it like you did( not change yet the space code) i want to know what your answer will be about the previous question and i have questions about the code that you sent also:

1. on that why i can’not put this style if i want?

border-bottom:2px solid black; /* DO NOT PUT THIS STYLE in-line in the TABLE TAG */

2.on that why it is make you so frustrated what it is wrong about that?

border: thin solid #093; /* WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? WHY? */

and look at the new image now what do you think yes it look like the words wrapping like you said but i think it is because the cell is too small

the code

contact2.html (6.2 KB)

thank you galia

Questions good!

I’ll start with this last question if I may because the first ones will require more preparation time.

Given: Tables normally shrink-to-fit and table-cells normally conform to fit their content (if more than 1 row, then columns conform to/match the widest cell).

Given: A non-breaking space puts a visual space between words that looks the same as an ordinary space, but the words will not wrap at that space (that’s why it’s called non-breaking). This is useful if you want to keep a person’s first and last name together. Separate them with a non-breaking space and they will remain together on the same line.

Explanation: In this table, the contents of the left column (input and textarea {width:100%}) push against the right column. The width of the right column is maintained by the width of the words in that column plus 4px of left paddng. FYI: there is another width setting in the .buttons row where the first cell says width=“60”. That width value could be anything between 1 and 60. I picked 60 because it is slightly narrower than the width of the words. 1 would have been just as effective. If you wanted the column to be wider than the widest word, then changing 60 to something greater, such as 80, would be the way to do it. I intentionally didn’t do that. I made the first column slightly narrower than the widest word. I then added a non-breaking space between the item with two words so it would be the widest label in the menu and stay on one line. The slightly narrower 1st column and the label with the non-breaking space allows us to maximize the space in the left column so the user has as much room as possible to write. Again, I will remind you that the width of column 1 could have been less than 60 and there would be no visible difference in anyone’s browser (unless they zoomed the text smaller which is unlikey to happen). In summary, the width of the first column is set in the button row, first cell, or by the width of the words themselves, whichever is greater. I chose to use the width of the words.

height of button row

You changed the valign attribute from bottom to middle in the button row as well as the height of the button row in order to change the space between the buttons and the row above them. All you needed to do was decrease the height of the button row in column 1. (Is button row column 1 starting to sound familiar.?) Because the buttons were vertically aligned against the bottom of their cells, valign=“bottom”, decreasing the height of the first column raises the buttons and does not add wasted space beneath them like valign=“middle” does.


Do the above explanations make sense?


I will talk about the nav menu and the green border and the black border in my next post after I’ve made some screen shots.