When utilizing form for button navigation, the buttons fail to display on the screen

For a university assignment, I successfully created a website with a well-designed navigation system using two columns. The left column contained navigation buttons created using form and input elements, resulting in a visually appealing site that met my requirements perfectly. If you'd like to see how it looked, check out this link:

http://gyazo.com/38ed9ea8133e44c57209c6992d2a4554

Now, I'm attempting to recreate a similar site for personal reasons to enhance my understanding of CSS and HTML functionalities. However, despite using the same code, I'm facing an issue where the buttons are not displaying on the new site. I've reviewed both the CSS file and HTML code but can't seem to figure out why they won't appear on the redesigned site. Below is my CSS file along with the HTML code.

If you spot the reason behind this issue, please do let me know!
Here is my CSS

h1 {
    color:#FFFFFF;
    text-align:center;
}
body {
    margin-top:75px;
    margin-bottom:75px;
    margin-left:30px;
    margin-right:30px;
    background-color:#A9BCF5;
}
.bt {
    width:1050px;
}
.bt tr {
    margin:0;
    padding:4px;
    align:center;
    list-style-type:none;
}
.bt td {
    align:left;
}



And here is the html

<!DOCTYPE html>
    <head>
    <title>
        Test4CSS
    </title>
    <link rel="stylesheet" type="text/css" href="style.css">
     <h1>Test Heading Text for the site</h1>
    </head>
        <body>
            <table class="bt">
             <tbody>
              <tr>
               <td>
            <form action="index.html>
             <input type="submit" value="Home Page">
            </form>
            <form action="page1.html>
             <input type="submit" value="The First Page">
            </form>
            <form action="page2.html>
             <input type="submit" value="The Second Page">
            </form>
            <form action="page3.html>
             <input type="submit" value="The Third Page">
            </form>
            <form action="page4.html>
             <input type="submit" value="The Fourth Page">
            </form>
            <form action="page5.html>
             <input type="submit" value="The Fifth Page">
            </form>
              </td>
              <td>
            <p>
            This is the example text for the page, to understand<br>
            a little bit about the formatting that I have put in place.
            </p>
              </td>
             </tr>
            </table>
        </body>
</html>

Answer №1

Completing this task was simple - check out http://codepen.io/anon/pen/iwhnJ

You made some errors in your quotes.

<form action="index.html">
         <input type="submit" value="Home Page">
</form>

In the line above, the closing quotation marks were missing: <form action="index.html> This issue occurs with all your form elements; instead of <form action="page3.html>, you should use <form action="page3.html">

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

Uploading files using Remix.run: Transforming a File object into a string during the action

I'm currently developing a Remix application that allows users to upload files through a form. I have a handler function for handling the form submission, which takes all the form data, including file attachments, and sends it to my action. The probl ...

What are some ways to optimize the use of the jquery.mCustomScrollbar.js script?

I have a myriad of inquiries and would greatly appreciate your assistance in addressing them. Despite spending countless hours attempting to solve the issue independently, I have been unsuccessful. One question that plagues me is why, when using Google Ch ...

In AngularJS, when a user clicks on a specific element, the program should fetch the corresponding value from a separate dataset and display it

