Блог

Главная - Вопросы по программированию - Добавление меню с помощью include загружает поверх страницы и скрывает содержимое страницы

Добавление меню с помощью include загружает поверх страницы и скрывает содержимое страницы

#php #html

#php #HTML

Вопрос:

У меня есть HTML-страница, которую я использую include для добавления горизонтального меню. Но когда я делаю это, оно загружается поверх страницы, и содержимое страницы становится скрытым, и я понятия не имею, почему.

это код:

 <!DOCTYPE html>
<html>
<body>


<?php include 'MenuAdminstrador.php';?>

<!--from here on, all gets hidden behind the menu-->

    <h1>Welcome to my home page!</h1>
    <p>Some text.</p>
    <p>Some more text.</p>

    </body>
    </html>

включенный код файла:

     <!DOCTYPE html>
<html lang="en-US">
<head>
<?php 
?>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>SPYKA</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="templatemo">
    <!-- 
    Medigo Template
    http://www.templatemo.com/preview/templatemo_460_medigo
    -->

    <!-- Google Fonts -->
    <link href="http://fonts.googleapis.com/css?family=PT Serif:400,700,400italic,700itali" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Raleway:400,900,800,700,500,200,100,600" rel="stylesheet">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="bootstrap/bootstrap.css">
    <link rel="stylesheet" href="css/misc.css">
    <link rel="stylesheet" href="css/blue-scheme.css">

    <!-- JavaScripts -->
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery-migrate-1.2.1.min.js"></script>

    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />

</head>
<body>          <!-- Menu Responsive -->
    <div class="responsive_menu">
        <ul class="main_menu">
            <li><a href="Administrador.php" target="_parent">Inicio</a></li>
            <li><a href="#">Usuarios</a>
                <ul>
                    <li><a href="FormularioVerUsuarios.php" target="Pantalla">Ver Usuarios</a></li>
                    <li><a href="FormularioAMUsuario.php" target="Pantalla">Ingresar o Modificar</a></li>
                </ul>
            </li>
            <li><a href="#">Clientes</a>
                <ul>
                    <li><a href="FormularioVerClientes.php" target="Pantalla">Ver Clientes</a></li>
                    <li><a href="FormularioAMCliente.php" target="Pantalla">Ingresar o Modificar</a></li>
                </ul>
            </li>
            <li><a href="#">Facturas</a>
                <ul>
                    <li><a href="FormularioVerFacturas.php" target="Pantalla">Ver Facturas</a></li>
                    <li><a href="FormularioFactura.php" target="Pantalla">Facturar</a></li>
                </ul>
            </li>
            <li><a href="#">Productos</a>
                <ul>
                    <li><a href="FormularioVerProductos.php" target="Pantalla">Ver Productos</a></li>
                    <li><a href="FormularioAMProducto.php" target="Pantalla">Ingresar o Modificar</a></li>
                </ul>
            </li>
            <li><a href="#">Grupos de Productos</a>
                <ul>
                    <li><a href="FormularioVerGrupos.php" target="Pantalla">Ver Grupos</a></li>
                    <li><a href="FormularioAMGrupo.php" target="Pantalla">Ingresar o Modificar</a></li>
                </ul>
            </li>
            <li><a href="#"><label style="color: #800080; font-weight:bold;">Perfil</label></a></li>
            <li><a href="logout.php" target="_parent"><label style="color: red; font-weight:bold;">Salir</label></a></li>
        </ul> <!-- /.main_menu -->
    </div> <!-- /.responsive_menu -->

    <header class="site-header clearfix">
        <div class="container">

            <div class="row">



                    <div class="pull-left logo">
                        <a href="Administrador.php" target="_parent">
                            <img src="images/logo.png" alt="Medigo by templatemo">
                        </a>
                    </div>  <!-- /.logo --> 
                                                <!-- Menu PC -->

                    <div class="main-navigation pull-right">

                        <nav class="main-nav visible-md visible-lg">
                            <ul class="sf-menu">
                                <li class="active"><a href="Administrador.php" target="_parent">Inicio</a></li>
                                <li><a href="#">Usuarios</a>
                                    <ul>
                                        <li><a href="FormularioVerUsuarios.php" target="Pantalla">Ver Usuarios</a></li>
                                        <li><a href="FormularioAMUsuario.php" target="Pantalla">Ingresar o Modificar</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Clientes</a>
                                    <ul>
                                        <li><a href="FormularioVerClientes.php" target="Pantalla">Ver Clientes</a></li>
                                        <li><a href="FormularioAMCliente.php" target="Pantalla">Ingresar o Modificar</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Facturas</a>
                                    <ul>
                                        <li><a href="FormularioVerFacturas.php" target="Pantalla">Ver Facturas</a></li>
                                        <li><a href="FormularioFactura.php" target="Pantalla">Facturar</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Productos</a>
                                    <ul>
                                        <li><a href="FormularioVerProductos.php" target="Pantalla">Ver Productos</a></li>
                                        <li><a href="FormularioAMProducto.php" target="Pantalla">Ingresar o Modificar</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Grupos</a>
                                    <ul>
                                        <li><a href="FormularioVerGrupos.php" target="Pantalla">Ver Grupos</a></li>
                                        <li><a href="FormularioAMGrupo.php" target="Pantalla">Ingresar o Modificar</a></li>
                                    </ul>
                                </li>
                                <li><a href="#"><label style="color: #800080; font-weight:bold;">Perfil</label></a></li>
                                <li><a href="logout.php" target="_parent"><label style="color: red; font-weight:bold;">Salir</label></a></li>
                            </ul> <!-- /.sf-menu -->
                        </nav> <!-- /.main-nav -->

                        <!-- This one in here is responsive menu for tablet and mobiles -->
                        <div class="responsive-navigation visible-sm visible-xs">
                            <a href="#nogo" class="menu-toggle-btn">
                                <i class="fa fa-bars"></i>
                            </a>
                        </div> <!-- /responsive_navigation -->
                    </div> <!-- /.main-navigation -->

                 <!-- /.col-md-12 -->

            </div> <!-- /.row -->
