Crear un menú responsive en HTML5 y navegación entre diferentes páginas
Estoy intentando hacer un menú para una web familiar, estoy usando HTML5, CSS, php, y javascript con el que me defiendo algo...
El problema que me encuentro es el siguiente:
Mi idea es crear una sola cabecera y reutilizarla entre las diferentes páginas en lazadas al menú.
He probado de usar la etiqueta, include de php, la cual funciona, pero el problema también está en que este menú incluye una imagen, y al incluir la cabecera en otra página de la web, el src de la etiqueta img cambia...
He probado de hacer un embed pero no me carga la imagen que tiene el menú.
No sé cómo hacerlo, ¿alguna idea o recomendación?
3 Respuestas
No se si este tema ya te fue resuelto, o pudiste hacerlo por otros medios.
Pero intentare hacerte una explicación fácil.
Paso 1 - Rutas
Supongamos que tengo dentro de una Capeta raíz los siguientes archivos.
Como puedes ver en el Directorio arriba esta carpeta img dentro de esa carpeta tengo que poner todas las imágenes.
Dentro del header.php supongamos que tengo esto.
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Tuto Todoexpertos.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Header Menu --> <header> <nav> <img src="img/todoexpertos.png" alt=""> <ul> <li><a href="">Inicio</a></li> <li><a href="">Servicios</a></li> <li><a href="">Portfolio</a></li> <li><a href="">Contactos</a></li> </ul> </nav> </header> <!-- Fin Header Menu --> <!-- Cuerpo del Contenido --> <div class="container">
Como puedes ver arriba en el nav esta la img con la ruta.
En el footer.php supongamos que tengo esto.
</div> <!-- Fin Cuerpo del Contenido --> <footer> <p>Esto es un tutorial</p> </footer> </body> </html>
Como puedes ver empiezo con un container arriba y debajo en el footer lo termino.
En el archivo index.php entonces lo pongo así.
<?php include 'header.php';?> <h1>Aqui saldra el contenido</h1> <p>esto es todoexpertos.com</p> <?php include 'footer.php';?>
En todos los archivos .php que incluyas el header y el footer dentro de tu carpeta raíz la imagen del logo en el menú te se te va mostrar.
Ahora si lo que vas es a incluir en otras carpetas más archivos .php que necesiten el header.php te recomiendo hacer un partial/header dentro de esas carpetas y cambiar la ruta de la imagen.
¡Gracias!
Ya he encontrado el por qué no se mostraba correctamente, he tenido que usar una variable de php $_SERVER('DOCUMENT_ROOT' ), para darme cuenta que en la ruta del servidor Xampp, la típica de htdocs porque estaba usando la relativa al servidor (supuestamente la 'C:\xampp\htdocs'), me explico: raíz_servidor/index.php
pero resulta que tenía una carpeta llamada "dumen" y ahí todo el proyecto web, para no mezclar otras carpetas de pruebas y por eso no encontraba bien las rutas, porque le tenía que "añadir" a mi ruta la carpeta "dumen" como si fuera así: raíz_servidor/dumen/index.php
Por eso cuando le indicaba en cualquier include la ruta /img/ejemplo.php no lo encontraba...
Es un fallo de novatillo, disculpa por las molestias que te haya podido ocasionar y muchas gracias por tu tiempo.
Si tienes una carpeta para imágenes y otra para los includes, no tiene por que cambiar el src.
Una estructura de carpetas simples seria algo así:
----Carpetas
img <--- Aqui estaria la imagen
css
js
Inc <--- aqui estaría el menú en un archivo php llamado por ejemplo menu. Inc.php el cual a su vez esta llamando a la imagen de la carpeta img
-----Archivos
Index.php <--- luego en cada uno de estos llamas a menu.inc.php con include o require
contacto.php <---
sobrenosotros.php <---
¡Gracias!
Ya he encontrado el por qué no se mostraba correctamente, he tenido que usar una variable de php $_SERVER('DOCUMENT_ROOT' ), para darme cuenta que en la ruta del servidor Xampp, la típica de htdocs porque estaba usando la relativa al servidor (supuestamente la 'C:\xampp\htdocs'), me explico: raíz_servidor/index.php
pero resulta que tenía una carpeta llamada "dumen" y ahí todo el proyecto web, para no mezclar otras carpetas de pruebas y por eso no encontraba bien las rutas, porque le tenía que "añadir" a mi ruta la carpeta "dumen" como si fuera así: raíz_servidor/dumen/index.php
Por eso cuando le indicaba en cualquier include la ruta /img/ejemplo.php no lo encontraba...
Es un fallo de novatillo, disculpa por las molestias que te haya podido ocasionar y muchas gracias por tu tiempo.
En tal caso no es un problema de código sino de estructura. Deberías montar una estructura de carpetas organizada teniendo en cuenta las relaciones entre archivos que se darán en el documento.
Otra alternativa es acceder a los archivos desde la raíz del host iniciando la dirección con "/", que en el caso de PHP seguramente partirá de la carpeta htdocs (si estás usando xamp) o de la carpeta que interprete como raíz. Cuidado porque esta puede cambiar una vez lo subas al host.
Como tercera alternativa, si estàs trabajando directamente en el host, puedes simplemente poner el URL en el que se encuentra la imagen, ese nunca cambiará lo llames desde donde lo llames.
Como última opción, podrías usar el include para el contenido de la página en lugar de para sus componentes (banner, footer, menu lateral...). Entonces determinar la página destino con una variable Post, este método a demás te permitirá mostrar un 404 en caso de que la página que menciona la variable no exista. Si en este último te molesta mucho que el URL diga "XX.com?dir=nosotros" y te gustaría un "XX.com/nosotros", puedes cambiar los parámetros de .htacces, aunque a lo mejor sería complicarse demasiado innecesariamente.
¡Gracias!
Ya he encontrado el por qué no se mostraba correctamente, he tenido que usar una variable de php $_SERVER('DOCUMENT_ROOT' ), para darme cuenta que en la ruta del servidor Xampp, la típica de htdocs porque estaba usando la relativa al servidor (supuestamente la 'C:\xampp\htdocs'), me explico: raíz_servidor/index.php
pero resulta que tenía una carpeta llamada "dumen" y ahí todo el proyecto web, para no mezclar otras carpetas de pruebas y por eso no encontraba bien las rutas, porque le tenía que "añadir" a mi ruta la carpeta "dumen" como si fuera así: raíz_servidor/dumen/index.php
Por eso cuando le indicaba en cualquier include la ruta /img/ejemplo.php no lo encontraba...
Es un fallo de novatillo, disculpa por las molestias que te haya podido ocasionar y muchas gracias por tu tiempo.