Unable to view newly added components

I am currently in the process of setting up a website, focusing on arranging and formatting everything on the page before moving on to styling and adding JavaScript. I recently added three div tags after my form to create three separate columns in the next row. However, despite adding borders in my CSS to visualize the boxes and headings, nothing seems to be showing up. Any assistance in solving this issue would be greatly appreciated!


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="operationStyle.css">
<title>Operation:Educate Children</title>
<script language="javascript" type="text/javascript">
        image1=new Image();
        image1.src="supermario.png";
        image2=new Image();
        image2.src="mario.png";
</script>
</head>
<body>  
<header class="header">
    <img src="mario.png" alt="header"/>
    <h2>"Only the educated are free-Epictetus"</h2>
</header>




<table>
<tr>
<th><a href="educatedChilren.html">Home</a></th>
<th><a href="aboutUs.html">About Us</a></th>
<th><a href="currentProject.html">Current Project</a></th>
<th><a href="getInvolved.html">Get Involved</a></th>
<th><a href="Calendar.html">Calendar</a></th>
<th><a href="Donate.html">Donate</a></th>
</tr>
</table>


<div id="slideshow">
<img class="slide" name="slide" src="supermario.png" width="100" height="200">
<script>
var step=1;
function slideit(){
if(!document.images)
return;
document.images.slide.src=eval("image"+step+".src")
if(step<2)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
<div>
<div class="contact">
<h2>Contact Us!</h2>
<form action="contact.php" method="post">
<strong>Name:</strong>
<input type="text" name="name"><br></br>
<strong>E-Mail:</strong>
<input type="text" name="email"><br></br>
<strong>Message:</strong>
<textarea name="message" cols="25" rows="12"></textarea>
<input type="submit" value="Send">
<input type="reset" value="Clear">
</form
</div>

<div class="events">
<h3><strong>Upcoming Events</strong></h3>
</div>

<div class="follow">
<h3><strong>Follow Us!</h3></strong>
</div>

<div class="blog">

</div>



</body>
</html>

BODY{
margin-left:15%;
margin-right:15%;
}

.header h2{
color:blue;
text-align:right;
border:5px solid black;
font-family:'Bookman Old Style',serif;
font-size:10pt;
font-style:italic;
width:28%;
float:right;
height:200px;

}


.header img{
width:70%;
float:left;
border:thin black;
height:200px;
}
table{
border:5px solid black;
width:100%;
height:75px;
clear:left;
}

.slide{
border:5px solid black;
width:70%;
height:400px;
float:left;
}

.contact{
border:5px solid black;
width:27%;
height:400px;
float:right;
}

.contact h2{
text-align:center;
}

.contact form{
margin-left:2%;
}

img.slide{
position:absolute;
left:0;
top:0;
}

#slideshow{
position:relative;
overflow:hidden;
}

.events{
float:left;
width:33%;
border:black;
height:200px;
}

.follow{
float:left;
width:33%;
border:black;
height:200px;
}

.blog{
float:left;
width:33%;
height:200px;
border:black;
}

Answer №1

Check out this particular line:

<h3><strong><Follow Us!></h3></strong>

Using < and > within the strong tag can cause issues with your HTML. Additionally, your tags are not in the correct order. It is recommended to modify the line as follows:

<h3><strong>Follow Us!</strong></h3>

Furthermore, please ensure that the closing tag for your last form is properly closed.

Answer №2

It appears there are a few closing tags that are not in the correct order:

<div class="follow">
    <h3><strong><Follow Us!></h3></strong>
</div>

The </h3> and </strong> tags need to be rearranged to

<h3><strong><Follow Us!></strong></h3>

Additionally, it seems like there is a missing closing form tag. The </form is lacking a closing >.

Answer №3

Revise your CSS like this:

.events, .follow, .blog { // they are all the same, why repeat code?
   float: left;
   width: 33%;
   border: 1px solid black;
   height: 200px;
}

Don't forget to add > after </form

You also need to include / in the slideshow div tag at the end </div>

