johannes999 Posted August 22, 2022 Share Posted August 22, 2022 Hello,I want to insert a border or box with width 92% and height 220px on the bottom of my website home image . the border has to be 50% inside the image and 50% ouside the image.I want to insert text in this white background border.I treid everything I made border in photoshop with background white with 0.1px solid black line . but it is not working . inside the image the section that has to be white it is standing in its origin color.I searched in google and in youtube but I couldn’t find any solution or answer.can some one tell me how I can solve this problem.I saw some websites using even 4 boxes with width of 20% and height of 500px with white background and inserting some text in it.please see my website:https://webdesignleren.com/ to understand what I mean.thanks Link to comment Share on other sites More sharing options...
dsonesuk Posted August 23, 2022 Share Posted August 23, 2022 You can't! img element is void element its unable to hold any content. Best you can do is use use block or inline-block element such as div or figure element https://www.w3schools.com/TAgs/tag_figure.asp and use margin or padding to give you spacing you need. Link to comment Share on other sites More sharing options...
johannes999 Posted August 24, 2022 Author Share Posted August 24, 2022 thank you very much, I saw that the class has to be inside the site-header like this in my case : <div class="site-header"> <!-- site-header --> <div class="site-title "> X Auto Service</div> <div class="header-menu"> <ul> <li><a href="http://webdesignleren.com/" > Home </a> </li> <li><a href="http://webdesignleren.com/onderhoud/" > Onderhoud </a> </li> <li><a href="http://webdesignleren.com/banden/" > Banden </a> </li> <li><a href="http://webdesignleren.com/apk/" > APK </a> </li> <li><a href="http://webdesignleren.com/contact/" > Contact </a> </li> </ul> </div> <message> <h1> <span>FULL</span> <span>SERVICE</span> <span>OF</span> <span>AUTO</span> <span>REPAIR</span> <span>And</span> <span>Maintenance</span> <span>PROFESSIONAL</span> <span>HELP</span> <span>AND</span> <span>DURABLE</span> <span>REPAIR</span> <span>SERVICE</span> <span>place</span> <span>on</span> <span>your</span> <span>own</span> <span>thinking.</span> </h1> </message> <div class="box"> <div class="box-item1"> hello </div> <div class="box-item2"> hello </div> <div class="box-item3"> hello </div> </div> </div> and the CSS: .box { display:flex; width:92%; float:left; margin-left:4%; border:0.1 solid; box-shadow: 0px 0px 2px 2px #C8C8C8; box-sizing:inherit; /*-moz-box-sizing: border-box; */ background-color:red; height:200px; margin-top:26rem; } .box-item1{ color:black } .box-item2{ justify-content:center; color:black } .box-item3{ color:black; justify-content:flex-end; } you can see on :https://webdesignleren.com/ it is succeded . it can not be outside the div class of the site-header also flex is causing problem . I used percentages. thank you for usefull information Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now