Hello, I am just starting out with angularjs and here is my current js file setup: angular.module("mainModule", []) .controller("mainController", function ($scope) { $scope.ProdMenu = [ {ProductMenuName: "CBS" ...

Best Practices for Prioritizing CSS Selection

My usual practice is to organize the rules in my CSS file to align with their corresponding elements in the HTML code. However, when it comes to global rules such as styling for input,textarea,p,tr,th, and so on, I wonder if there is a specific convention ...

Is there a way to create a responsive navbar using flexbox that automatically transitions into two rows at smaller screen sizes?

I've designed a sleek navbar located at the bottom of my webpage featuring a central logo leading to the home page, with two links on each side directing users to specific pages. Using @media CSS, I made it responsive by reducing its size as the scree ...

"Troubleshooting cross-domain issues with iframes in Internet Explorer

My application is built with angularjs and we offer the option to embed it on other websites. Everything works well in IE11, but when the application is iframed onto a different domain's website, it stops working. I've tried adding <meta htt ...

Placing an image beyond the boundaries of the design

Currently, I am in the process of creating a website that is 960px wide. One of my goals for this site is to have images on both sides of the header visible to those with larger screens. However, maintaining the site at 960px width poses a challenge when ...

Conceal the <p> element when the user interacts with the internal href

After creating this document using JQuery, whenever the user clicks on different internal links, a div with id = "change" is loaded which effectively "erases" the content. My challenge at the moment is that while images are successfully deleted, text rema ...

Having Trouble with the Bootstrap Responsive Menu Button Not Working

I'm struggling with the Bootstrap menu I created, as it's not collapsing or animating. Everything seems to be working fine except for the button that isn't functioning. <nav class="navbar navbar-expand-lg navbar-light bg-dark alb ...

What is the best way to change CSS style for a button when clicked using JavaScript?

Is there a way to switch the background style of a CSS div when clicking the same button? function changeBg() { var divElem = document.getElementById("change-bg"); if (divElem.style.backgroundColor === "yellow") { divElem.style.backgroundColor ...

Loading AJAX content within the existing page instead of a pop-up window

My goal is to have the page links load in a popup, but after adding this script, the page loads at the bottom instead. How can I make it open in a popup window instead? $('a[rel="ajax:jmodal"]').click(function(event) { $.ajax({ url: $(this).a ...

Ways to update CSS using alternate classes without relying on !important

I have a generic form in my code that styles all my buttons uniformly: input[type="button"],put[type="button"]:active,input[type="button"]:hover { width: 172px; height: 37px; line-height: 2 !important; margin: 11px 0px 0px 0px; padding ...

Having trouble manipulating DOM elements in Node.js with JSDOM?

Feeling a bit lost here - I'm a newbie to Node JS and I'm attempting to manipulate a DOM element within index.js, my main Node.js file. After reading up on the jsdom module, which supposedly allows you to interact with HTML elements in Node, I t ...

Display dynamic web content developed with JavaScript for public viewing

As a newcomer to the world of web development, I'm not sure if it's possible to achieve what I have in mind without using PHP. However, I'm willing to give it a shot. Currently, my webpage functions perfectly with JavaScript, HTML, and CSS, ...

Changing the name of a tab within a p-tabview

Setting up a p-tabview with tabs containing specific content involves the following code: <p-tabView class="tabmain" > <ng-container *ngFor="let tab of tabs"> <p-tabPanel [header]="tab.header" > ...

Step by step guide to showcasing images dynamically in user interface

My current project involves displaying a screen with an HTML table and an image. The HTML table is fully dynamic. The Code Working Process When the user loads a page (with a URL), I render an HTML table in different parts as the page loads. I retrieve al ...

One opportunity to interact with the menu by clicking only once

I am encountering an issue with a menu div that starts off with opacity set to 0 and visibility hidden. The purpose is for this div to become visible when clicking on another div (a menu that sticks to the top of my page, toggle-able via click). Everythin ...

The find element will yield an empty result when using XPath contains with Text() method

When checking for Gender and Date in the assertion, it returns false and the IWebElement displays an empty string. This anomaly only occurs with Gender and Date, while the rest provide accurate results. CODE IWebElement actualname = BrowserHelper.WebDri ...

Difficulties experienced when attempting to position content following the conversion from flash to html5

Before, I used a flash file within a tag to center it on my Wordpress Website. Now that I have converted it to html5 to serve content to Android browser users, I'm having trouble aligning the content in the center of the page for both Desktop and Andr ...

jQuery Swiper slider

I am currently working with the Swiper jQuery slider for my project. As a beginner in programming (js / jquery), I am looking to run a specific function, involving some jquery code, whenever the first slide of the slider is active. It seems that this can ...