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>