I'm a beginner to all of this coding and simply trying to build my store's website from scratch. I've learned a lot in HTML codes so far, and have come across this tab content style that would benefit many of our pages. Unfortunately, I can't seem to find a way to get around the fact that the code doesn't build a frame around the entire content style that is submitted, so when I submit this code to the site and attempt to add a new section, the tab code overlaps the new section. It looks like the frame only goes around the text content, and stops when the <div class="tab"> starts.
For reference: see the image attached of the code submitted to the webpage with the content overlapping on the new "TESTTEST1212" text section.
Code Submitted with overlapping "test" section
See HTML Tab Content Section Code Below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
.tab {
float: left;
border: 1px solid #ccc;
background-color: #white;
width: 30%;
height: 800px;
}
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #ecedee;
}
.tab button.active {
background-color: #ecedee;
}
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ecedee;
width: 70%;
border-left: none;
height: 800px;
}
</style>
</head>
<body>
<center><h2><font size="6">Diamond Shapes</font></h2>
<p>Explore the enchanting world of diamond cutting and diamond shapes. Click to learn more about each of the diamond shapes and the unique features they have to offer.</p></center>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Round')" id="defaultOpen">Round</button>
<button class="tablinks" onclick="openCity(event, 'Princess')">Princess</button>
<button class="tablinks" onclick="openCity(event, 'Oval')">Oval</button>
</div>
<div id="Round" class="tabcontent">
<center><h3>Round Cut Diamond</h3></center>
<p>The exceptional round brilliant diamond has been engineered to achieve optimum light return. When each of its 58 facets is cut with perfect precision, this abundance of light creates a balance of fire, brilliance, and scintillation. All of this translates to a striking, sparkling diamond.
<br><br>
Marcel Tolkowsky, a mathematician and engineer, is widely credited with creating the ‘ideal cut’ proportions for a round brilliant-cut diamond. His original design provided the foundations of a round-cut diamond, which has since been improved to further light return and better suit modern diamond cutting techniques.</p>
</div>
<div id="Princess" class="tabcontent">
<center><h3>Princess Cut Diamond</h3></center>
<p>Princess cut diamonds are clean and elegant diamond shapes that typically associate with modern, but timeless engagement ring styles. The chevron facets provide an exceptional amount of fire (the colored flashes of light that diamonds exhibit) as well as fantastic scintillation. The cut was developed in the 1960’s and blends the linear essence of step-cut (such as emerald and asscher), but the brilliant facet patterning makes it more adept at hiding inclusions and producing sparkle.
<br><br>
Princess cut diamonds are an extremely popular diamond shape, second only to the esteemed round brilliant.</p>
</div>
<div id="Oval" class="tabcontent">
<center><h3>Oval Cut Diamond</h3></center>
<p>Oval diamonds are an elongated, modified brilliant shape. They are known for their extremely flattering silhouette, which can lengthen the appearance of the wearer’s fingers, and give impressive dimensions on the hands for a fairly moderate carat weight. Oval diamonds have been adored since the mid 1900s.
<br><br>
While their popularity ebbs and flows, they have remained a steady constant in the world of bridal jewelry since their emergence onto the market. A superb sparkle and pleasing shape make oval diamonds an excellent choice for the centre-piece of an engagement ring and other fine jewelry.</p>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
I apologize in advance if my code/html wording is incorrect. I'm still learning. Thank you for your help!
I tried to build a tab content section on my web page and add a new section afterwards. The new section is overlapped by the tab content section as the tab content section has no built frame around it.
Via Active questions tagged javascript - Stack Overflow https://ift.tt/wQKps2r
Comments
Post a Comment