Why will my website not show CSS and HTML when using ECHO function?

Question

Its a PHP file, I have an echo section where I have the HTML code.

I haven't tried much as I don't know what to do!

PHP/HTML Code:

<?php
include('session.php');
$_SESSION['pageStore'] = "index.php";
if(!isset($_SESSION['login_id'])){
header("location: login.php"); // Redirecting To login
}

if(isset($_POST['submit'])){ // Fetching variables of the form which travels in URL
$itemname = $_POST['itemname'];
$category = $_POST['category'];
$subcategory = $_POST['subcategory'];
$price = $_POST['price'];
$cur_date = date('Y-m-d H:i:s');
if($name !=''||$email !=''){
$query = mysql_query("insert into posts(current_date,itemname, category, subcategory, price) VALUES ($cur_date,'$itemname', '$category', '$subcategory', '$price')");
echo "<br/><br/><span>Data Inserted successfully...!!</span>";
}
else{
echo "<p>Insertion Failed <br/> Some Fields are Blank....!!</p>";
}
}

echo '
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="PostAD.css">
<title>PostAD</title>

</head>
<body>
<div id="PostAD" class="PostAD_Class">
    <svg class="BG">
        <rect class="BG_Class" rx="0" ry="0" x="0" y="0" width="1925" height="940">
        </rect>
    </svg>
    <div class="Sell_an_Item_Class">
        <span>Sell an Item</span>
    </div>
    <div class="Item_Name__Class">
        <span>Item Name:</span>
    </div>
    <div class="Price__Class">
        <span>Price:</span>
    </div>
    <div class="Description__Class">
        <span>Description:</span>
    </div>
    <svg class="DESC_BOX">
        <rect class="DESC_BOX_Class" rx="0" ry="0" x="0" y="0" width="695.811" height="489.773">
        </rect>
    </svg>
    <svg class="Add_Image_button">
        <rect class="Add_Image_button_Class" rx="6" ry="6" x="0" y="0" width="304.209" height="56.119">
        </rect>
    </svg>
    <div class="Add_a_n__image_s__Class">
        <span>Add a(n) image(s)</span>
    </div>
    <div class="I_accept_the_terms_and_service_Class">
        <span>I accept the </span><span style="color:rgba(0,34,255,1);text-decoration:true;">terms and services.</span>
    </div>
    <svg class="TOS_accept_button">
        <rect class="TOS_accept_button_Class" rx="0" ry="0" x="0" y="0" width="43.677" height="34.717">
        </rect>
    </svg>
    <div class="Categories__Class">
        <span>Categories:</span>
    </div>
    <svg class="Cat_Name_Droplist">
        <rect class="Cat_Name_Droplist_Class" rx="0" ry="0" x="0" y="0" width="191.325" height="59.083">
        </rect>
    </svg>
    <div class="CatName_Class">
        <span>CatName</span>
    </div>
    <div class="Sub_Category__Class">
        <span>Sub-Category:</span>
    </div>
    <svg class="Sub_Cat_Driolist">
        <rect class="Sub_Cat_Driolist_Class" rx="0" ry="0" x="0" y="0" width="260.232" height="49.089">
        </rect>
    </svg>
    <div class="Sub_CatName_Class">
        <span>Sub-CatName</span>
    </div>
    <svg class="Droplist_Button" viewBox="0 0 8.608 20.361">
        <path class="Droplist_Button_Class" d="M 8.607874870300293 0 L 0 10.26888751983643 L 8.459531784057617 20.36109161376953">
        </path>
    </svg>
    <svg class="Item_Name_Box">
        <rect class="Item_Name_Box_Class" rx="0" ry="0" x="0" y="0" width="311.079" height="37.795">
        </rect>
    </svg>
    <svg class="Price_Box">
        <rect class="Price_Box_Class" rx="0" ry="0" x="0" y="0" width="202.056" height="39.248">
        </rect>
    </svg>
    <div class="AED_Class">
        <span>AED</span>
    </div>
    <svg class="Post_Item_Button">
        <rect class="Post_Item_Button_Class" rx="6" ry="6" x="0" y="0" width="270.23" height="61.004">
        </rect>
    </svg>
    <div class="Post_Item_Class">
        <span>Post Item</span>
    </div>
    <svg class="Droplist_Button_A0_Path_2" viewBox="0 0 8.608 20.361">
        <path class="Droplist_Button_A0_Path_2_Class" d="M 8.607874870300293 0 L 0 10.26888751983643 L 8.459531784057617 20.36109161376953">
        </path>
    </svg>
    <svg class="Nav_Bar">
        <rect class="Nav_Bar_Class" rx="0" ry="0" x="0" y="0" width="1920" height="130.47">
        </rect>
    </svg>
    <div class="Home_Class">
        <span>Home</span>
    </div>
    <div class="Sell_Your_Item_Class">
        <span>Sell Your Item</span>
    </div>
    <div class="Messages_Class">
        <span>Messages</span>
    </div>
    <div class="SellAnything_Class">
        <span>SellAnything</span>
    </div>
    <div class="Log_Out_Class">
        <span>Log Out</span>
    </div>
