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.
Ok ron but the is an it the down image is transparent i tried to do it as well i did the border without color and i get it it is just look like more wider but is on the same size (59px) is an it?
Are you happy with the look of the contact page and the form?
On the form of the page i want that you look at the form code of my page and tell me if it is ok (see the code) and also i have been ask you before it was in post #507 to look if it can be done to put border on highlight around the field and the buttons like in the images that is in #post 507 and of course without the lines of the table.
And about the contact page i want to do the contact page with a similar design like the previous pages like that:
I am not clear about what you are saying. Do you want the cells to have CSS borders?.. borders without using the table border=â1â attribute? Is that why you have been wanting to use padding left and right in that first cell?.. because you want borders around the cells?
IF so, then you can add them.
form td {border:1px dotted blue;}
form tr + tr td {border-top:none;}
form td + td {border-right:none;}
You only need to change the first line to restyle them.
It may adversely affect the contact page to add unnecessary HTML elements just because they are found on other pages. Youâll have to try it and see. I donât know. I can promise you that pointless code will not impress your instructor, though⌠Nor will the useless CSS you have gradually restored on the page, such as #down {display: compact;} and `#tab {border-bottom-style: none;}
It may adversely affect the contact page to add unnecessary HTML elements just because they are found on other pages. Youâll have to try it and see. I donât know. I can promise you that pointless code will not impress your instructor, though⌠Nor will the useless CSS you have gradually restored on the page, such as #down {display: compact;} and `#tab {border-bottom-style: none;}
And i will try to put the others divs that i want and if there be a problem i will tell you
Please delete the three lines of CSS that I gave you in my last message.
I was confused because there are borders around the fields and buttons by default, so I thought that you might possibly have meant cells. However, according to your drawing, you are talking about changing the look of the borders around the fields and buttons. Thatâs easy.
You can change the width, style and color of the borders around the fields and buttons by adding one or two properties to this rule:
form input, form textarea {
width: 100%;
box-sizing: border-box;
border:2px solid brown; /* width, style, and color are your choices */
border-radius:3px; /* optional */
}
If there are to be no borders around the cells, then I would urge you to delete the right padding from this rule because it takes 4px of width away from the fields.
form td:first-child {
padding-left: 4px;
padding-right: 4px; /* DELETE ME because I am unnecessary */
}
So ron first of all i did like you did in the code that you sent to me and you write solid brown but as you can see in the image it looks like it is red and not brown why is that?
I like your brown much better than cssâs version of brown.
Adding a background-color to the fields and buttons is just as easy as adding the borders.
form input, form textarea {
width: 100%;
box-sizing: border-box;
border-radius: 3px;
border: 2px solid #83511c;
background-color:pink; /* this will color the fields and buttons */
}
form .buttons input {
width: auto;
background-color:cyan; /* this will color the buttons only */
}
The border and background of the fields looks very classy
I donât care for the gray background on the buttons because there is too little contrast between that background and the color of the text. Makes the buttons harder to read, especially for someone with poor vision.
Thank you very much ron thank you for your feedback i am really appreciated i am glad it is ok:smile:
I donât care for the gray background on the buttons because there is too little contrast between that background and the color of the text. Makes the buttons harder to read, especially for someone with poor vision.
About the buttons i will make a change and go back to you to see you if it is ok now.
I send to you two suggestion of the look of the buttons, and i what you to tell me what do you think is it better of or you can tell me if you have any suggestion?
Itâs funny that you would ask ME for a color recommendation. In general, women have a keener sense of color than men, so I should be asking YOU for color recommendations!
I would probably choose something similar to your second image; however, I would change the border-color so it is more like the reddish-brown on the right edge of the âbookâ. Maybe something like thisâŚ
(line 54)
form .buttons input {
border: 3px solid #953; /* changed border color */
width: auto;
}
The border matches the color of the page edges of the book and the background vs text color has enough contrast to be easily readable.
You could make the buttons a few pixels wider if you feel that they need to be more prominent andâŚ
Changing the cursor to a pointer over a button is usually a nice touch.
(line 54)
form .buttons input {
border: 3px solid #953;
padding: 0 12px; /* padding-left and padding-right change the width of the buttons */
width: auto;
cursor:pointer; /* cursor changes into hand pointer over button */
}
Itâs funny that you would ask ME for a color recommendation. In general, women have a keener sense of color than men, so I should be asking YOU for color recommendations!
Ho i did not know that but you the professional so i have been asking that from your experience
And I did something from your tips and here is what i did what do you think?
I think the borders around the fields and buttons look better, and the text in the buttons is more conspicuous and much easier to read now.
I would like to suggest that you prepare an explanation for your teacher that explains why you are using this line of CSS #down {display: compact;}
Please see messages #510-514 for our discussion.
I recommended that it not be used because it does nothing. However, if you wish to use it anyway, you should be prepared with a reason in case your teacher asks why it is being used.
I think the borders around the fields and buttons look better, and the text in the buttons is more conspicuous and much easier to read now.
Thank you ron i am glad
I> would like to suggest that you prepare an explanation for your teacher that explains why you are using this line of CSS
#down {display: compact;}
Please see messages #510-514 for our discussion.
I recommended that it not be used because it does nothing. However, if you wish to use it anyway, you should be prepared with a reason in case your teacher asks why it is being used.
i saw Those messages it do not give me any explanation why i put that code maybe it was problem with the div i look at my other pages and i did not put this code on my other pages and you are right i tried to remove that code and it is not doing anything the div is fine what is the code used{display: compact;} for?
OK i get it ron but i think at the time i put the code it was do something to fix the div this code was created to do something for knowledge if you know what it was for?
