I've searched around and I don't find nothing, for a title of context, in the past few days I have been building my portfolio, I am a backend dev so I am not used to any of these things.
I added a banner where there is my profile photo and I add a few informations in the side like school year, my LinkedIn, GitHub and email. But recently I added a few containers and elements to showcase my projects, and when I did it these elements went further up. Like showed in the image
I want to put the text in the red box but I don't know how to, I also know that we aren't supposed to put photos, but I can't see a better way to explain my problem. I also tried to use top=; and flex box
These are my CSS and HTML structures:
.banner {
width: 100%;
height: 175px;
background-color: #E6D5C7;
position: relative;
margin-top: 225px;
margin-bottom: 10px;
z-index: -1;
display: flex;
justify-content: center;
align-items: center;
}
.profile-photo {
width: 250px;
height: 200px;
border-radius: 20%;
margin-top: -100px;
object-fit: cover;
position: relative;
z-index: 2;
}
.credentials {
width: 400px;
padding: 10px;
border-radius: 8px;
position: absolute;
top: 32.5%; /* Center vertically */
left: 20%; /* Center horizontally */
transform: translate(-50%, -50%); /* Adjust both axes to be perfectly centered */
text-align: center; /* Ensures text inside is centered */
gap: 8px; /* Adds spacing between elements */
}
.credentials p {
font-size: 20px;
margin: 12px 0;
padding: 8px;
border-radius: 4px;
transition: background-color 0.2s;
}
.credentials p:hover {
border-radius: 4px;
background-color: #a8bdb3;
}
.credentials a {
color: #333333;
text-decoration: none;
}
.aboutme {
width: 500px;
margin: 0;
padding: 10px;
border-radius: 8px;
position: absolute;
margin-top: 70px;
right: 0;
top: 187px;
top: 27%; /* Adjust this value to position it vertically within the banner */
transform: translateY(-50%);
}
.aboutme p { /* #40514E */
font-size: 20px;
margin: 12px 0;
padding: 8px;
border-radius: 4px;
transition: background-color 0.2s;
}
.aboutme p:hover {
background-color: #a8bdb3;
}
.aboutme a {
color: #333333;
}<div class="banner">
<!-- <img src="photos/GitHubprofile1.JPG" alt="Profile Photo" class="profile-photo">-->
</div>
<div class="credentials"> <!-- section of left side in the banner -->
<p>
<i class="fa-brands fa-linkedin"></i>
<a> Linkedin profile</a>
</p>
<p>
<a href="" target="_blank">
<i class="fa-brands fa-github"></i> GitHub profile
</a>
</p>
<p>
<i class="fa-solid fa-envelope-open-text"></i>
<a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
<div class="aboutme"> <!-- section of right side in the banner -->
<p>
<i class="fa-solid fa-graduation-cap"></i>
<a>1st Year Technology and Engineering, specializing in Sustainable Development (STI2D - French Technical High School Program)<br></a>
</p>
<p>
<i class="fa-solid fa-user"></i>
<a>I am 17 years old, 11th grade</a>
</p>
</div>I've searched around and I don't find nothing, for a title of context, in the past few days I have been building my portfolio, I am a backend dev so I am not used to any of these things.
I added a banner where there is my profile photo and I add a few informations in the side like school year, my LinkedIn, GitHub and email. But recently I added a few containers and elements to showcase my projects, and when I did it these elements went further up. Like showed in the image
I want to put the text in the red box but I don't know how to, I also know that we aren't supposed to put photos, but I can't see a better way to explain my problem. I also tried to use top=; and flex box
These are my CSS and HTML structures:
.banner {
width: 100%;
height: 175px;
background-color: #E6D5C7;
position: relative;
margin-top: 225px;
margin-bottom: 10px;
z-index: -1;
display: flex;
justify-content: center;
align-items: center;
}
.profile-photo {
width: 250px;
height: 200px;
border-radius: 20%;
margin-top: -100px;
object-fit: cover;
position: relative;
z-index: 2;
}
.credentials {
width: 400px;
padding: 10px;
border-radius: 8px;
position: absolute;
top: 32.5%; /* Center vertically */
left: 20%; /* Center horizontally */
transform: translate(-50%, -50%); /* Adjust both axes to be perfectly centered */
text-align: center; /* Ensures text inside is centered */
gap: 8px; /* Adds spacing between elements */
}
.credentials p {
font-size: 20px;
margin: 12px 0;
padding: 8px;
border-radius: 4px;
transition: background-color 0.2s;
}
.credentials p:hover {
border-radius: 4px;
background-color: #a8bdb3;
}
.credentials a {
color: #333333;
text-decoration: none;
}
.aboutme {
width: 500px;
margin: 0;
padding: 10px;
border-radius: 8px;
position: absolute;
margin-top: 70px;
right: 0;
top: 187px;
top: 27%; /* Adjust this value to position it vertically within the banner */
transform: translateY(-50%);
}
.aboutme p { /* #40514E */
font-size: 20px;
margin: 12px 0;
padding: 8px;
border-radius: 4px;
transition: background-color 0.2s;
}
.aboutme p:hover {
background-color: #a8bdb3;
}
.aboutme a {
color: #333333;
}<div class="banner">
<!-- <img src="photos/GitHubprofile1.JPG" alt="Profile Photo" class="profile-photo">-->
</div>
<div class="credentials"> <!-- section of left side in the banner -->
<p>
<i class="fa-brands fa-linkedin"></i>
<a> Linkedin profile</a>
</p>
<p>
<a href="https://github/Gustavo-DCosta" target="_blank">
<i class="fa-brands fa-github"></i> GitHub profile
</a>
</p>
<p>
<i class="fa-solid fa-envelope-open-text"></i>
<a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
<div class="aboutme"> <!-- section of right side in the banner -->
<p>
<i class="fa-solid fa-graduation-cap"></i>
<a>1st Year Technology and Engineering, specializing in Sustainable Development (STI2D - French Technical High School Program)<br></a>
</p>
<p>
<i class="fa-solid fa-user"></i>
<a>I am 17 years old, 11th grade</a>
</p>
</div>1 Answer
Reset to default 2I think there are some misunderstandings in your code. Let me explain to you what should be improved.
HTML Containers
First, you closed your banner div directly after opening it:
<div class="banner">
<!-- <img src="photos/GitHubprofile1.JPG" alt="Profile Photo" class="profile-photo">-->
</div> <!-- This is the close tag --!>
Instead, you should close it after the aboutme div:
<div class="banner">
<!-- <img src="photos/GitHubprofile1.JPG" alt="Profile Photo" class="profile-photo">-->
<div class="credentials"> <!-- section of left side in the banner -->
<p>
<i class="fa-brands fa-linkedin"></i>
<a> Linkedin profile</a>
</p>
<p>
<a href="https://github/Gustavo-DCosta" target="_blank">
<i class="fa-brands fa-github"></i> GitHub profile
</a>
</p>
<p>
<i class="fa-solid fa-envelope-open-text"></i>
<a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
<div class="aboutme"> <!-- section of right side in the banner -->
<p>
<i class="fa-solid fa-graduation-cap"></i>
<a>1st Year Technology and Engineering, specializing in Sustainable Development (STI2D - French Technical High School Program)<br></a>
</p>
<p>
<i class="fa-solid fa-user"></i>
<a>I am 17 years old, 11th grade</a>
</p>
</div>
</div>
CSS Positioning
Absolute Positions
Don't use properties like top, bottom, left, right and position: absolute; if you want to locate something within another container. These properties are used to locate something independently to all other elements.
Flexbox
The display: flex; property already ensures, that the containers within the container are located with equal space. Therefore, you don't need to set transform or margin.
Z-Index
If you are using the z-index: -1; property, other elements such as the body overlap the div and make it unreachable for the cursor. Therefore, functions like hover or clicks have no effect.
Final CSS Code:
This css code is using only the necessary properties to locate the credentials and aboutme divs within the banner:
.banner {
width: 100%;
height: 175px;
background-color: #E6D5C7;
position: relative;
margin-top: 225px;
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.profile-photo {
width: 250px;
height: 200px;
border-radius: 20%;
margin-top: -100px;
object-fit: cover;
position: relative;
z-index: 2;
}
.credentials {
width: 500px;
padding: 10px;
border-radius: 8px;
text-align: center; /* Ensures text inside is centered */
gap: 8px; /* Adds spacing between elements */
}
.credentials p {
font-size: 20px;
margin: 12px 0;
padding: 8px;
border-radius: 4px;
transition: background-color 0.2s;
}
.credentials p:hover {
border-radius: 4px;
background-color: #a8bdb3;
}
.credentials a {
color: #333333;
text-decoration: none;
}
.aboutme {
width: 500px;
padding: 10px;
border-radius: 8px;
text-align:center;
}
.aboutme p { /* #40514E */
font-size: 20px;
margin: 12px 0;
padding: 8px;
border-radius: 4px;
transition: background-color 0.2s;
}
.aboutme p:hover {
background-color: #a8bdb3;
}
.aboutme a {
color: #333333;
}<div class="banner">
<!-- <img src="photos/GitHubprofile1.JPG" alt="Profile Photo" class="profile-photo">-->
<div class="credentials"> <!-- section of left side in the banner -->
<p>
<i class="fa-brands fa-linkedin"></i>
<a> Linkedin profile</a>
</p>
<p>
<a href="https://github/Gustavo-DCosta" target="_blank">
<i class="fa-brands fa-github"></i> GitHub profile
</a>
</p>
<p>
<i class="fa-solid fa-envelope-open-text"></i>
<a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
<div class="aboutme"> <!-- section of right side in the banner -->
<p>
<i class="fa-solid fa-graduation-cap"></i>
<a>1st Year Technology and Engineering, specializing in Sustainable Development (STI2D - French Technical High School Program)<br></a>
</p>
<p>
<i class="fa-solid fa-user"></i>
<a>I am 17 years old, 11th grade</a>
</p>
</div>
</div>You have to scroll down a bit to see the result of the code snippet.
credentialsandaboutmedivs be located within the banner? – Lukinator Commented Feb 17 at 11:29bannerin the red box showed in the image – Gustavo Da Costa Pereira Commented Feb 17 at 11:37