(and correct the tag mentioned by Dany (<Follow Us!> as > Follow Us!)

After these changes, you will see the DIVs displaying correctly

Answer №4

It has been highlighted that there are syntax errors in your HTML code, causing the 3 <div> elements you inserted within the <div class="contact"> to be rendered incorrectly by browsers—resulting in them being truncated due to the specified height.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for setting up a vertical carousel in Bootstrap 5 with a stationary previous image?

Looking for assistance with my vertical carousel project. Is there a way to create a vertical carousel in bootstrap 5 with the previous image fixed? I found a slider on this website: zara.com/jp/en/ I want to maintain the previous image in a fixed posit ...

Toggling jQuery to show or hide content depending on the selector

I am looking to implement a jQuery-based animation and here is the code I have so far: >items=document.querySelectorAll("#customers td span"); [<span alt=​" 02,Counter,11,2013-04-06 14:​59:​16">​ 02​</span>​, <span>​11 ...

What is the best way to wrap a div in a vertical orientation?

I'm looking to create a vertical div around an image that fluidly changes width: |_________________| | |XXXXXX| | | |XXXXXX| | | |XXXXXX| | | |XXXXXX| | | |XXXXXX| | | |XXXXXX| | |-----------------| The cont ...

when a div contains another div and is then followed by another div, apply the following style

Is there a way to create a rule that functions like the following: .container .unit:first-child(if it contains div.box1.extra) + .box2 { top: 50px;} <div class="container"> <div class="unit"> <div class="box1 extra"><!-- co ...

Exploring the intricacies of using jquery text() with HTML Entities

I am having difficulty grasping the intricacies of the jquery text() function when used with HTML Entities. It appears that the text() function converts special HTML Entities back to regular characters. I am particularly uncertain about the behavior of thi ...

Retrieving Information From SVG Files

I have this code snippet saved in a local HTML file: <object id="PriceAdvisorFrame" type="image/svg+xml" data="https://www.kbb.com/Api/3.9.448.0/71071/vehicle/upa/PriceAdvisor/meter.svg?action=Get&amp;intent=buy-used&amp;pricetype=Private Party ...

What is the best way to display a list of database records using Django?

Is there anyone who can assist me with this? I have a list of 60 records from a Django database in my HTML file. My goal is to display that list in a table with 6 columns and 10 rows. However, when using the {% for %} command in the HTML file, the list app ...

Styling the background of a navigation menu specifically for mobile devices using CSS

Currently, my focus is on developing the website I am using Elementskit nav builder and I aim to change the background color of the navigation menu on mobile and tablet devices to black The existing code snippet is as follows: margin-top: 6px; } @med ...

Customizing Material-UI Grid: Is it possible to assign a background color solely to the cells, without affecting the surrounding empty spaces?

I've been experimenting with designing a grid system that incorporates a gradient background color. The issue I'm facing is that the background color extends to the empty spaces between the grid cells as well. Is there a way to scope the gradient ...

jQuery class does not apply correctly in IE9

Currently, I'm designing a menu for a WordPress theme and facing a styling issue. I aim to differentiate between menu items with submenus and those without by applying different styles on hover. Here's the jQuery code snippet I am using: $(docum ...

Form-select failing to transmit data

There seems to be an issue with one specific HTML field not sending data. This is my HTML code: <form id="login_registro_form" role="form" method="post" action="./controllers/register.php"> <div cl ...

The functionality of the dynamic text box is disrupted when a form element is added

I am in the process of developing a form and am looking to create dynamic text boxes using Bootstrap. The code that I have currently works as expected: $(function() { $(document).on('click', '.btn-add', function(e) { e.preventD ...

When attempting to use the .split method, an error is thrown stating that addEventListener is not

I'm attempting to create a table that automatically fills in the next input when I select options from MySQL. However, when I run this code, I get an error saying "addEventListener is not a function." I'm not very familiar with JavaScript, so I&a ...

Is it possible to verify the presence of an ID with jQuery?

Is it possible to check for the existence of the id 'input-name' before assigning a value to the variable name using a line of code similar to this: var name = $('#input-name').attr("value"); In case the id 'input-name' does ...

"Unable to move past the initial segment due to an ongoing

My portfolio webpage includes a "blob" and "blur" effect inspired by this YouTube video (https://www.youtube.com/watch?v=kySGqoU7X-s&t=46s). However, I am encountering an issue where the effect is only displayed in the first section of the page. Even a ...

When clicking on a div with the CSS property user-select set to none, the selected text in a contenteditable element is

I'm currently working on a unique JavaScript rich text editor that utilizes div elements with the CSS property user-select: none instead of traditional buttons. While this approach works perfectly in Firefox, I've encountered a major issue with G ...

What could be causing the no-repeat functionality to fail on these background images, and what steps can be taken to prevent the list text from overlapping with the image?

UPDATE EDIT. There is still an unresolved issue with this problem. Although setting the background to no-repeat fixed the image repetition problem, the list item text still overlaps the background image and there is an extra tick to the left. Please refer ...

Exploring the tab-content features of Bootsrap 5 through anchor tags

In the previous version of Bootstrap, the tab-pane used to fade in active. However, in the new version, it is now: tab-pane fade show active. What other improvements can I make? <!DOCTYPE html> <html lang="en"> <head> <m ...

Is it possible for links to remain clickable even if they pass underneath a div

I have implemented a shadow using a div element to cover some content beneath it. However, I am facing an issue where the div that is under the shadow cannot be interacted with. Is there any solution to this problem? Thank you ...

Manipulating content with JavaScript in Internet Explorer using the outerHTML property is a powerful

Encountering an Issue with outerHTML in IE Browser If I try the following: txt = "Update Complete!"; msg = sub.appendChild(d.createElement("p")); msg.outerHTML = txt; It works without any problem. However, if I use: txt = "1 Error:<ul><li> ...