<h2><?php echo $_SESSION['NombreRepresentante']?></h2>
        </div> <!-- /.container -->
    </header> <!-- /.site-header -->

    <script src="js/min/plugins.min.js"></script>
    <script src="js/min/medigo-custom.min.js"></script>

</body>
</html>

вывод:

вывод

Комментарии:

1. Пожалуйста, покажите нам код внутри включенного файла.

2. Также может быть полезно просмотреть окончательный вывод html после обработки PHP.

3. добавлен код включаемого файла

4. Это многое объясняет. Если вы посмотрите на конечный результат HTML, должно быть очень ясно, что происходит. Содержимое включаемого файла размещается там, где вы помещаете вызов include. Это означает, что ваш конечный HTML-документ содержит несколько элементов html и body. Это большой запрет. Поскольку вы закрываете как элемент body, так и элемент html внутри включаемого файла, браузер будет считать, что на странице больше ничего не должно отображаться. Вы можете либо поместить включенный файл внутри iframe (вероятно, плохая идея), либо реорганизовать свой код (гораздо лучше).

5. Возьмите элемент head из вашего включенного файла и поместите его вместо него в исходный файл. Удалите теги doctype, html и body из включаемого файла и сохраните только содержимое элемента body.

Ответ №1:

Вы не можете включить весь HTML-документ в комплекте с его собственным doctype и html-тегом во включаемый файл, если у вас уже есть установленная HTML-структура во включаемом файле.

Вам нужно провести некоторый рефакторинг:

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>SPYKA</title>
        <meta name="keywords" content="">
        <meta name="description" content="">
        <meta name="author" content="templatemo">
        <!-- 
        Medigo Template
        http://www.templatemo.com/preview/templatemo_460_medigo
        -->

        <!-- Google Fonts -->
        <link href="http://fonts.googleapis.com/css?family=PT Serif:400,700,400italic,700itali" rel="stylesheet">
        <link href="http://fonts.googleapis.com/css?family=Raleway:400,900,800,700,500,200,100,600" rel="stylesheet">

        <!-- Stylesheets -->
        <link rel="stylesheet" href="bootstrap/bootstrap.css">
        <link rel="stylesheet" href="css/misc.css">
        <link rel="stylesheet" href="css/blue-scheme.css">

        <!-- JavaScripts -->
        <script src="js/jquery-1.10.2.min.js"></script>
        <script src="js/jquery-migrate-1.2.1.min.js"></script>

        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />

    </head>
    <body>
        <?php include 'MenuAdminstrador.php';?>

        <h1>Welcome to my home page!</h1>
        <p>Some text.</p>
        <p>Some more text.</p>
    </body>
</html>

И включенный файл:

 <!-- Menu Responsive -->
<div class="responsive_menu">
    <ul class="main_menu">
        <li><a href="Administrador.php" target="_parent">Inicio</a></li>
        <li><a href="#">Usuarios</a>
            <ul>
                <li><a href="FormularioVerUsuarios.php" target="Pantalla">Ver Usuarios</a></li>
                <li><a href="FormularioAMUsuario.php" target="Pantalla">Ingresar o Modificar</a></li>
            </ul>
        </li>
        <li><a href="#">Clientes</a>
            <ul>
                <li><a href="FormularioVerClientes.php" target="Pantalla">Ver Clientes</a></li>
                <li><a href="FormularioAMCliente.php" target="Pantalla">Ingresar o Modificar</a></li>
            </ul>
        </li>
        <li><a href="#">Facturas</a>
            <ul>
                <li><a href="FormularioVerFacturas.php" target="Pantalla">Ver Facturas</a></li>
                <li><a href="FormularioFactura.php" target="Pantalla">Facturar</a></li>
            </ul>
        </li>
        <li><a href="#">Productos</a>
            <ul>
                <li><a href="FormularioVerProductos.php" target="Pantalla">Ver Productos</a></li>
                <li><a href="FormularioAMProducto.php" target="Pantalla">Ingresar o Modificar</a></li>
            </ul>
        </li>
        <li><a href="#">Grupos de Productos</a>
            <ul>
                <li><a href="FormularioVerGrupos.php" target="Pantalla">Ver Grupos</a></li>
                <li><a href="FormularioAMGrupo.php" target="Pantalla">Ingresar o Modificar</a></li>
            </ul>
        </li>
        <li><a href="#"><label style="color: #800080; font-weight:bold;">Perfil</label></a></li>
        <li><a href="logout.php" target="_parent"><label style="color: red; font-weight:bold;">Salir</label></a></li>
    </ul> <!-- /.main_menu -->
