I am making a tribute page to improve my html and css. Let me show you the problem with photos:
the problem I want to show
so the small card on the left has display: inline-block. I don’t want the text right to the card like that.
I want the space i draw with yellow color to be gone. How can i fix this? (by the way the class of small card on the left is mini-card)
Here is the html code:
<body>
<div class="background-container">
<div class="long-information">
<h2 style="flex: 100%;">Early Life
<hr>
</h2>
<span style="flex: 100%;">Cristiano Ronaldo dos Santos Aveiro was born on 5 February 1985 in the São Pedro parish of Funchal,
the
capital of the Portuguese island of Madeira, and grew up in the nearby parish of Santo António. He is
the fourth and youngest child of Maria Dolores dos Santos Viveiros da Aveiro, a cook, and José Dinis
Aveiro,
a municipal gardener and part-time kit man. His great-grandmother on his father's side, Isabel da
Piedade, was from the island of São Vicente, Cape Verde. He has one older brother, Hugo, and two older
sisters, Elma and Liliana Cátia "Katia". He was named after actor and U.S. President Ronald Reagan, whom
his father was a fan of. His mother revealed that she wanted to abort him due to poverty, his father's
alcoholism, and having too many children already, but her doctor refused to perform the procedure,
as abortions were illegal in Portugal at that time. Ronaldo grew up in an impoverished Catholic
Christian home, sharing a room with all his siblings.
<br><br>
As a child, Ronaldo played for Andorinha from 1992 to 1995, where his father was the kit man, and
later spent two years with Nacional. In 1997, aged 12, he went on a three-day trial with Sporting CP,
who
signed him for a fee of £1,500.He subsequently moved from Madeira to Alcochete, near Lisbon, to join
Sporting's youth academy.By age 14, Ronaldo believed he had the ability to play semi-professionally and
agreed with his mother to cease his education to focus entirely on football. With a troubled life as a
student and living in Lisbon area away from his Madeiran family, he didn't complete schooling beyond the
6th grade. While popular with other students at school, he had been expelled after throwing a chair
at his teacher, who he said had "disrespected" him. One year later, he was diagnosed with tachycardia, a
condition that could have forced him to give up playing football. Ronaldo underwent heart surgery where
a laser was used to cauterise multiple cardiac pathways into one, altering his resting heart rate. He
was discharged from the hospital hours after the procedure and resumed training a few days later.</span>
<br> <br>
<h2>Club Career
<hr>
</h2>
<span style="font-size: 35px; font-weight: bold; margin-left: 15px;">Sporting CP</span> <br>
<span>At age 16, Ronaldo was promoted from Sporting's youth team by first-team manager László Bölöni, who
was impressed with his dribbling. He subsequently became the first player to play for the club's
under-16, under-17 and under-18 teams, the B team and the first team, all within a single season. A
year later, on 29 September 2002, Ronaldo made his debut in the Primeira Liga, against Braga and on 7
October, he scored two goals against Moreirense in their 3–0 win. Over the course of the 2002–03
season, his representatives suggested the player to Liverpool manager Gérard Houllier and Barcelona
president Joan Laporta. Manager Arsène Wenger, who was interested in signing Ronaldo, met with him
at Arsenal's stadium in November to discuss a possible transfer.
<br> <br>
Manchester United manager Alex Ferguson was determined to acquire Ronaldo on a permanent move urgently,
after Sporting defeated United 3–1 at the inauguration of the Estádio José Alvalade in August 2003.
Initially, United had planned to sign Ronaldo and loan him back to Sporting for a year. Having been
impressed by him, the United players urged Ferguson to sign him. After the game, Ferguson agreed to pay
Sporting £12.24 million for what he considered to be "one of the most exciting young players" he had
ever seen. A decade after his departure from the club, in April 2013, Sporting honoured Ronaldo by
selecting him to become their 100,000th member.</span>
<br><br>
<span style="font-size: 35px; font-weight: bold; margin-left: 15px;">Manchester United</span> <br> <br>
<span style="margin-left: 15px; font-weight:bold;">2003-2007: Development and Breakthrough</span> <br> <br>
<span>Ronaldo's move to Manchester United was completed on 12 August 2003, too late for the 2003 FA
Community Shield but in time for their game against Bolton Wanderers on the opening day of the 2003–04
season, and made him the first Portuguese player to sign for the club. His transfer fee made him, at
the time, the most expensive teenager in English football history. Although he requested the number
28, his number at Sporting, he received the squad number 7 shirt, which had previously been worn by such
United players as George Best, Eric Cantona and David Beckham. Wearing the number 7 became an extra
source of motivation for Ronaldo. A key element in his development during his time in England proved
to be Ferguson, of whom he later said: "He's been my father in sport, one of the most important and
influential factors in my career."</span> <br>
<div class="mini-card">
<img src="img/17.jpg" alt="Photo cannot be found" id="mini-card-photo-1">
<p id="mini-card-text-1"">Ronaldo playing for Manchester United against Chelsea during the 2005–06 Premier League season</p></div><!----><span style="margin-top: 0; padding: 0; position: relative; top: 0;"> adsad</span>
</div>
<div class="card">
<h2 style="font-weight: bold; font-size: 35px;">CRISTIANO RONALDO</h2>
<div class="inner-card">
<img src="img/15.jpg" alt="Photo cannot be found" class="card-photo">
<img src="img/4.jpg" alt="Photo cannot be found" class="card-photo">
<div class="information-container">
<div class="personal-information-container">
<h3 id="personal-information">Personal Information</h3>
<p class="personal-information-text">Full Name</p> <span style="flex: 80%;">Cristiano
Ronaldo
dos Santos Aveiro</span>
<p class="personal-information-text">Date of Birth</p> <span style="flex: 80%;">5 February
1985
(age 38)</span>
<p class="personal-information-text">Place of Birth</p> <span style="flex: 80%;">Funchal,
Madeira, Portugal</span>
<p class="personal-information-text">Height</p> <span style="flex: 80%;">1.87 m (6 ft 2
in)</span>
<p class="personal-information-text">Position(s)</p> <span style="flex: 80%;">Forward</span>
</div>
<div class="team-information-container">
<h3 id="team-information">Team Information</h3>
<p class="team-information-text">Current Team</p> <span style="flex: 80%;">Al Nassr</span>
<p class="team-information-text">Number</p> <span style="flex: 80%;">7</span>
</div>
<div class="youth-career-container">
<h3 id="youth-career">Youth Career</h3>
<p class="youth-information-text">1992-1995</p> <span style="flex: 80%;">Andorinha</span>
<p class="youth-information-text">1995-1997</p> <span style="flex: 80%;">Nacional</span>
<p class="youth-information-text">1997-2002</p> <span style="flex: 80%;">Sporting CP</span>
</div>
<div class="senior-career-container">
<h3 id="senior-career">Senior Career</h3>
<h4 class="subtexts">Years</h4>
<h4 class="subtexts">Teams</h4>
<h4 class="subtexts">Apps</h4>
<h4 class="subtexts">(GIs)</h4>
<p class="senior-career-text">2002-2003</p>
<p class="senior-career-text">Sporting CP B</p>
<p class="senior-career-text">2</p>
<p class="senior-career-text">(0)</p>
<p class="senior-career-text">2002-2003</p>
<p class="senior-career-text">Sporting CP</p>
<p class="senior-career-text">25</p>
<p class="senior-career-text">(3)</p>
<p class="senior-career-text">2003-2009</p>
<p class="senior-career-text">Manchester United</p>
<p class="senior-career-text">196</p>
<p class="senior-career-text">(84)</p>
<p class="senior-career-text">2009-2018</p>
<p class="senior-career-text">Real Madrid</p>
<p class="senior-career-text">292</p>
<p class="senior-career-text">(311)</p>
<p class="senior-career-text">2009-2021</p>
<p class="senior-career-text">Juventus</p>
<p class="senior-career-text">98</p>
<p class="senior-career-text">(81)</p>
<p class="senior-career-text">2021-2022</p>
<p class="senior-career-text">Manchester United</p>
<p class="senior-career-text">40</p>
<p class="senior-career-text">(19)</p>
<p class="senior-career-text">2023-</p>
<p class="senior-career-text">Al Nassr</p>
<p class="senior-career-text">16</p>
<p class="senior-career-text">(14)</p>
</div>
<div class="international-career-container">
<h3 id="international-career">International Career</h3>
<p class="international-career-text">2001</p>
<p class="international-career-text">Portugal U15</p>
<p class="international-career-text">9</p>
<p class="international-career-text">(7)</p>
<p class="international-career-text">2001-2002</p>
<p class="international-career-text">Portugal U17</p>
<p class="international-career-text">7</p>
<p class="international-career-text">(5)</p>
<p class="international-career-text">2003</p>
<p class="international-career-text">Portugal U20</p>
<p class="international-career-text">5</p>
<p class="international-career-text">(1)</p>
<p class="international-career-text">2002-2003</p>
<p class="international-career-text">Portugal U21</p>
<p class="international-career-text">10</p>
<p class="international-career-text">(3)</p>
<p class="international-career-text">2004</p>
<p class="international-career-text">Portugal U23</p>
<p class="international-career-text">3</p>
<p class="international-career-text">(2)</p>
<p class="international-career-text">2003-</p>
<p class="international-career-text">Portugal</p>
<p class="international-career-text">200</p>
<p class="international-career-text">(123)</p>
</div>
<div class="signature-container">
<h3 id="signature">Signature</h3>
<img src="img/16.png" alt="Photo cannot be found" id="signature-photo">
</div>
</div>
</div>
</div>
</div>
</body>
Here is the CSS code:
.background-container {
background-color: rgb(19, 18, 18);
width: 99vw;
height: 200vh;
display: flex;
color: lightgray;
font-family: 'Roboto Condensed', sans-serif;
cursor: default;
}
* {
padding: 0;
margin: 0;
}
.long-information {
flex: 80%;
margin-left: 2px;
margin-left: 10px;
height: 100vh;
}
.card {
flex: 30%;
margin-left: 30px;
text-align: center;
display: inline-flex;
flex-direction: column;
align-items: center;
position: relative;
top: 50px;
height: 1140px;
width: 540px;
}
.inner-card {
border: 1px solid white;
outline: none;
width: 500px;
height: 1068px;
display: flex;
flex-wrap: wrap;
position: relative;
}
.card-photo {
left: 0;
flex: 50%;
height: 320px;
object-fit: cover;
width: 250px;
}
.information-container {
width: 500px;
height: 748px;
flex: 100%;
}
#personal-information {
flex: 100%;
background-color: rgb(150, 146, 132);
}
.personal-information-container {
position: relative;
display: flex;
flex-wrap: wrap;
}
.personal-information-text {
position: relative;
text-align: left;
padding-left: 1%;
display: inline-block;
flex: 19%;
}
.team-information-container {
display: flex;
flex-wrap: wrap;
}
#team-information {
flex: 100%;
background-color: rgb(150, 146, 132);
}
.youth-career-container {
display: flex;
flex-wrap: wrap;
}
#youth-career {
flex: 100%;
background-color: rgb(150, 146, 132);
}
.senior-career-container {
display: flex;
flex-wrap: wrap;
}
#senior-career {
flex: 100%;
background-color: rgb(150, 146, 132);
}
.subtexts {
flex: 25%;
text-align: left;
}
.team-information-text {
position: relative;
text-align: left;
padding-left: 1%;
display: inline-block;
flex: 19%;
}
.youth-information-text {
position: relative;
text-align: left;
padding-left: 1%;
display: inline-block;
flex: 19%;
}
.senior-career-text {
flex: 25%;
text-align: left;
}
.international-career-container {
display: flex;
flex-wrap: wrap;
}
#international-career {
flex: 100%;
background-color: rgb(150, 146, 132);
}
.international-career-text {
flex: 25%;
text-align: left;
}
.signature-container {
display: flex;
flex-wrap: wrap;
}
#signature {
flex: 100%;
background-color: rgb(150, 146, 132);
}
#signature-photo {
object-fit: contain;
width: 150px;
height: 150px;
margin-left: 175px;
background-color: rgb(150, 146, 132);
border: 2px solid rgb(19, 18, 18);
}
.long-information h2 {
text-align: center;
}
.mini-card {
display: inline-block;
width: 303px;
height: 290px;
border: 1px solid white;
position: relative;
left: 15px;
top: 20px;
overflow: hidden;
margin-right: 25px;
}
#mini-card-photo-1 {
width: 303px;
height: 215px;
}
#mini-card-text-1 {
margin: 0 3px;
}
.mini-card-row {
display: flex;
}
I made spaced text’s margin-top to be 0 , padding 0 and I made position: relative ; top: 0; but nothing worked.
2
Answers
okay, i couldn't find why that space gap ocurred but i fixed it. what i did was i defined display: flex; to the container that holds the mini-card and text, than i specified their width and height. after that i wrote align-content: flex-start; and problem solved
You can try use display: flex for mini-card. Then the image make width, height and flex-shrink: 0 for image not shrink. The text will use flex: 1 to use space remaining.