1

Tenho o seguinte código:

<?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>

o head.php é apenas um arquivo para carregar os arquivos CSS:

<!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>

este é o 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>

e o CSS dele:

.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;
}

Quando eu chamo a pagina do código principal, o retorno que tenho do include do menulateral.php, são apenas os 3 hiperlinks do 'a' contidos neste arquivo, um do lado do outro! inserir a descrição da imagem aqui

a ideia é conseguir implementar um menu igual ao fornecido como tutorial neste link: https://www.w3schools.com/howto/howto_css_vertical_menu.asp#

Quando inspeciono o código no navegador: inserir a descrição da imagem aqui

9
  • arrumei o título! desculpe. Commented 4/04/2017 às 18:29
  • Só uma observação: tem uma tag <title> antes do <body> e depois do </head> no primeiro trecho de código.
    – Amzero
    Commented 4/04/2017 às 18:40
  • mas isso não faz diferença. o <?php include ("head.php");?> inclui já toda a estrutura do head que vou utilizar. Commented 4/04/2017 às 18:42
  • O CSS dele está sendo carregado em que arquivo?
    – sNniffer
    Commented 4/04/2017 às 18:52
  • 1
    Onde que está esse código CSS do menu que você cita? Também não faz muito sentido você utilizar os arquivos bootstrap.css e bootstrap.min.css, ambos são os mesmos arquivos, sendo o segundo a versão minificada do primeiro.
    – Woss
    Commented 4/04/2017 às 18:52

1 Resposta 1

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

O problema era um espaço dentro no css que estava a ser interpretado como outro caracter e a invalidar o CSS.

Colocando o css do menu diretamente no arquivo, ajudou a identificar o problema.

Usando seu código sem contar a chamada de dois bootstrap.css: https://jsfiddle.net/kfv13dLj/

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .