Foros del Web » Creando para Internet » HTML »

[Ayuda] Include (php) modifica margen superior de div

Estas en el tema de [Ayuda] Include (php) modifica margen superior de div en el foro de HTML en Foros del Web. Wenas, estoy empezando con xhtml/css pero me he quedado totalmente estancado, siguiendo un tutorial aprendi a hacer el típico diseño (header, sidebar, contenido, footer) de ...
  #1 (permalink)  
Antiguo 03/07/2009, 03:39
 
Fecha de Ingreso: julio-2009
Mensajes: 4
Antigüedad: 14 años, 8 meses
Puntos: 0
[Ayuda] Include (php) modifica margen superior de div

Wenas, estoy empezando con xhtml/css pero me he quedado totalmente estancado, siguiendo un tutorial aprendi a hacer el típico diseño (header, sidebar, contenido, footer) de lo más básico.
El caso es que empece a tocar algo de php para ir abriendo boca, busque como evitar repetir el codigo de header, menu...en cada página usando la función include consigo que funcione...pero me topo con un problema:
- Tengo por un lado header.html, el más simple del mundo:
Código HTML:
<div id="header">
	<h1>Título</h1>
	<h2>Subtítulo</h2>
</div> 
- En el index.php, justo donde estaba el código que he sacado al header.html (y de paso el sidebar.html) uso la funcion include:
Código PHP:
<html xml:lang="es" lang="es">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="estilo.css" rel="stylesheet" type="text/css" />
  <title>TITULO</title>
</head>
<body>
 <div id="container">
    <?php include ('plantilla/header.php'); ?>
        <?php include 'plantilla/sidebar.html'?>
    <div id="main">
        <h3>Main</h3>
        <p>Contenido principal</p>        
    </div>
    <div id="footer">
        <p>Pie de página</p>
    </div>
    <!--Div para evitar solapar el sideBar con el Footer -->
    <div id="clearing"></div>
</div>
</body>
</html>
PROBLEMA
Si dejo el código en el index, sin usar include, queda todo en su sitio:
(pongo los enlaces asi debido al sistema anti-spam xD)
img98.imageshack.us/img98/4845/sininclude.jpg
Si uso include ocurre esto:
img14.imageshack.us/img14/3456/coninclude.jpg

Por supuesto sin tocar el css en el cambio, no hay absolutamente ningun margen asignado al header en su parte superior, he probado haciendo el reset de márgenes, no se que es lo que cambiará al usar el include.
Realmente, lo que ocurre es que todo el bloque que ocupa el div header, se desplaza 13 pixels hacia abajo, si incluyo una imagen en el header, la imagen se solapa por encima del margen del div...muy extraño.
Se puede "apañar" poniendole un margen superior negativo al header, pero me parece una solución "fea" además de que me ocurre en todos los includes (en las fotos solo cambie el header) y dicho margen negativo es de diferente longitud en IE y en FF...definitamente estoy perdido, y supongo que debe ser cualquier tontería.
Si quieren que aporte más datos o ejemplos, pídanme, el css no lo posteo porque es bastante simplón y dudo que el error venga de ahi.
Muchas gracias por adelantado ^^
  #2 (permalink)  
Antiguo 03/07/2009, 07:34
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: [Ayuda] Include (php) modifica margen superior de div

Hola Setwarn.
Bienvenido a FdW.

Sin ver los códigos es aventurado decir nada, serán palos de ciego.
Si tienes la página en línea, pon un enlace sin http :// www para que no te lo rebote el foro.
Si no la tienes, pues las partes del código implicados en el problema.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 06/07/2009, 08:18
 
Fecha de Ingreso: julio-2009
Mensajes: 4
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: [Ayuda] Include (php) modifica margen superior de div

Buenas.
Vuelvo de nuevo al tema, he rehecho todo el mini-diseño simplificándolo al máximo, para comprobar si volvía a pasar y asi ha sido:
Al usar include para introducir una porción de código html (con la intención de no repetirlo en cada página de la web) aparecen márgenes no deseados alrededor del div contenido en ese include.
Se puede solucionar usando márgenes negativos...pero es una chapuza.

