Skip to main content

Content Overflows Other Sections

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

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

ValueError: X has 10 features, but LinearRegression is expecting 1 features as input

So, I am trying to predict the model but its throwing error like it has 10 features but it expacts only 1. So I am confused can anyone help me with it? more importantly its not working for me when my friend runs it. It works perfectly fine dose anyone know the reason about it? cv = KFold(n_splits = 10) all_loss = [] for i in range(9): # 1st for loop over polynomial orders poly_order = i X_train = make_polynomial(x, poly_order) loss_at_order = [] # initiate a set to collect loss for CV for train_index, test_index in cv.split(X_train): print('TRAIN:', train_index, 'TEST:', test_index) X_train_cv, X_test_cv = X_train[train_index], X_test[test_index] t_train_cv, t_test_cv = t[train_index], t[test_index] reg.fit(X_train_cv, t_train_cv) loss_at_order.append(np.mean((t_test_cv - reg.predict(X_test_cv))**2)) # collect loss at fold all_loss.append(np.mean(loss_at_order)) # collect loss at order plt.plot(np.log(al...
Post a Comment
Read more

Sorting large arrays of big numeric stings

I was solving bigSorting() problem from hackerrank: Consider an array of numeric strings where each string is a positive number with anywhere from to digits. Sort the array's elements in non-decreasing, or ascending order of their integer values and return the sorted array. I know it works as follows: def bigSorting(unsorted): return sorted(unsorted, key=int) But I didnt guess this approach earlier. Initially I tried below: def bigSorting(unsorted): int_unsorted = [int(i) for i in unsorted] int_sorted = sorted(int_unsorted) return [str(i) for i in int_sorted] However, for some of the test cases, it was showing time limit exceeded. Why is it so? PS: I dont know exactly what those test cases were as hacker rank does not reveal all test cases. source https://stackoverflow.com/questions/73007397/sorting-large-arrays-of-big-numeric-stings
Post a Comment
Read more

How to load Javascript with imported modules?

I am trying to import modules from tensorflowjs, and below is my code. test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title </head> <body> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script> <script type="module" src="./test.js"></script> </body> </html> test.js import * as tf from "./node_modules/@tensorflow/tfjs"; import {loadGraphModel} from "./node_modules/@tensorflow/tfjs-converter"; const MODEL_URL = './model.json'; const model = await loadGraphModel(MODEL_URL); const cat = document.getElementById('cat'); model.execute(tf.browser.fromPixels(cat)); Besides, I run the server using python -m http.server in my command prompt(Windows 10), and this is the error prompt in the console log of my browser: Failed to loa...
Post a Comment
Read more