but when i try to set more text in the P tag i m getting text on bottom of the bottom border ( i want that the text to be placed above the bottom border),and if you notice in left and right the text is hidding , and the borders are not flexible, and another thing is the margin by default added on bottom of the top div ( this why i’m adding -25px in margin-top of search input).
so i try with another way :
body
{
/*position : relative;*/
height: 100%;
max-height: 100%;
border-right: 20px solid #d0d0d0;
border-left: 20px solid #d0d0d0;
border-top: 10px solid #894aa3;
border-bottom : 55px solid #444444;
}
but the problem here that is not the same border in the image above, because the border of right and left need to be on the border of top and bottom, so how can i get the same borders in the image (template) above ???
thank you in advance.
The gray left and right borders simply look like the background of the body and certainly don’t need to be absolutely placed anyway (especially not as 4 separate empty elements).
All the borders could simply be based on the element itself as borders if needed.
Remember to account for the default margins on the elements you use and don’t resort to negative margins just because you didn’t account for the margin on something properly. Take some time to learn the basics of css as these little errors will keep tripping you up along the way and become frustrating to you
The height 100% is to make the container fill the viewport when there’s little content but you can remove it if you only want content height.
The padding was just to make some space for the inner elements without having to target all the inner elements instead. However on the second example I removed the padding to allow the backgrounds of inner elements to reach the edge of the container.
Box sizing border box is my preferred method for the box model which you can easily research for yourself rather than me explaining
You could use a background image placed at the right of the input and then add some padding right to the input to protect the image from the text
Usually though the search icon is a button that submits the form so you can absolutely place a button with an image or background image to the right of the input. You would need to have a container around both the input and button to do this. The form container could be used and you would position the form container instead of the input (as it currently stands) and then absolutely place the button to the right of the input.
Have a go for yourself as these are the basic building blocks of css:)
thank you @PaulOB , i ’ m already doing it .
i have another question , why when i remove the code below i’m getting a maring in top and bottom and extrat padding in left and right , and also the search input is getting an extra margin top.
As I mentioned in my other posts some elements come with default margin or padding in some cases and you need to address theses if you don’t want them to apply. The html and body elements are a case on point.
Many elements such as p, ul, ol, hn etc have default top and bottom margins and you need to take control of these yourself if you want consistent layouts. Google reset or normalise css to learn more.
You don’t need the width 100% in your rule above as the html and body elements already stretch edge to edge.
