hi everyone I am new here and a beginner programmer who has very basic coding skills. I am trying to make my web page look like my design in the first image below. However i got the second image below that as my result.
Hello there! You are very welcome!
Is this the design that you want your project to take? If yes, it would help if you showed us what you have already achieved so far.
But I think your problem would be solved by applying a Z-index or using CSS positions.
this is what my current html code for the element look like:
<div style="display: flex;">
<div class="about-us-image">
<img class="about-image"
src="file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/smiling-handsome-asian-manager-with-modern-device.jpg"
alt="smiling-handsome-asian-manager-with-modern-device">
</img>
</div>
<div class="about-us-text">
<h2><h2 style="color: #56aeff; font-size: 40px; font-family: Arial;">Who We Are</h2>
<p><p style=font-size:20px;">With more than a decade of experience, we are a trusted team of business and financial planners to help you start your business or retirement in Bali, Indonesia and other islands</p>
</div>
</div>
this is my CSS:
.about-image {
height: 500px;
width: 400px;
box-sizing: border-box;
}
.about-us-text {
text-align: left;
padding: 100px;
width: 50%;
box-sizing: border-box;
align-self: start;
padding: 80px 50px 0 0;
padding-left:none;
padding-top: 0%;
padding-right: 25px;
}
may be you can help me find where my error is. thank you
Hello. Let me know if this is what you wish to achieve. Then I’ll explain how to go about it. I used a different image but the concept is the same.
almost i want the image to be within its own container but aligned to the right if not centered but still leaning to the right of the container while the text is left aligned within its own container but still giving a gap between text and image like my canvas design below
I have already given you an idea of how to go about it, the rest is for you to deal with. What modifications have you made so far?
i have only tried adding padding-left: 0 px but that did not work so I tried adding padding-right: 25px but eve that did not work
Let me see what you have.
this is what it loks like. the text is still too right-aligned in the container. i want it to move closer left but still give some spacing between the text and image
Kindly post your code as well.
this is my HTML
<!doctype html>
<html>
<head>
<link
href="file:///C:/xampp/htdocs/templatemo_591_villa_agency/styles.css"
rel="stylesheet"
type="text/css"
/>
<style>
html,
body {
height: 100%;
margin: 0;
}
body {
background-image: url('file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/techno%20background.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
}
.data-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
}
</style>
</head>
<body>
<div style="display: flex;">
<div class="about-us-image">
<img class="about-image"
src="file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/smiling-handsome-asian-manager-with-modern-device.jpg"
alt="smiling-handsome-asian-manager-with-modern-device">
</img>
</div>
<div class="about-us-text">
<h2><h2 style="color: #56aeff; font-size: 40px; font-family: Arial;">Who We Are</h2>
<p><p style=font-size:20px;">With more than a decade of experience, we are a trusted team of business and financial planners to help you start your business or retirement in Bali, Indonesia and other islands</p>
</div>
</div>
</body>
</html>
this is my css:
.about-us-image {
display: flex;
justify-content: flex-end;
align-items: center;
width: 50%;
gap: 45;
}
.about-image {
height: 500px;
width: 400px;
box-sizing: border-box;
}
.about-us-text {
text-align: left;
padding: 100px;
width: 50%;
box-sizing: border-box;
align-self: start;
padding: 80px 50px 0 0;
padding-left:none;
padding-top: 0%;
padding-right: 25px;
}
First of all, you can either use external CSS or Internal CSS, but not both like you did. After that, you can adjust the padding or margin to your liking.
would using both internal and external css have an effect on my page? i used both because I am afraid it might affect my other page that shares the same CSS. how should I go about this so that I get the results I want? the snippet of CSS code I showed you is only the CSS for that particular element on that web page
Yes, having both causes some conflicts.
So, if you have HTML files that share the same CSS, you connect the files using the same CSS name. If they are using different styles, you will create separate CSS files.
would it work if i just remove the CSS for this particular elewment of this HTML page from my external CSS and mnove it into my HTML page as an internal CSS?
Yes, it will perfectly work.
okay i just tried what you suggested and it does move the twxt closer to the image but , how do i put a space in between the text anfd image you can see in the image that it is too close
this is the current HTML and CSS with the modifications you suggested:
https://jsfiddle.net/schmueller23/hfxgwpvm/5/
Give your image a reasonable margin to the right.
how many pixels would be sufficient you think? 25 px enough?
1 Like
Just have something reasonable, something that’s close to the designs you provided.