How do I make text overlap a shape in HTML/CSS? - html

Question

Here, I'm making a food pyramid that has interactive buttons that allow you to add and take away the amount your of food your eating in each section of the pyramid. But, I'm not sure how to make the counter for each sector (the first triangle and then each trapezoid) overlap the circle its meant to be on. For example in the first sector (the triangle) there meant to be a circle in the middle of it that contains the counter on top of it and then a plus sign on the right, and a minus sign on the left.
.triangle {
border-bottom: 150px solid #FF6347;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
height: 0;
width: 0;
margin-left: auto;
margin-right: auto;
white-space: nowrap;
display: block;
}
.trapezoid {
border-bottom: 100px solid #f58c57;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
width: 220px;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
}
.trapezoid1 {
border-bottom: 100px solid #fff894;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
width: 360px;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
}
.trapezoid2 {
border-bottom: 100px solid #83ccde;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
width: 480px;
margin-left: auto;
margin-right: auto;
}
.trapezoid3 {
border-bottom: 100px solid #a87d5c;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
width: 600px;
margin-left: auto;
margin-right: auto;
}
.trapezoid4 {
border-bottom: 100px solid #9effa6;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
width: 720px;
margin-left: auto;
margin-right: auto;
}
.circle1{
height: 45px;
width: 45px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 100px;
margin-left: -22px;
margin-right: auto;
opacity: 0.7;
}
.circle2{
height: 50px;
width: 50px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 45px;
margin-left: 87px;
margin-right: auto;
opacity: 0.7;
}
.circle3{
height: 50px;
width: 50px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 45px;
margin-left: 158px;
margin-right: auto;
opacity: 0.7;
}
.circle4{
height: 50px;
width: 50px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 25px;
margin-left: 219px;
margin-right: auto;
opacity: 0.7;
}
.circle5{
height: 50px;
width: 50px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 25px;
margin-left: 279px;
margin-right: auto;
opacity: 0.7;
}
.circle6{
height: 50px;
width: 50px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 25px;
margin-left: 339px;
margin-right: auto;
opacity: 0.7;
}
.button1 {
background-color: white;
border: none;
padding: 20px;
height: 5px;
width: 5px;
display: none;
margin-left: 0px;
cursor: pointer;
border-radius: 50%;
position: relative;
left: 0px;
top: -18px;
opacity: 0.7;
text-align: center;
text-decoration: none;
line-height: 5px;
}
.button2{
background-color: white;
border: none;
padding: 20px;
height: 5px;
display: none;
width: 5px;
margin-left: 0px;
cursor: pointer;
border-radius: 50%;
position: relative;
left: -147px;
top: -18px;
opacity: 0.7;
text-align: center;
text-decoration: none;
line-height: 5px;
}
.button3 {
background-color: white;
border: none;
padding: 20px;
height: 10px;
width: 10px;
display: none;
margin-left: 0px;
cursor: pointer;
border-radius: 50%;
position: relative;
left: 3px;
top: -23px;
opacity: 0.7;
text-align: center;
text-decoration: none;
line-height: 5px;
}
.button4 {
background-color: white;
border: none;
padding: 20px;
height: 10px;
width: 10px;
display: none;
margin-left: 0px;
cursor: pointer;
border-radius: 50%;
position: relative;
left: 30px;
top: -73px;
opacity: 0.7;
text-align: center;
text-decoration: none;
line-height: 5px;
}
.button5 {
background-color: white;
border: none;
padding: 20px;
height: 10px;
width: 10px;
display: none;
margin-left: 0px;
cursor: pointer;
border-radius: 50%;
position: relative;
left: 5px;
top: -23px;
opacity: 0.7;
text-align: center;
text-decoration: none;
line-height: 5px;
}
.button6 {
background-color: white;
border: none;
padding: 20px;
height: 10px;
width: 10px;
display: none;
margin-left: 0px;
cursor: pointer;
border-radius: 50%;
position: relative;
left: -168px;
top: -23px;
opacity: 0.7;
text-align: center;
text-decoration: none;
line-height: 5px;
}
.button7 {
background-color: white;
border: none;
padding: 20px;
height: 10px;
width: 10px;
display: none;
margin-left: 0px;
cursor: pointer;
border-radius: 50%;
position: relative;
left: 5px;
top: -23px;
opacity: 0.7;
text-align: center;
text-decoration: none;
line-height: 5px;
}
.button8 {
background-color: white;
border: none;
padding: 20px;
height: 10px;
width: 10px;
display: none;
margin-left: 0px;
cursor: pointer;
border-radius: 50%;
position: relative;
left: -167px;
top: -23px;
opacity: 0.7;
text-align: center;
text-decoration: none;
line-height: 5px;
}
.button9 {
background-color: white;
border: none;
padding: 20px;
height: 10px;
width: 10px;
display: none;
margin-left: 0px;
cursor: pointer;
border-radius: 50%;
position: relative;
left: 6px;
top: -23px;
opacity: 0.7;
text-align: center;
text-decoration: none;
line-height: 5px;
}
.button10 {
background-color: white;
border: none;
padding: 20px;
height: 10px;
width: 10px;
display: none;
margin-left: 0px;
cursor: pointer;
border-radius: 50%;
position: relative;
left: -168px;
top: -23px;
opacity: 0.7;
text-align: center;
text-decoration: none;
line-height: 5px;
}
.button11 {
background-color: white;
border: none;
padding: 20px;
height: 10px;
width: 10px;
display: none;
margin-left: 0px;
cursor: pointer;
border-radius: 50%;
position: relative;
left: 6px;
top: -23px;
opacity: 0.7;
text-align: center;
text-decoration: none;
line-height: 5px;
}
.button12 {
background-color: white;
border: none;
padding: 20px;
height: 10px;
width: 10px;
display: none;
margin-left: 0px;
cursor: pointer;
border-radius: 50%;
position: relative;
left: -169px;
top: -23px;
opacity: 0.7;
text-align: center;
text-decoration: none;
line-height: 5px;
}
.piece:hover .button1, .piece:hover .button2, .piece:hover .button3, .piece:hover .button4, .piece:hover .button5, .piece:hover .button6, .piece:hover .button7, .piece:hover .button8, .piece:hover .button9, .piece:hover .button10, .piece:hover .button11, .piece:hover .button12{
display: inline-block;
opacity: 0.7;
}
.text1{
text-align: center;
line-height: 0px;
font-family: "helvetica",serif;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assignment01.css">
</head>
<body>
<h1 style = "font-family: helvetica"><center>Figure 1</center></h1>
<script type="text/javascript">
var clicks = 0;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
function onClickm() {
clicks -= 1;
document.getElementById("clicks").innerHTML = clicks;
}
</script>
<p class= "text1" id="clicks">0</p>
<div class="triangle piece">
<div class="circle1 "></div>
<div class="button1 " onClick="onClick()"><span>+</span></div>
<div class="button2" onClick="onClickm()"><span>-</span></div>
</div>
<div class="trapezoid piece">
<div class="circle2 "></div>
<div class="button3"><span>+</span></div>
<div class="button4"><span>-</span></div>
</div>
<div class="trapezoid1 piece">
<div class="circle3 "></div>
<div class="button5"><span>+</span></div>
<div class="button6"><span>-</span></div>
</div>
<div class="trapezoid2 piece">
<div class="circle4 "></div>
<div class="button7"><span>+</span></div>
<div class="button8"><span>-</span></div>
</div>
<div class="trapezoid3 piece">
<div class="circle5 "></div>
<div class="button9"><span>+</span></div>
<div class="button10"><span>-</span></div>
</div>
<div class="trapezoid4 piece">
<div class="circle6 "></div>
<div class="button11"><span>+</span></div>
<div class="button12"><span>-</span></div>
</div>
<h2 style = "font-family: helvetica"><center>My Food Pyramid</center></h2>
<label style = "font-family: helvetica" for="name"><center>Please Enter The Date:</center></label>
<center><input type="text" id="name" name="name" required maxlength="9" size="10"></center>
</body>
</html>

Answer 1

Why not place the counter directly in the circle in the HTML?
<div class="triangle piece">
<div class="circle1 "><p class= "text1" id="clicks">0</p></div>
<div class="button1 " onClick="onClick()"><span>+</span></div>
<div class="button2" onClick="onClickm()"><span>-</span></div>
</div>
Then you can use the .text1 css to position it exactly in the center.
.circle1{
height: 45px;
width: 45px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
margin-top: 100px;
margin-left: -22px;
margin-right: auto;
opacity: 0.7;
position: relative;
}
.text1{
text-align: center;
line-height: 0px;
font-family: "helvetica",serif;
font-size: 20px;
position: absolute;
left: 18px;
top: 5px;
}
Because the counter is within the circle and the circle has position:relative the text will be positioned absolute with regards to the circle it's in.