</div>
</body>
</html>

'
?>

CSS Code:

body {
        margin: 0;
        padding: 0;
    }
    :root {
        --web-view-ids: PostAD;
    }
    #PostAD * {
        margin: 0;
        padding: 0;
    }
    .PostAD_Class {
        position: absolute;
        box-sizing: border-box;
        background: #E5E5E5;
        width: 1920px;
        height: 935px;
        background-color: rgba(255,255,255,1);
        overflow: hidden;
        margin: 0;
        padding: 0;
        --web-view-name: PostAD;
        --web-view-id: PostAD;
        --web-enable-deep-linking: true;
    }
    .BG_Class {
        fill: rgba(242,237,237,1);
    }
    .BG {
        position: absolute;
        overflow: visible;
        width: 1925px;
        height: 940px;
        left: 0px;
        top: 0px;
    }
    .Sell_an_Item_Class {
        position: absolute;
        left: 43px;
        top: 197px;
        overflow: visible;
        width: 343px;
        white-space: nowrap;
        text-align: left;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: bold;
        font-size: 62px;
        color: rgba(0,0,0,1);
    }
    .Item_Name__Class {
        position: absolute;
        left: 49.422px;
        top: 537.671px;
        overflow: visible;
        width: 221px;
        white-space: nowrap;
        text-align: left;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: normal;
        font-size: 43px;
        color: rgba(0,0,0,1);
    }
    .Price__Class {
        position: absolute;
        left: 47.969px;
        top: 643.073px;
        overflow: visible;
        width: 102px;
        white-space: nowrap;
        text-align: left;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: normal;
        font-size: 43px;
        color: rgba(0,0,0,1);
    }
    .Description__Class {
        position: absolute;
        left: 1029px;
        top: 140px;
        overflow: visible;
        width: 226px;
        white-space: nowrap;
        text-align: left;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: normal;
        font-size: 43px;
        color: rgba(0,0,0,1);
    }
    .DESC_BOX_Class {
        fill: rgba(255,255,255,1);
        stroke: rgb(112, 112, 112);
        stroke-width: 1px;
        stroke-linejoin: miter;
        stroke-linecap: butt;
        stroke-miterlimit: 4;
        shape-rendering: auto;
    }
    .DESC_BOX {
        position: absolute;
        overflow: visible;
        width: 695.811px;
        height: 489.773px;
        left: 1029.278px;
        top: 213.34px;
    }
    .Add_Image_button_Class {
        filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
        fill: rgba(25,210,44,1);
        stroke: rgb(255, 255, 255);
        stroke-width: 1px;
        stroke-linejoin: round;
        stroke-linecap: round;
        stroke-miterlimit: 4;
        shape-rendering: auto;
    }
    .Add_Image_button {
        position: absolute;
        overflow: visible;
        width: 324.209px;
        height: 76.119px;
        left: 66.85px;
        top: 746.835px;
    }
    .Add_a_n__image_s__Class {
        position: absolute;
        left: 80.035px;
        top: 746.835px;
        overflow: visible;
        width: 274px;
        white-space: nowrap;
        text-align: left;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: normal;
        font-size: 35px;
        color: rgba(255,255,255,1);
    }
    .I_accept_the_terms_and_service_Class {
        position: absolute;
        left: 1171.394px;
        top: 743px;
        overflow: visible;
        width: 455px;
        white-space: nowrap;
        text-align: left;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: normal;
        font-size: 33px;
        color: rgba(0,0,0,1);
    }
    .TOS_accept_button_Class {
        fill: rgba(255,255,255,1);
        stroke: rgb(112, 112, 112);
        stroke-width: 1px;
        stroke-linejoin: miter;
        stroke-linecap: butt;
        stroke-miterlimit: 4;
        shape-rendering: auto;
    }
    .TOS_accept_button {
        position: absolute;
        overflow: visible;
        width: 43.677px;
        height: 34.717px;
        left: 1093px;
        top: 753.079px;
    }
    .Categories__Class {
        position: absolute;
        left: 47.969px;
        top: 326px;
        overflow: visible;
        width: 212px;
        white-space: nowrap;
        text-align: left;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: normal;
        font-size: 43px;
        color: rgba(0,0,0,1);
    }
    .Cat_Name_Droplist_Class {
        fill: rgba(255,255,255,1);
        stroke: rgb(112, 112, 112);
        stroke-width: 1px;
        stroke-linejoin: miter;
        stroke-linecap: butt;
        stroke-miterlimit: 4;
        shape-rendering: auto;
    }
    .Cat_Name_Droplist {
        position: absolute;
        overflow: visible;
        width: 191.325px;
        height: 59.083px;
        left: 281.993px;
        top: 336.412px;
    }
    .CatName_Class {
        position: absolute;
        left: 289.762px;
        top: 338.548px;
        overflow: visible;
        width: 137px;
        white-space: nowrap;
        text-align: left;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: normal;
        font-size: 33px;
        color: rgba(0,0,0,1);
    }
    .Sub_Category__Class {
        position: absolute;
        left: 43px;
        top: 432.332px;
        overflow: visible;
        width: 272px;
        white-space: nowrap;
        text-align: left;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: normal;
        font-size: 43px;
        color: rgba(0,0,0,1);
    }
    .Sub_Cat_Driolist_Class {
        fill: rgba(255,255,255,1);
        stroke: rgb(112, 112, 112);
        stroke-width: 1px;
        stroke-linejoin: miter;
        stroke-linecap: butt;
        stroke-miterlimit: 4;
        shape-rendering: auto;
    }
    .Sub_Cat_Driolist {
        position: absolute;
        overflow: visible;
        width: 260.232px;
        height: 49.089px;
        left: 331.5px;
        top: 446.245px;
    }
    .Sub_CatName_Class {
        position: absolute;
        left: 341.42px;
        top: 442.809px;
        overflow: visible;
        width: 205px;
        white-space: nowrap;
        text-align: left;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: normal;
        font-size: 33px;
        color: rgba(0,0,0,1);
    }
    .Droplist_Button_Class {
        fill: transparent;
        stroke: rgb(0, 0, 0);
        stroke-width: 2.5px;
        stroke-linejoin: miter;
        stroke-linecap: butt;
        stroke-miterlimit: 4;
        shape-rendering: auto;
    }
    .Droplist_Button {
        transform: rotate(-90deg);
        overflow: visible;
        position: absolute;
        top: 362.313px;
        left: 439.223px;
        width: 21.967px;
        height: 11.197px;
    }
    .Item_Name_Box_Class {
        fill: rgba(255,255,255,1);
        stroke: rgb(112, 112, 112);
        stroke-width: 1px;
        stroke-linejoin: miter;
        stroke-linecap: butt;
        stroke-miterlimit: 4;
        shape-rendering: auto;
    }
    .Item_Name_Box {
        position: absolute;
        overflow: visible;
        width: 311.079px;
        height: 37.795px;
        left: 292.18px;
        top: 558.022px;
    }
    .Price_Box_Class {
        fill: rgba(255,255,255,1);
        stroke: rgb(112, 112, 112);
        stroke-width: 1px;
        stroke-linejoin: miter;
        stroke-linecap: butt;
        stroke-miterlimit: 4;
        shape-rendering: auto;
    }
    .Price_Box {
        position: absolute;
        overflow: visible;
        width: 202.056px;
        height: 39.248px;
        left: 159.899px;
        top: 660.517px;
    }
    .AED_Class {
        position: absolute;
        left: 370.677px;
        top: 656.156px;
        overflow: visible;
        width: 70px;
        white-space: nowrap;
        text-align: left;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: bold;
        font-size: 35px;
        color: rgba(0,0,0,1);
    }
    .Post_Item_Button_Class {
        filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
        fill: rgba(255,0,0,1);
        stroke: rgb(255, 255, 255);
        stroke-width: 1px;
        stroke-linejoin: round;
        stroke-linecap: round;
        stroke-miterlimit: 4;
        shape-rendering: auto;
    }
    .Post_Item_Button {
        position: absolute;
        overflow: visible;
        width: 290.23px;
        height: 81.004px;
        left: 1199.392px;
        top: 801.77px;
    }
    .Post_Item_Class {
        position: absolute;
        left: 1235.229px;
        top: 801.236px;
        overflow: visible;
        width: 197px;
        white-space: nowrap;
        text-align: left;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: bold;
        font-size: 44px;
        color: rgba(255,255,255,1);
    }
    .Droplist_Button_A0_Path_2_Class {
        fill: transparent;
        stroke: rgb(0, 0, 0);
        stroke-width: 2.5px;
        stroke-linejoin: miter;
        stroke-linecap: butt;
        stroke-miterlimit: 4;
        shape-rendering: auto;
    }
    .Droplist_Button_A0_Path_2 {
        transform: rotate(-90deg);
        overflow: visible;
        position: absolute;
        top: 466.313px;
        left: 562.223px;
        width: 21.967px;
        height: 11.197px;
    }
    .Nav_Bar_Class {
        fill: rgba(255,255,255,1);
    }
    .Nav_Bar {
        position: absolute;
        overflow: visible;
        width: 1920px;
        height: 130.47px;
        left: 0px;
        top: 0px;
    }
    .Home_Class {
        position: absolute;
        left: 526.52px;
        top: 22.033px;
        overflow: visible;
        width: 132px;
        white-space: nowrap;
        text-align: left;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: normal;
        font-size: 49px;
        color: rgba(0,0,0,1);
    }
    .Sell_Your_Item_Class {
        position: absolute;
        left: 797.48px;
        top: 22.033px;
        overflow: visible;
        width: 297px;
        white-space: nowrap;
        text-align: left;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: normal;
        font-size: 49px;
        color: rgba(0,0,0,1);
    }
    .Messages_Class {
        position: absolute;
        left: 1230.36px;
        top: 22.033px;
        overflow: visible;
        width: 212px;
        white-space: nowrap;
        text-align: left;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: normal;
        font-size: 49px;
        color: rgba(0,0,0,1);
    }
    .SellAnything_Class {
        position: absolute;
        left: 18px;
        top: 12px;
        overflow: visible;
        width: 392px;
        white-space: nowrap;
        text-align: left;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: bold;
        font-size: 65px;
        color: rgba(25,210,44,1);
    }
    .Log_Out_Class {
        position: absolute;
        left: 1669.8px;
        top: 22.033px;
        overflow: visible;
        width: 176px;
        white-space: nowrap;
        text-align: left;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: normal;
        font-size: 49px;
        color: rgba(0,0,0,1);
    }

