Click here to Skip to main content
15,071,262 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I'm building a small CMS project, some styling is necessary, obviously, and no matter how I try to hook my css to HTML it just does not work. I guess it's a syntax typo, but after going through the files a dozen times I can't find it.

header include:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Junior Task</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="resources\styles\style.css">
</head>
<body class="">
    <div id="wrapper">
        <div class="secondarynav">
            <div id="p_list">Product List</div>
             <a href="<?php echo SITE_PATH; ?>product.php "><button id="add">Add</button></a> 
            <button id="m_delete">Mass Delete</button>
        </div>
        <hr>
    

    <h1><?php echo SITE_NAME; ?></h1>

    <ul class="nav">
        <li class="active">

        </li>
    </ul>


footer include:
        <div id="footer">
            <hr>
            <div id="bottom_txt">Scandiweb Test Assignment</div>
        </div>
    </div>
</body>
</html>


home view file:
<?php include('includes/public_header.php'); ?>

<div id="content">
    <ul class="products">
        <li>
            <form action=""><input type="checkbox" id="mass_delete"></form>
           <div>SKU</div>
           <br>
           <div>Name</div>
           <br>
            <div>1.00$</div>
           <br>
           <div>Type</div>
        </li>
        <li>
            <form action=""><input type="checkbox" id="mass_delete"></form>
           <div>SKU</div>
           <br>
           <div>Name</div>
           <br>
            <div>1.00$</div>
           <br>
           <div>Type</div>
        </li>
        <li class="last">
            <form action=""><input type="checkbox" id="mass_delete"></form>
           <div>SKU</div>
           <br>
           <div>Name</div>
           <br>
            <div>1.00$</div>
           <br>
           <div>Type</div>
        </li>
    </ul>
</div>

<?php include('includes/public_footer.php'); ?>


SASS main file
@import '_header';
@import '_footer';


What I have tried:

I've tried changing back slashes to forward slashes in the link to css. I, also, tried writing style with no SASS, tried changing the imports format in the SASS main file. Double, triple checked for syntax errors. Tried installing and uninstalling any VS Code extensions with custom settings, didn't do nothing...
Posted
Updated 30-Dec-20 1:52am

1 solution

Some bits and pieces:
I'd use
<link type="text/css" rel="stylesheet" href="resources\styles\style.css">
so maybe add the type. Probably not the problem, but 'type=' does belong there.

BUT - since you reference style.css and do not give a hint as to what's in it, it could contain any sort of errors and no one reading your question could help you. It's contents are really critical !


Ultimately, especially since you have php in your webpage, is VS really a good place to work from? It's not exactly what Microsoft would want you to do. It's making you jump through hoops (with the imports statements, for example) that are not really necessary for a webpage. Try just plain vanilla to make your page, CSS, etc. and see how that works (which would point to SASS as the problem) or, with SASS truly out of the way, you can find and fix errors. All without the heavy overhead that one probably gets from the VS environment "help".
   
v2
Comments
Demetri K.2 30-Dec-20 8:04am
   
The actual CSS has the bare-bones lines of code in it. I can show it, but I don't think it's the problem. And I'm using SASS because the company that gave me this task asked for SASS to be in the project.

#bottom_txt {
font-size: 35px;
text-align: center;
color: blue;
}
/*# sourceMappingURL=style.css.map */
W Balboos, GHB 30-Dec-20 8:52am
   
My sympathy for having a client tell you how to code.

I'd do a typical problem isolation by rolling back to the simplest level and then incrementing forward.
First - put the style in the element via a style= attribute and make sure that works
Second - go back to your sheet but change it from a "#" declaration to "." and then add that class as an attribute to your element first, as a in-file declaration and then via your external style sheet. This also checks your path!
Third, - go back to "#" if you think it necessary.
Finally, when all of the above are satisfactorily settled, return it to SASS.

If it works - done - you probably found an error somewhere. Done.

If it doesn't work, SASS is the enemy. Have you ever used it before? I have not - my editor is not VS, but MS Expressions 4 (obsolete, simple, and obedient). Do you have a simple and working SASS page for comparison?

Just break it down to small pieces and isolate the problem.
Demetri K.2 30-Dec-20 9:10am
   
I'll try, thanks for a comprehensive answer.

I have used SASS before. it has some quirks to it, but the extra functionality compensates for most of the issues.
W Balboos, GHB 30-Dec-20 9:15am
   
Now I'll ask you a question!

Extra functionality: does that mean features not part of CSS3 or just different ways to access them? Like jQuery not really adding to javaScript but just wrapping parts of it up as simplified access features?

If it does, indeed, supply unique functionality I'd keep away from it, myself as it would lock me into Microsoft's environment. A beauty of web development is that it crosses O/S boundaries effortlessly.
Demetri K.2 30-Dec-20 9:51am
   
Yep, jQuery is a good comperison. The main selling point of SASS is its ability to chunk your css file into separate sub-files so you don't have to work with one if your css is extensive. Plus SASS adds variables, mixins (to copy-paste complicated designs) and class and id stacking.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900