Bueno, hice una especie de "remix" entre ese Tutorial y
este;
pero el problema es que me queda el menu abajo..
Pueden ver el resultado en
http://gruposcout508.com.ar/includes/index.phpY les dejo todos los códigos acá:
index.php:Código :
<?php include("header.html"); ?>
<p>
<div id="contenido">
<?php include("contenido.html"); ?>
</div>
</p>
<?php include("menu.html"); ?>
<?php include("footer.html"); ?>header.html:Código :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Grupo Scout N° 508</title>
<html>
<head>
<title> Muestra de includes </title>
<style type="text/css">
<!--
body {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #ebebeb;
}
#contenedor{
text-align: left;
width: 770px;
margin: auto;
}
#cabecera{
background-color: #d0d0ff;
color: #333300;
font-size:12pt;
font-weight: bold;
padding: 3 3 3 10px;
}
#cuerpo{
margin: 10 0 10 0px;
}
#lateral{
width: 160px;
background-color: #999999;
float: right;
}
#lateral ul{
margin : 0 0 0 0px;
padding: 0 0 0 0px;
list-style: none;
}
#lateral li{
background-color: #ffffcc;
margin: 2 2 2 2px;
padding: 2 2 2 2px;
font-weight: bold;
}
#lateral a{
color: #3333cc;
text-decoration: none;
}
#principal{
background-color: #ffffff;
padding: 4 4 4 4px;
margin-right: 170px;
}
#pie{
background-color: #cccccc;
padding: 3 10 3 10px;
text-align:right;
}
-->
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera">
Cabecera 01
</div>contenido.html:Código :
<div id="principal">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
......
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
......
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
......
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...... Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...... Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
......
v Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
......vvv
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
......
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...... Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...... Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...... Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
......
</div>
</div>
menu.html:Código :
<div id="cuerpo">
<div id="lateral">
<ul>
<li><a href="#">Enlace 1</a>
<li><a href="#">Vínculo 2</a>
<li><a href="#">Otro enlace</a>
<li><a href="#">Link chulo</a>
<li><a href="#">Más enlaces</a>
<li><a href="#">Otro último</a>
</ul>
</div>
footer.html:Código :
<div id="pie">
© 2005 DesarrolloWeb.com
</div>
</div>
</body>
</html>
Gracias!