Web usando include: http :// testazo.byethost12.com/
Web sin include: http :// test2.byethost12.com/

El css es común para ambas, el código de la parte implicada del que si usa include:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ://www .w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http :// www .w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="style.css" rel="stylesheet" type="text/css" />
  <title>TITULO</title>
</head>
<body>
    <div id="container">
      <?php include("plantilla/header.html"?>
     
      <?php include("plantilla/menu.html"?>
     
      <div id="main">
        Contenido<br />
      </div>
     
      <div id="footer">
        Pie de página
      </div>
      <div id="clearing"></div>
    </div>
  
</body>
</html>
En el otro simplemente sustituyo el include por el contenido de los html, el código es exactamente el mismo salvo por el include...no se que es loq puedo estar haciendo mal, porque me parece algo demasiado simple como para que ocurra esto.
  #4 (permalink)  
Antiguo 06/07/2009, 10:06
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: [Ayuda] Include (php) modifica margen superior de div

el carácter '<' que utilizas para abrir el <div id="header> contiene un error, posiblemente de codificación, pues si se borra y se vuelve a escribir, el margin-top desaparece.

Y esto es lo que dice el validador:
Cita:
Notes and Potential Issues

The following notes and warnings highlight missing or conflicting information which caused the validator to perform some guesswork prior to validation. If the guess or fallback is incorrect, it could make validation results entirely incoherent. It is highly recommended to check these potential issues, and, if necessary, fix them and re-validate the document.

1.

Warning Byte-Order Mark found in UTF-8 File.

The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 06/07/2009, 13:07
 
Fecha de Ingreso: julio-2009
Mensajes: 4
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: [Ayuda] Include (php) modifica margen superior de div

Arreglado! Mil gracias
El error venía de codificar mal los archivos en el Notepad++, los codíficaba en UTF-8 a secas y deben codificarse en UTF-8 sin BOM. De paso he arreglao unas cuantas cosas más q salían en el validador.

Solo me queda una duda, el margen que asigno al pie de página se comporta de forma extraña, creo que tiene algo que ver con el float del menú, al ponerle 10px de margen no se aprecia cambio, pero aumentándolo, por ejemplo a 250 si se nota. Toma como inicio la parte baja del div main, que como en este caso es más pequeño que el menú, se queda pegado a su parte baja.
Se puede cambiar la referencia del margen al usar float?
  #6 (permalink)  
Antiguo 06/07/2009, 13:53
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: [Ayuda] Include (php) modifica margen superior de div

Lo que puedes es retirar el display:bock de #menu
Si habrá situaciones en las que éste sea mayor (de altura) que #main añade el margen-bottom a #menu.

O también podrías añadir en el html:
<div class="corte"></div>
antes de abrir <div id="footer>, y en el css definirlo como:
.corte {clear: both;}

Por cierto, ¿qué sentido tiene: <div id="clearing"/> justo antes de cerrar #container?

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 06/07/2009, 16:42
 
Fecha de Ingreso: julio-2009
Mensajes: 4
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: [Ayuda] Include (php) modifica margen superior de div

"clearing" era un intento mal hecho de hacer tu consejo de usar un div para hacer clear:both, lo coloque mal y fui dejando "basurilla" como eso o el display:block del menu de intentos de arreglarlo.

Mil gracias de nuevo ^^
  #8 (permalink)  
Antiguo 07/07/2009, 13:30
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: [Ayuda] Include (php) modifica margen superior de div

Hola:

Si está aprendiendo no des saltos, ve paso a paso. Es decir, aprende HTML y CSS y cuando te manejes con ellos pásate al PHP, mientras se aprende no cuesta tanto repetir código en cada página de la web, al fin y al cabo se puede copiar y pegar ¿no?

Saludos.

Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:18.