I am making a website for a friend, so I programmed it on Brackets, an IDE for a change instead of TextEdit. Anyway, everything was great, the page shows up great on Chrome (without a server or any sort of localhost). Now, I put it up on the server, but the webpage isn't coming out, just the organe background. Without the style page, it shows up fine (obviously without any sort of style), but with the style page it becomes screwed up. What did I do wrong?
<!DOCTYPE html>
<html>
<head>
<title> Alumni Association | Home </title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="about_us.html">About</a></li>
<li><a href="history.html">History</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="support.html">Support</a></li>
</ul>
</div>
<div id="header">
<h1>Alumni Association</h1>
</div>
<div id="body">
<div class="heading">
<h2>Home</h2>
</div>
<div id="imagebox">
<image src="images/Logo.png" alt="TEXT"></image>
</div>
<div class="textbox">
<p></p>
<div class = "heading"> <p>TITLE</p></div>
<p>
TEXT HERE
</p>
<div id="imagebox">
<image src="images/20131204_074026_3_bestshot.jpg" height="300px" width="400px"></image>
</div>
</div>
</div>
<div id = "login">
<div id="sidepane">
<div class="heading" style="border-radius:10px">
<h3><b>Login</b></h3>
</div>
<div class="textbox">
<form>
Username: <input type="text" name="username"><br><br>
Password: <input type="password" name="pword">
<input type="submit" value="Login">
</form>
</div>
</div>
<div id="sidepane" style>
<div class="heading" style="border-radius:10px">
<h3><b>Register</b></h3>
</div>
<div class="textbox">
<form method="link" action="registration.html">
<input type="submit" value="Register Now!">
</form>
</div>
</div>
</div>
</body>
</html>
My Style Sheet:
body{background-color:#CC7A29}
div#header{
text-align:center;
font-size:20pt;
color:#FFFFFF;
font-family:britannicbold;
background-color:#003965;
width:750px;
padding:5px;
float:middle;
margin-left: auto;
margin-right:auto;
}
div#body{
background-color:#3366CC;
margin-top; 0px;
margin-left: auto;
margin-right: auto;
width: 750px;
padding:5px;
}
div.heading{
text-align:center;
font-family:trebuchetms;
padding-left:2px;
background-color:#CC6600;
padding-top:3px;
padding-bottom:3px;
border-color:#000000;
border-width:5px;
border-style:solid;
}
div.textbox{
font-family:calibri;
font-size:16pt;
margin:5px;
padding:3px;
}
div#sidepane{
font-family:calibri;
padding:5px;
margin:7px;
margin-bottom:10px;
width:350px;
float:left;
background-color:#888888;
}
div#login{
width:750px;
margin:auto;
}
div#imagebox{
margin-left:auto;
margin-right:auto;
width: 375px;
}
h2{
font-size:30pt;
}
h3{
font-size:20pt;
}
div#navigation{
margin-left:auto;
margin-right:auto;
width:750px;
padding:5px;
background-color:#003965;
font-family:calibri;
}
ul
{
list-style-type:none;
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#003965;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#3366CC;
}
div#symbol{
position:absolute;
top:10px;
left:900px;
}
input[type="text"],input[type="password"]
{
width:300px;
}
input[type="text"]#short
{
width:100px;
}
input[type=submit] {
width: 200px;
height: 200px;
font-size: 18pt;
}
I would really appreciate any help I could get!