</div> <!-- /.responsive_menu -->

<header class="site-header clearfix">
    <div class="container">

        <div class="row">



                <div class="pull-left logo">
                    <a href="Administrador.php" target="_parent">
                        <img src="images/logo.png" alt="Medigo by templatemo">
                    </a>
                </div>  <!-- /.logo --> 
                                            <!-- Menu PC -->

                <div class="main-navigation pull-right">

                    <nav class="main-nav visible-md visible-lg">
                        <ul class="sf-menu">
                            <li class="active"><a href="Administrador.php" target="_parent">Inicio</a></li>
                            <li><a href="#">Usuarios</a>
                                <ul>
                                    <li><a href="FormularioVerUsuarios.php" target="Pantalla">Ver Usuarios</a></li>
                                    <li><a href="FormularioAMUsuario.php" target="Pantalla">Ingresar o Modificar</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Clientes</a>
                                <ul>
                                    <li><a href="FormularioVerClientes.php" target="Pantalla">Ver Clientes</a></li>
                                    <li><a href="FormularioAMCliente.php" target="Pantalla">Ingresar o Modificar</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Facturas</a>
                                <ul>
                                    <li><a href="FormularioVerFacturas.php" target="Pantalla">Ver Facturas</a></li>
                                    <li><a href="FormularioFactura.php" target="Pantalla">Facturar</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Productos</a>
                                <ul>
                                    <li><a href="FormularioVerProductos.php" target="Pantalla">Ver Productos</a></li>
                                    <li><a href="FormularioAMProducto.php" target="Pantalla">Ingresar o Modificar</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Grupos</a>
                                <ul>
                                    <li><a href="FormularioVerGrupos.php" target="Pantalla">Ver Grupos</a></li>
                                    <li><a href="FormularioAMGrupo.php" target="Pantalla">Ingresar o Modificar</a></li>
                                </ul>
                            </li>
                            <li><a href="#"><label style="color: #800080; font-weight:bold;">Perfil</label></a></li>
                            <li><a href="logout.php" target="_parent"><label style="color: red; font-weight:bold;">Salir</label></a></li>
                        </ul> <!-- /.sf-menu -->
                    </nav> <!-- /.main-nav -->

                    <!-- This one in here is responsive menu for tablet and mobiles -->
                    <div class="responsive-navigation visible-sm visible-xs">
                        <a href="#nogo" class="menu-toggle-btn">
                            <i class="fa fa-bars"></i>
                        </a>
                    </div> <!-- /responsive_navigation -->
                </div> <!-- /.main-navigation -->

             <!-- /.col-md-12 -->

        </div> <!-- /.row -->
        <h2><?php echo $_SESSION['NombreRepresentante']?></h2>
    </div> <!-- /.container -->
</header> <!-- /.site-header -->

<script src="js/min/plugins.min.js"></script>
<script src="js/min/medigo-custom.min.js"></script>

Комментарии:

1. спасибо, но это не сработало, страница загружается точно так же, как и раньше

2. @ErrolChavesMoya Хорошо. Проверьте исходный код HTML на странице, чтобы убедиться, что там отображаются теги h1 и p из вашего основного документа. Если они это делают, но не отображаются, у вас, вероятно, проблема с CSS. Если они этого не делают, то, вероятно, есть другая ошибка, связанная с вашим PHP-кодом. У вас включено сообщение об ошибках?

Ответ №2:

Вы объявили тип документа, html, заголовок и тело в текущем файле. Ваш импортированный файл (MenuAdminstrador.php ) также содержит эти элементы. HTML-страница должна содержать только один doctype, html, head и body.

Удалите элементы doctype, html, head и body и сохраните только содержимое элемента body вашего MenuAdminstrador.php файл.

Но в этом случае вы должны включить ссылки на шрифты Google, CSS и JavaScript в элемент head текущего файла.

Если вы не предпочитаете этот метод, вы можете выполнить следующие действия:

  1. Создайте MenuHead.php которое содержит содержимое элемента head внешнего файла.
  2. Создайте MenuBody.php которое содержит содержимое элемента body внешнего файла.
  3. Импортируйте MenuHead.php в заголовок текущего файла.
  4. Импортируйте MenuBody.php в теле текущего файла.