CSS is not being loaded in PhP code

Question

CSS is not being loaded in PhP code

Navigation

#1 by (2 votes)

1

I have the following code:

<?php include ("head.php");?>
<title>módulo EAD</title>

<body>
<div class="container">

<header>
    <div class="page-header">
    <h1>Bem vindo ao módulo EAD</h1>
    <hr>
    </div>
</header>

<?php include ("menuLateral.php");?> 


</div>
</body>
</html>

head.php is just a file to load CSS files:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/vertical.css">

</head>

this is the menulatera.php:

<?php include ("head.php");?>   

<div class="vertical-menu">
    <a href="#" class="active">Home</a>
    <a href="#">link 1</a>
    <a href="#">link 2</a>
</div>

and its CSS:

.vertical-menu {
    width: 200px; /* Set a width if you like */
}

.vertical-menu a {
    background-color: #eee; /* Grey background color */
    color: black; /* Black text color */
    display: block; /* Make the links appear below each other */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove underline from links */
}

.vertical-menu a:hover {
    background-color: #ccc; /* Dark grey background on mouse-over */
}

.vertical-menu a.active {
    background-color: #4CAF50; /* Add a green color to the "active/current" link */
    color: white;
}

When I call the main code page, the return I have from the menulateral.php include, are just the 3 'a' hyperlinks contained in this file, side by side!

Theideaistoimplementamenusimilartotheoneprovidedasatutorialatthislink: link

When I inspect the code in the browser:

html css bootstrap

asked by anonymous 04.04.2017 / 20:27

1 answer

How to capture the colors of a Label that is behind another label? Put the options of an input select into a variable

score 2 · Accepted Answer

.vertical-menu { 
    **<espaço com caracteres invisiveis>** width: 200px;
    # muda para:
    width: 200px;
}

The problem was a space inside the css that was being interpreted as another character and invalidating CSS.

Placing the menu css directly into the file helped identify the problem.

Using your code without counting the two bootstrap.css call: link