First of all sorry for the delay(i was having delays) and for my slow response slow like a turtle ha
So there are my questions/what i did:
Questions:
1.> All modern browsers understand {white-space:nowrap}, but outdated Dreamweaver does NOT. That is why I used the in your table form between the two words in the top right cell.
How can you said that when there is possibility to do nowrap and when you do space between words that can be automatically appears in the code on dreamweaver?
2.> Did you know that tables treat âwidthâ and âheightâ as if it were âmin-widthâ and âmin-heightâ.
What do you mean about min-width and min-height is it from the word Minimum and if it so how long the width and the height could be is it what size that i want/did( the width and the height)?
3.I look at the code of the file table-dimensions.html and i want to ask you why you did class width 300px and not put width straight to the td code?
4.On the screen shout that you sent to me i did not understand the group on the right side what it represent?
As a separate personal exercise, you can comment out or delete {white-space:nowrap} in 2 places and see that the text wraps at the assigned width of the container when you Zoom TEXT ONLY larger than normal.
What is the purpose to put nowrap code and when does it good to put it?
I donât quite understand what you are asking. Can you say it another way?
Yes, min-width is the CSS property for minimum width.
Iâm not sure what you are saying/asking. Without a width assigned, a table will extend as wide as needed to hold its content.
Because the width, height, and several other attributes are deprecated (should not be used) in favor of using CSS styles.
{white-space:nowrap} is used to force the text to not wrap. It would be used in a special situation such as instead of the that I used in your code to prevent the two words from wrapping in the table-cell.
I used white-space:nowrap in the example to force the text to not wrap so I could demonstrate that the width of a table-cell will exceed its assigned width if its contents force it to do so (whereas a div will not). In other words, the assigned width of table-cell is treated as a min-width. That is one of the unique qualities of a table/table-cell that make them special.
The right and left views are different arrangements (groupings) of the same code. You can use the one that is more meaningful to you.
I donât quite understand what you are asking. Can you say it another way?
I hope i can you said that dreamweaver not understand nowrap if it is so so how can be that is Option to do it on dreamweaver and when you do space between words it can be the on the code menu
Iâm not sure what you are saying/asking. Without a width assigned, a table will extend as wide as needed to hold its content.
No it is not what i meant i meant if the width/height is 300px for example (like you did) and you said that min-hight/min width it is short from the word maximum is the mean that the hight/width should be at least 300px and what is the difference with regular height/width?
The right and left views are different arrangements (groupings) of the same code. You can use the one that is more meaningful to you.
Can you be more specific (is the left and the right examples are the same size/width/height or it is different because it is look different to me?)
Does Dreamweaver have an option that allows it to respond to {white-space:nowrap;}
IF âYesâ, that is great! I did not know that. Therefore, it is not necessary to use to prevent 2 words from wrapping.
If âNoâ, then the choice is yours to use for Dreamweaver or be happy with {white-space:nowrap} for the rest of the world of real browsers even though it will not work in Dreamweaver.
Tables recognize âwidthâ and âheightâ HTML attributes and CSS properties.
Table treat âwidthâ and âheightâ as if they were âmin-widthâ and âmin-heightâ.
That means that even if a width and/or height were specified, a table might stretch and exceed those numbers if necessary to hold the content⌠like a balloon.
âmin-â is short for the word âminimumâ, not maximum. minimum width (min-width:) means that the value given is the narrowest that the element can be.
The min-width: property does not work with tables. tables treat width as if it were min-width anyway.
If one assigns a "min-width:"or âmin-heightâ, a table will ignore it.
I am not completely sure what that menu allows one to do in Dreamweaver, but it certainly looks like Dreamweaver should display {white-space:nowrap} correctly!
and tell me which of these views you see in Dreamweaver.
If you see the first image, that means Dreamweaver does not interpret {white-space:nowrap} correctly.
If you see the bottom image, that means Dreamweaver reads {white-space:nowrap} correctly!
ânbspâ stands for non breaking space. Do you see the bold letters? That means it is a space that prevents 2 words from wrapping. So you are right, it is a space between words; but it is a special ânon-breakingâ space that does not allow the words to wrap.
Yes, I skipped that question on purpose. I did not want to make you sleepy by talking too much . I will explain the image next.
For the purpose of the demonstration that I sent to you in post #620, I used {white-space:nowrap} to force the line of text to become wider instead of wrapping at the edge of the parent container.
a) Normally, one does not use {white-space:nowrap}. Normally, one wants text to wrap at the edge of its parent container. For that demonstration, I did not want the text to wrap so I used {white-space:nowrap}.
In the test file, âtable-dimension2.htmlâ, I used three types of boxes to demonstrate how they behave as their contents increase.
I used a <div> because it strictly obeys a width assignment. It is the 300px reference box. It cannot be forced wider. The width never changes.
I used a <table> with a width assigned so you can see that a table treats width as min-width.
a) You can see that the width of the table extends as the text within the cell becomes larger and therefore wider/longer than the assigned width. Eventually, it pushes the edge of the table wider than 300px.
Finally, I used a basic <table> with no width assigned so you can see that a table hugs its contents by default.
a) If the contents are small, the width is narrow; if the contents are larger, the width becomes wider. A table hugs its contents by default.
The red border around the white boxes on the left side of the image were made with the file âtable-dimension2.htmlâ that I sent to you. All I did was use the Firefox Zoom Text Only feature and change the font size for each group of 3. You can read the black title over the groups and see that the top left group uses a âsmall font sizeâ, the middle left group uses a âmedium font sizeâ and the bottom left group uses a âlarge front sizeâ. The three boxes within each group are in the same order, <div>, <table> with a width assigned, and <table> with no width assigned⌠just as the text says.
The boxes on the right side of the page were copied from those on the left side using GIMP and arranged on the right side by container type. The divs are at the top, the tables with the width assignment are in the middle, and the tables with no width assigned are in the bottom group on the right. The font sizes change within each group so you can see how the box types behave as the font size changes.
The boxes on the right side are the same as the boxes on the left side, except that they are grouped differently. The ones on the left are grouped by font size, the ones on the right are grouped by box type as the black titles state.
The colored lines in this attached image show how the boxes on the left were copied and moved to create the groups on the right. They are the same boxes. If they look different to you, it must be an optical illusion.
For the purpose of the demonstration that I sent to you in post #620, I used {white-space:nowrap} to force the line of text to become wider instead of wrapping at the edge of the parent container.
Do you mean to do space after the last word of the text and which parent container do you mean?
I used a <table> with a width assigned so you can see that a table treats width as min-width.
a) You can see that the width of the table extends as the text within the cell becomes larger and therefore wider/longer than the assigned width. Eventually, it pushes the edge of the table wider than 300px.
So what is the purpose to put width to the table if it is not really the size of the table?
The boxes on the right side of the page were copied from those on the left side using GIMP and arranged on the right side by container type
What is gimp?
The red border around the white boxes on the left side of the image were made with the file âtable-dimension2.htmlâ that I sent to you. All I did was use the Firefox Zoom Text Only feature and change the font size for each group of 3. You can read the black title over the groups and see that the top left group uses a âsmall font sizeâ, the middle left group uses a âmedium font sizeâ and the bottom left group uses a âlarge front sizeâ. The three boxes within each group are in the same order,
, with a width assigned, and
with no width assigned⌠just as the text says.
The boxes on the right side of the page were copied from those on the left side using GIMP and arranged on the right side by container type. The divs are at the top, the tables with the width assignment are in the middle, and the tables with no width assigned are in the bottom group on the right. The font sizes change within each group so you can see how the box types behave as the font size changes.
The boxes on the right side are the same as the boxes on the left side, except that they are grouped differently. The ones on the left are grouped by font size, the ones on the right are grouped by box type as the black titles state.
The colored lines in this attached image show how the boxes on the left were copied and moved to create the groups
on the right. They are the same boxes. If they look different to you, it must be an optical illusion
Tell me if i understand it correctly on the 3 left group you put in the same order of the âtable-dimension 2.htmlâ
but in a different of each font size and on the right size you do not put with the same order of the âtable-dimension 2.htmlâ but you put it on each kind of container (div.table and table without width) with the same font size that i see on the left but not in the same order that is on the left am i right?
I do not know what to think. Before this moment, I had not heard of live view and image view. I had only heard of code view and design view. I am not familiar with Dreamweaver so I do not know about the different views
I mean to prevent the line of text from wrapping where there is a space between words.
The <div> and the <td> tags are the containers for the text. The <div> is not inside another container. Each <td> tag is inside a <table> tag. Each <table> tag is the parent container. However, that is a silly reference because the <table> and <td> tags go together and the two tables are independent. I should not have specified âparentâ container. Just âcontainerâ would have been sufficient.
A table will normally obey its assigned width (as you saw in your personal exercise when you removed {white-space:nowrap} thereby restoring normal text behavior), but it may exceed that assigned width if forced to do so by its contents. It is a special behavior of tables that is different from boxes such as <div>s that have a width assigned (as demonstrated in the examples)
GIMP stands for GNU Image Manipulation Program. It is a poor manâs Photoshop. You can search for âGIMPâ and learn much more. Google is your friend.
I do not know what to think. Before this moment, I had not heard of live view and image view. I had only heard of code view and design view. I am not familiar with Dreamweaver so I do not know about the different views
Ron I got confused i write image instead of design view but there is a live view it shows how it got on the browders (he is not always accurate) what do you think now is it dreamweaver interpet nowrap or not?
I cannot say for sure because the design view shows that it does not understand {white-space:nowrap}, but the other view (live view?) shows that it does. How is that possible? Why would Dreamweaver render {white-space:nowrap} differently in those views?
Which method do you wish to use to prevent two words from wrapping at the space between them?
I cannot say for sure because the design view shows that it does not understand {white-space:nowrap}, but the other view (live view?) shows that it does. How is that possible? Why would Dreamweaver render {white-space:nowrap} differently in those views?
Believe me i donât know why? what view to look on? but see it on firefox like live view
I believe the answer is that âdesign viewâ uses the old rendering engine and cannot be trusted to interpret modern code correctly.
Is it not in âdesign viewâ where you sometimes see problems with the code that we give you?
One cannot trust âdesign viewâ. That is why, to write modern code with Dreamweaver, one must test it in a modern browser, not in âdesign viewâ.
I do not remember anywhere else in your pages where one would not want text to wrap. You would be OK using either CSS {white-space:nowrap} or the non-breaking space character in this one place.
Ron i think it was on the contact page something about the table of the form and the words in it and about that i think i chose this look (see image) to be like that but i look again and i want that the words will be on the same line but in the same look can it be done?
The difference in width is only 3px on my PC. Not very much, but enough to cause the words to wrap if the non-breaking space or {white-space:nowrap} is not used.
Yes.
File number âŚ204a shows the non-breaking space, in use
(Ideally, I should have set the width value to 1px, but 60px is OK.)
EDIT: interesting that Discourse is detecting and inconsistently, I believe, swapping the direction of the Hebrew text but not the punctuation (the colon) in that last code example.
The difference in width is only 3px on my PC. Not very much, but enough to cause the words to wrap if the non-breaking space or {white-space:nowrap} is not used.
Were did you see that the width is 3px wider because in the eye i do not see it?
(Ideally, I should have set the width value to 1px, but 60px is OK.)
What the difference between 1px to 60px and why it is ideally to set the value to 1px?
EDIT: interesting that Discourse is detecting and inconsistently, I believe, swapping the direction of the Hebrew text but not the punctuation (the colon) in that last code example.
Yes in the last code is the right way to write in hebrew why is that in the right direction and not where i put the code ( )?
In reference to the file that you posted in message #649:
The assigned width of the column is 60px
When the 2 words in the first cell are not allowed to wrap, the cell extends to a width of 63px to fit their width.
I used an on-screen ruler to measure the difference. That difference is 3px.
Because that column will then have a default width of 1px. It will always be only as wide as the widest word in the column. Which means there will be more width available for the fields in the left column.
You can test this for yourselfâŚ
Remove all of the words from that first column
You will see that the first column is still 60px wide.
Change the width of the first column from 60 to 1 (the first <td> in <tr class="buttons">)
from: <td height="42" width="60">
to <td height="42" width="1">
Watch the column shrink to almost 1px.
One at at time, add the words back in column 1 again.
Refresh the page after adding each word. Watch the width of the column extend to fit the widest word
Restore the between the two words in the top cell and watch the column extend to fit those words on one line.
This is a real-life example of the exercise that you just finished. Remember the image showing how a table with a width assigned will treat that width as a minimum width, but if the contents of the table were wider than that assigned width, the table would extend to fit the contents.
Now you can see it in your form.
I do not know the technical reason why that happens; but I believe the string must first convert the non-breaking space to a utf8 character, then the RTL algorithm can move the Hebrew characters appropriately. That is just a guess.
Would you rather use CSS {white-space:nowrap} instead of the old non-breaking space thingy? That would be an impressively modern choice !!!
ha