What do you mean with _not show css_? check your path and check if you have some error into browser console — Sfili_81, Jul 18 '19 at 11:43
Its a pure empty screen, the path is fine. Console doesnt say anything! — AlhassanRaad1, Jul 18 '19 at 11:44
Look in the network tab to see if the css path is correct and returns a css file (and not a 404 page) — mplungjan, Jul 18 '19 at 11:44
An empty screen sounds like a fatal PHP error. Check your error logs. Your code is too minimal for us to assist. — user3783243, Jul 18 '19 at 11:45
1. Check the network tab, is the page returning a 500. 2. If so check the server's error log and provide the relevant code. 3. If not please provide more information. The code you've presented should be fine assuming the CSS is at the same location as the script, and that you closed the encapsulation and line (e.g. a `'` and `;`). — user3783243, Jul 18 '19 at 11:49
You are open to SQL injections and your `$cur_date` usage would result in a SQL error. It is unclear where your issue lies. Do you get a blank page or is it just unstyled? — user3783243, Jul 18 '19 at 11:58
Is there a reason why you have not put your code here on Stack Overflow? External links which will expire in a few days are not what we want here. — TRiG, Jul 18 '19 at 12:01
I have removed the links and pasted in the code. However, it is probably still rather broad. I would guess you have not successfully connected to your database. You also have a SQL injection security issue to resolve. — halfer, Jul 18 '19 at 16:05

Why will my website not show CSS and HTML when using ECHO function?

0 Answers0