HTML webpage shows up on my IDE (brackets), but not on my server

StackOverflow https://stackoverflow.com/questions/20387715

  •  29-08-2022
  •  | 
  •  

Question

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!

Was it helpful?

Solution

I tested you code and it looks good. I would imagine is has to do with your server setup.

This line looks like it could be problematic

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico" />

Do you have php enabled on your server? Does your file have a php extension?

My thought would be that the ?> might be ending your link tag and causing some sort of issue.

If you have a url where I could look at it I might be able to help you out more.

EDIT:

the url you sent does what I am describing above.

<DOCTYPE html>
<html>
    <head>
        <title> YHS Alumni Association | Home </title>
        <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8"> 
        <link rel="shortcut icon" href="Fatal error: Call to undefined function get_stylesheet_directory_uri() in /home/u190182631/public_html/YMHS Alumni Association Website/home.html on line 7

Remove the line <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico" /> and it should work.

The php function you want to call does not exist.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top