Div around contact form

Hi ron!

So ron i have a questions:

About the exercise tell if i am right is it 60px is a permanent size and when you do 1px that you said that is default size the size could be changed?

  1. Watch the column shrink to almost 1px.

I finish the exercise but where do you see that that the size of the column shrinks to 1 px in this step (see image)?

when the size is 1px is it like 60px is it the same?

Would you rather use CSS {white-space:nowrap} instead of the old non-breaking space thingy? That would be an impressively modern choice !!!

For now i will stay with the old non-breaking

thank you galia

In step one, you were supposed to remove ALL of the words from the first column, not the first row. It looks like the labels are still in the first cell of rows two, three and four.

Try again, and remove all of the words from the first cell in each row (remove all of the labels from the first column, in other words).

The first column should shrink to about 4px wide. (Remember, that the first column contains padding-left:4px so that will affect the minimum width that you measure on the screen.)

Hi ron!

Try again, and remove all of the words from the first cell in each row (remove all of the labels from the first column, in other words).

Is it good right now?

The code:

contact2.html (6.0 KB)

The first column should shrink to about 4px wide. (Remember, that the first column contains padding-left:4px so that will affect the minimum width that you measure on the screen.)

were do you see that the first column shrink to 4px and were do you see that the first column contains padding left 4px?

And how do you Measure With the screen Calipers the width of the column right now (that you said that it shrinks to 4px)?

thanks galia

Yes, that step is very good. Exactly what you should expect to see.

I gave myself some “wiggle room” when I said “about 4px”, because the table algorithm adds some space to the width of the first cell and I did not know how much space that might be. I measure a width of 9px now. The exact number is not important, though. The important point is that the right table cell will hug its contents snugly and leave as much width as possible for the left cell and its contents.

After you put the label words back in the first column, reduce the font-size with Firefox and you will see the right column width shrink to fit the text instead of remaining 60px wide.

(line 44)

form td:first-child {padding-left:4px;}

Hi ron!

After you put the label words back in the first column, reduce the font-size with Firefox and you will see the right column width shrink to fit the text instead of remaining 60px wide.

So i did is it good,see?

The code:

contact2.html (6.0 KB).

And i have questions:

  1. If leave the table lines how can i do that on the first word that not will be close to the line of the cell as you see on the image above?

  2. What the difference between 60px to 1px default size (if i do 60px is it do not fit the world’s width or something like that)and is it good to do every time 1px default size and not regular width size?

thank you galia.

Yes, it looks like the left columns are allowed to expand to fill all of the available width if the font size is reduced.

Do you understand that sometimes you may not wish the column widths to change, so you would stick with fixed width sizes. In this case, because the form is so narrow, maximizing the width available to the left column seems like a good idea. Designer’s choice… your choice.

Both of those ideas in that sentence are very bad. First, the dotted blue outline was added as a test outline to help you see how the cells and their contents are positioned on the page. Compare the blue outlines to the gray outlines from your original code in Dreamweaver in post number 67 and you can see how much simpler the code is now and how much better it fits on the page. That is the purpose of the dotted blue outlines.

It is added in this line of CSS.

form td {outline:1px dotted blue;}  /* TEST Outline.  To Be DELETED! */

If you add padding to the right side of the cells with the labels in the right column, then you reduce the width that is available for the user in the left column by the same amount.

Finally, the dotted outline is ugly. It contributes nothing to the usability of the page, IMO.

You can add wasted space to the right of the labels by changing this line of CSS:

from

form td:first-child {padding-left:4px;}

to:

form td:first-child {padding-left:4px;padding-right:4px;}

However, I do NOT recommend it because none of the “extra” lines are needed; therefore, it would be squandered width.

Please re-read the last several messages and examples. The purpose of the examples was to demonstrate the difference between applying 1px or 60px to the width of the first column.

I do not know what the “world’s width” means.

You can choose whichever method of asserting the width of the right column that you wish. I give you my recommendations along with explanations for them. The final decisions are yours.

Every situation is not the same. A coder makes decisions based on the situation. There is no “always” or “never” answer to this question. There is only “it depends on the situation”.

Hi ron!

Do you understand that sometimes you may not wish the column widths to change, so you would stick with fixed width sizes. In this case, because the form is so narrow, maximizing the width available to the left column seems like a good idea. Designer’s choice… your choice.

Yes i understand what you say but if the table depended on the background is in it you want to prefer to do fixed size and yes you can change the width background but if you can not?

Both of those ideas in that sentence are very bad. First, the dotted blue outline was added as a test outline to help you see how the cells and their contents are positioned on the page. Compare the blue outlines to the gray outlines from your original code in Dreamweaver in post number 67 and you can see how much simpler the code is now and how much better it fits on the page. That is the purpose of the dotted blue outlines.

