. Anyways, here's my "problem"...
In my Web Design class, I'm working on a business website that is supposed to be 5+ pages. I was trying to use CSS to make my website a little better, but I'm completely new to CSS and don't know very much about it (all the code I've got so far was told to me by the teacher's assistant: a lot of it I don't quite understand). I was trying to start my navigation bar on Friday, and it seemed to be okey. When Monday came, I opened up my index.html file in IE and the navigation bar was all the way to the right, with the leftmost part of it just in the center of the window. Here's the code:
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>CoRe computer Repair</title>
<style type="text/css">
html,body {
margin: 0;
padding: 0;
height: 100%;
background-color: #555;
font-family: helvetica;
}
#container {
width: 100%;
height: 100%;
text-align: center;
}
.top, .bottom {
width: 70%;
margin: auto;
}
.top {
height: 35%;
background-color: blue;
text-align: center;
position: relative;
}
.bottom {
height: 65%;
background-color: red;
}
#logo {
margin-top: 20px;
}
.top table {
width: 100%;
border-collapse: collapse;
margin: 0;
padding: 0;
position: absolute;
border: none;
bottom: 0;
}
` .top table td {
margin: 0;
padding: 0;
text-align: center;
border: none;
}
.top table a {
display: block;
width: 100.5%;
height: 40px;
line-height: 40px;
text-decoration: none;
background-color: green;
color: white;
font-weight: bold;
}
.top table a:hover {
background-color: darkgreen;
}
</style>
</head>
<body>
<div id="container">
<div class="top">
<img src="images/logo.png" alt="CoRe" id="logo"><br>
<table>
<tr>
<td><a href="#">Home</a></td>
<td><a href="#">Home</a></td>
<td><a href="#">Home</a></td>
<td><a href="#">Home</a></td>
<td><a href="#">Home</a></td>
</tr>
</table>
</div>
<div class="bottom">
</div>
</div>
</body>
</html>
Thanks to anyone who helps in advance ^^
