CSS not being loaded in Php code

Asked

Viewed 1,550 times

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 the 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 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 his 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 of menulateral.php include, are just the 3 hyperlinks of the 'a' contained in this file, one next to the other! inserir a descrição da imagem aqui

the idea is to be able to implement a menu like the one provided as tutorial in this link: https://www.w3schools.com/howto/howto_css_vertical_menu.asp#

When I inspect the code in the browser: inserir a descrição da imagem aqui

html css bootstrap

  • I got the title! sorry.

  • Just one remark: has a <title> tag before the <body> and after the </head> in the first code snippet.

  • but that makes no difference. does <?php include ("head.php");? > already include the entire head structure I’m going to use.

  • His CSS is being loaded into that file?

  • 1

    Where is this CSS code from the menu you cite? It doesn’t make much sense for you to use the files either bootstrap.css and bootstrap.min.css, both are the same files, the second being the minified version of the first.

  • And check your file tree...to see if css is correct

  • css is being loaded here: <link rel="stylesheet" type="text/css" href="css/vertical.css"> this is the last line of head.php... I also deleted bootstrap min

  • face, take a look at the browser console aperte F12, if the file address is wrong appears there

  • apparently, everything normal =\

Show 4 more comments

1 answer

2


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

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

Placing the menu css directly in the file, helped identify the problem.

Using your code without counting the call of two bootstrap.css: https://jsfiddle.net/kfv13dLj/

Browser other questions tagged html css bootstrap

You are not signed in. Login or sign up in order to post.