I forgot it was just an outline line i thought it is the lines of the table but then again i want to see how it look if i show the lines of the table so i did like you told me to with the code you send to me how it looked with the lines of the table there it is ( but it is not really the lines of the table is in it but in the same look but now it is good with the first words thanks).

the code
contact2.html (6.1 KB)

And by the way what is IMO?

Please re-read the last several messages and examples. The purpose of the examples was to demonstrate the difference between applying 1px or 60px to the width of the first column

Ok i will

I do not know what the “world’s width” means.

I got confused i meant word width

thanks galia

I am not sure how to answer this question. I believe we have talked about this already and decided that the choice (the decision) is the designer’s, yours, and it depends on the situation, the layout.

While there are coding advantages in this form for choosing width=1 instead of width=60, I do not believe that the difference between using width=1 and width=60 really matters very much to the end user. The page will probably look the same to almost everyone. In my opinion, the winner will be YOU if you understand why width=1 is the better choice in this case and when it might not be the best choice. You have asked the right questions. Eventually, with experience, you will understand which is the best choice and how to write the code that achieves your goal.

The extra padding on the right is wasted space if the table cells do not have a visible border. Your original layout plan and code showed Dreamweaver outlines, not table cell borders.
If you want to see the table and table-cell borders, turn OFF the outlines (comment out the CSS line mentioned in post #658) and temporarily change the HTML
(line 126)
<table width="250" border="0" cellspacing="0" cellpadding="0">
to
<table width="250" border="1" cellspacing="0" cellpadding="0">

People who send text messages use a lot of “shorthand” abbreviations for common words and phrases. IMO is short for In My Opinion, IMHO is short for In My Humble Opinion. There are many, many more. They have become popular in internet conversations. You can Google most any abbreviation and find out what it means. I do not send text messages so I have to look them up all the time :slight_smile:

1 Like

Hi ron!

While there are coding advantages in this form for choosing width=1 instead of width=60, I do not believe that the difference between using width=1 and width=60 really matters very much to the end user. The page will probably look the same to almost everyone. In my opinion, the winner will be YOU if you understand why width=1 is the better choice in this case and when it might not be the best choice. You have asked the right questions. Eventually, with experience, you will understand which is the best choice and how to write the code that achieves your goal.

Ok ron thank you but i have a little question maybe you have been answer to me (sorry) if i put 60px is the words will go down to the next line (if the sentence/words longer from the size of the cell) and is it 1px more flexible?

The extra padding on the right is wasted space if the table cells do not have a visible border. Your original layout plan and code showed Dreamweaver outlines, not table cell borders.
If you want to see the table and table-cell borders, turn OFF the outlines (comment out the CSS line mentioned in post #658) and temporarily change the HTML
(line 126)

to

Is that what you mean?

The code:

contact2.html (6.1 KB)

Thank you galia

Yes, the words will wrap. Because you do not wish them to wrap, you must use either the &nbsp; between the two words or the CSS {white-space:nowrap;} property to prevent them from wrapping.

1px instead of 60px is more predictable and could probably be considered more flexible because it makes other widths predictable and simplifies the code.

The image shows your form with table borders visible and no outlines. It also shows the 4px of squandered space to the right of the labels. Because the table borders (or outlines) are not part of your design, the 4px of padding-right is not needed to make the labels look balanced. They are already balanced between themselves without borders. Your design calls for the form to look like the left image in post 658… unless you have changed your mind.

Hi ron!

The image shows your form with table borders visible and no outlines. It also shows the 4px of squandered space to the right of the labels. Because the table borders (or outlines) are not part of your design, the 4px of padding-right is not needed to make the labels look balanced. They are already balanced between themselves without borders. Your design calls for the form to look like the left image in post 658… unless you have changed your mind.

No i am not changing my mind but i have to ask how it is balanced without the borders when i turning off the border to zero and keep the padding right how does it look ok when i do that? see

The code
contact2.html (6.1 KB)

Thank you galia

The labels are centered along a vertical axis in the right column. That axis is offset by 4px of padding-left. Because there is no visible border (or outline), it does not matter if the left edge of the right column is padded… the labels are still perfectly centered within the available width which happens to be the width of the widest label.

In this attached page, I have restored the outline as a solid gray instead of dashed blue. I have also replaced the {padding-left:4px} with {border-left:4px solid gray}. You should be able to see that the words, the labels, are centered, balanced, within the available space.

Experiments: Change border-left:4px to border-left:14px. The words (the labels) appear to be pushed further away from the input fields (actually the input fields are squished), but they are still be perfectly centered beneath the widest word. You can change the color of the border from #bbb to transparent, to compare to with padding.

Does this help?

contact2-20151018a.html (6.1 KB)

Hi ron!

I have also replaced the {padding-left:4px} with {border-left:4px solid gray}. You should be able to see that the words, the labels, are centered, balanced, within the available space.

What the diffrenet betwwen padding-left ;4px and border-left:4px?

Experiments: Change border-left:4px to border-left:14px. The words (the labels) appear to be pushed further away from the input fields (actually the input fields are squished), but they are still be perfectly centered beneath the widest word. You can change the color of the border from #bbb to transparent, to compare to with padding.

First this is what i did:

The image:

The code:
contact2-20151018a.html (6.1 KB)

Is it good what i did? why when i did border left instead of padding left the words especially in the two first words on the first cell are shrunk and stuck to the right side of the cell and what is the difference between padding or border on this case?

thanks galia

In this case, they serve the same purpose. I substituted a border because one can give a border a color so it is visible, whereas one cannot give padding a color to make it visible. The purpose is to help you see that the labels are centered within the available space beneath the widest word. The border should be replaced with the original padding after you are understand what you are seeing.

The words do not shrink. The fields shrink. The fields are squished shorter. You can measure this.

…because we removed the {padding-right:4px} from all of the cells, the widest word can touch the right edge of the cell. It is OK if this happens because the borders around the cells and table are normally NOT VISIBLE. It does not matter if there is no padding on the right side. It only matters that the words are centered per your design, and they are!

Hi ron!

The words do not shrink. The fields shrink. The fields are squished shorter. You can measure this.

Yes i measure that it look the same like you did but i don’t understand why the non Transparent border look on the same size of the transparent border that look wider than non transparent border?

…because we removed the {padding-right:4px} from all of the cells, the widest word can touch the right edge of the cell. It is OK if this happens because the borders around the cells and table are normally NOT VISIBLE. It does not matter if there is no padding on the right side. It only matters that the words are centered per your design, and they are!

Ok thank you but is it ok on the side of a code to leave it like that or not?

thanks galia

I am not sure that I understand the question. The space between the edge of the widest label and the field looks wider when the color of the border is transparent because of the space around the colon. Other letters seem to have one pixel of space around them, the colon seems to have 2px. I’m guessing that this is what you might be asking about.

I do not know what you are asking… leave WHAT like WHAT?

If you are asking if it is OK to have padding on the left side of the lablel and not on the right side, the answer is YES. The words are still centered beneath the widest word in the available space as you wished. The padding is not “available space”; therefore, it does not affect the centering of the words, only their position in the invisible column. The padding adds space to the left of the words so they do not touch the fields.

I am not sure that I understand the question. The space between the edge of the widest label and the field looks wider when the color of the border is transparent because of the space around the colon. Other letters seem to have one pixel of space around them, the colon seems to have 2px. I’m guessing that this is what you might be asking about.

Ron you understand it correctly but to be precise when You measured the cells on post #667 it was 59px how it look in the same size?

I do not know what you are asking… leave WHAT like WHAT?

i meant if you leave the padding right is it ok or not wont going to be an error or something?

thank you galia

I really do not understand the question.

If you keep the padding:right in the cells with the labels, it will not cause a validation error.

I showed you in posts #658 and #667 with screen shots that any width added to the cells with the labels takes width away from the fields where the user enters data. It does not matter if it is added to the left side or the right side. padding-right is unnecessary and wastes space because it squeezes those fields just like that extra padding-left squeezed the fields narrower. That is the only side effect. It will not cause a validation error if used. It’s just a silly choice. That’s all.

Hi ron!

I really do not understand the question.

I hope i will explained to you more clearly i meant that the images that you shows in post #667 on the right size ( with the transparent and non transparent border) how it is on the same size (59px) when the image that is down look more wider than 59px?

thanks galia

The border-left in both images is colored. The top border is gray, the bottom border looks like a dark purple. Neither border is transparent.

The ruler is measuring the space that is being used by the widest word. It is the same in all of the images. That width is 59px.

The width of the cell is wider than 59px because the width of the border-left or padding-left adds to the width of the cell. So the width of all of the cells in the right column is equal to the width of the widest word plus the width of any padding or borders that are added to the cell.

If you change the color of the border to transparent, then it looks like empty space beside the words… like padding-left… empty space that pushes the cells with the fields further away from the column of words.

Remember that padding or borders are NOT available space… the words cannot normally enter the space occupied by padding or borders. That is why the words remain centered beneath the widest word when padding is added to one side of the column of cells only (or both sides).

If this does not help, please phone a webbie friend who speaks Hebrew because something must be getting lost in translation and I must be misunderstanding something.