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