Help: Creating a simple PHP template

Discussion in 'HTML & Website Design' started by LeeV18, Oct 18, 2010.

0
  1. #1
    So I've been trying to learn php by watching this video tutorial:
    http://www.youtube.com/watch?v=mnf0zemQpEI
    It's about how to create a simple php templates. I've watched the video and try to create one from it.

    After creating all the .php and .css as the video directed and uploading them to my webhost server to test it out, i've expected the page to look like this (like the one in the video tutorial):
    [​IMG]

    but instead, it looks like this:
    [​IMG]

    Did I do something wrong? Below are the source codes I used, from the video tutorial:

    â–  index.php
    <?php include('header.php'); ?>

<div id="content">
<div id="contentleft">
<p>contentleft</p>
</div>

<?php include('sidebar.php'); ?>
</div>

<?php include('footer.php'); ?>
    Code (markup):
    â–  header.php
    <html>
<head>
</link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</title>leev18.com</title>
</head>
<body>
<div id="header">
<div id="logo">
<p>LOGO</p>
</div>
<div id="hsubscribe">
<p>Header Subscribe</p>
</div>
</div>
</div id="navbar">
</p>navbar</p>
</div>
    Code (markup):
    â–  footer.php
    <div id="footer">
<p>footer</p>
</div>
</body>
</html>
    Code (markup):
    â–  sidebar.php
    <div id="sidebar">
<p>sidebar</p>
</div>
    Code (markup):
    â–  style.css
    # body {
    margin: 0px;
    padding: 0px;
    font-family: Calibri, Arial, Tahoma;
}

# header {
    width: 900px;
    margin: 0px auto 0px auto;
    border: 1px solid #000;
    clear: both;
}
    
# logo {
    width: 400px;
    float: left;
    boarder: 1px solid #000;
}

# hsubscribe {
    width: 400px;
    float: right;
    boarder: 1px solid #000;
}

# navbar {
    width: 900px;
    margin: 0px auto 0px auto;
    border: 1px solid #000;
    clear: both;
}

# content {
    width: 900px;
    margin: 0px auto 0px auto;
    border: 1px solid #000;
    clear: both;
}

# contentleft {
    width: 550px;
    float: left;
    boarder: 1px solid #000;
}

# sidebar {
    width: 300px;
    float: right;
    boarder: 1px solid #000;
}

# footer {
    width: 900px;
    margin: 0px auto 0px auto;
    border: 1px solid #000;
    clear: both;
}
    Code (markup):
     
    LeeV18, Oct 18, 2010 IP
  2. obehi

    obehi Member

    Messages:
    62
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #2
    These two lines of code are wrong: 

    
</link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</title>leev18.com</title>
    Code (markup):
    It should be like this:
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <title>leev18.com</title>
     
    obehi, Oct 18, 2010 IP
  3. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #3
    This line here is wrong, too

    
</p>navbar</p>
    Code (markup):
    You should not close a tag that's not open.

    Must be

    
<p>navbar</p>
    Code (markup):
    The CSS is wrong anyway...

    
# body {
    margin: 0px;
    padding: 0px;
    font-family: Calibri, Arial, Tahoma;
}

# header {
    width: 900px;
    margin: 0px auto 0px auto;
    border: 1px solid #000;
    clear: both;
}
    
# logo {
    width: 400px;
    float: left;
    boarder: 1px solid #000;
}

# hsubscribe {
    width: 400px;
    float: right;
    boarder: 1px solid #000;
}

# navbar {
    width: 900px;
    margin: 0px auto 0px auto;
    border: 1px solid #000;
    clear: both;
}

# content {
    width: 900px;
    margin: 0px auto 0px auto;
    border: 1px solid #000;
    clear: both;
}

# contentleft {
    width: 550px;
    float: left;
    boarder: 1px solid #000;
}

# sidebar {
    width: 300px;
    float: right;
    boarder: 1px solid #000;
}

# footer {
    width: 900px;
    margin: 0px auto 0px auto;
    border: 1px solid #000;
    clear: both;
}
    Code (markup):
    Must be:

    
body {
    margin: 0px;
    padding: 0px;
    font-family: Calibri, Arial, Tahoma;
}

#header {
    width: 900px;
    margin: 0px auto 0px auto;
    border: 1px solid #000;
    clear: both;
}
    
#logo {
    width: 400px;
    float: left;
    boarder: 1px solid #000;
}

#hsubscribe {
    width: 400px;
    float: right;
    boarder: 1px solid #000;
}

#navbar {
    width: 900px;
    margin: 0px auto 0px auto;
    border: 1px solid #000;
    clear: both;
}

#content {
    width: 900px;
    margin: 0px auto 0px auto;
    border: 1px solid #000;
    clear: both;
}

#contentleft {
    width: 550px;
    float: left;
    boarder: 1px solid #000;
}

#sidebar {
    width: 300px;
    float: right;
    boarder: 1px solid #000;
}

#footer {
    width: 900px;
    margin: 0px auto 0px auto;
    border: 1px solid #000;
    clear: both;
}
    Code (markup):
    I would say before learning php you should learn HTML/CSS
     
    Last edited: Oct 18, 2010
    CSM, Oct 18, 2010 IP