Footer fijo

[jcc]

¡Huy, no me asustes! Eso de instalar un servidor Apache en mi ordenador me suena ya a palabras mayores... sobre todo, teniendo en cuenta que soy un novato total en esto, que tampoco puedo dedicarle todo el tiempo que quisiera, y que mi paginita es de lo más modesta...

[Rafael]

Descargas este programa http://www.easyphp.org/easyphp-devserver.php y le das click. Y listo. Servidor Apache en tu compu.

A mediano plazo es lo correcto. Luego haré un tutorial de esto, si quieres no lo hagas todavía.

[jcc]

Lo que pasa es que ahí sí que me pierdo por completo. Yo identificaba Apache con los servidores, y la verdad es que no conozco la utilidad que pueda tener (aunque supongo que la tendrá) instalado en mi ordenador, ya que evidentemente no es ni va a ser un servidor... y disculpa mi ignorancia en estos temas, que es prácticamente total, así como mi temor a verme desbordado.

Por otro lado, y esto no tiene nada que ver con lo anterior, en estos días se me han complicado mucho las cosas, me han salido rollos que no esperaba (la colaboración en un libro) y además dentro de poco se me echarán encima las vacaciones, con lo cual casi que prefiero aflojar un poco el acelerador. De momento voy a rematar lo poco que tengo reformado de la página y quiero también incluir tus sugerencias, por supuesto, de forma que me pueda quedar una plantilla bastante definitiva para luego poder darle a la churrera... pero aparte de la falta de tiempo tendré que digerir todo esto que es prácticamente nuevo para mí, ya que va mucho más allá de lo que en principio me había planteado.

Saludos y una vez más, gracias. Seguiremos en contacto.

[Rafael]

Los includes de php son para que, como viene el diagrama, utilices una párte del código que te funciona bien, y estás modificando, en tooodo tu site. Por ejemplo específicamente el menú, cabeceras, y pié de página.

Estos includes no corren en un archivo.html solito, corren exclusivamente en un lenguaje como php, que para tu caso básicamente son igualitos a los archivos html, con otra extensión.php pero con alguna etiqueta nueva de texto como <?php include ("menu.htm") ?>
por ahí.



Pero la cosa es que este cambio de extensión no lo reconoce así como así tu navegador, firefox, explorer o quien sea, sino hay que dispararlo desde un servidor.

Es ahí donde instalas el easyphp. Ya no trabajas en cualquier lado de tu computadora, sino en una carpeta muy específica. Al prender el servidor en tu compu puedes desarrollar tu site sin tener que estarlo subiendo de verdad, y estos archivos php son interpretados correctamente.

[jcc]

Entonces, ¿funciona algo así como las hojas de estilo? Porque no acabo de ver la diferencia, disculpa mi bisoñez.

Otra pregunta: Si yo utilizo ese sistema, para que luego lean mi página, los ordenadores de cada navegante ¿deben tener también instalado ese programa? ¿O basta con que lo tenga yo? Es que no me aclaro...

[jcc]

Iniciado por Rafael

Sigo poniendo cosas.

Las piezas que están en el sticky footer son contenedores. La premisa es que este contenedor siempre, siemre ocupe el 100% del ancho de la ventana.

Te pongo un diagrama.


Las áreas degradadas son los contenedores. A estos No les agregues un width.
Pones otro div dentro y a estos les pones digamos

Código CSS:

#pie{width: 980px; margin: 0 auto;}
 

Esto te centrará los bloques. No necesitas y no debes usar ningún align en el html.

La tendencia es que este bloque interno deje ver el diseño de abajo, no que parezca una hoja de papel encima. Solo es para delimitar el contenido de manera invisible.

Vamos con este otro tema que tenía pendiente, a ver si me aclaro. Me dices que en vez de definir el ancho de los contenedores (990 es para mí el equivalente al 100%), que lo defina en un segundo div interno. Bien, eso está claro, pero ¿qué hago con los contenedores externos? ¿Los dejo vacíos? ¿Y qué pasa con los nombres? Tendré que dárselos distintos a la capa de afuera y a la de abajo, porque si no protesta... ¿o cambio los id por los class?

Otra cosa. La capa pie es claramente un contenedor, y la capa que yo llamo contenedor, también. Pero ¿qué pasa con las dos capas restantes, cabeza y cuerpo? ¿Tengo que desdoblarlas también? Y dentro de la capa contenedor, tengo que abrir otra para definir el ancho, o ya me lo definen automáticamente las dos internas?

Disculpa que te maree, pero todo esto es completamente nuevo para mí...

[Rafael]

Iniciado por jcc

Entonces, ¿funciona algo así como las hojas de estilo?

Más o menos. Estilo es la forma de tu documento. Un ancho por aquí, un color por allá.

Los includes son pedazos de la página. Un menú por aquí, una piecera por allá.

No, nadie debe de instalar nada en su compu, ya que tus visitantes sí estarán viendo la página en tu servidor.

Instalar easyphp es para tí que la estás desarrollando para no tener que estarte conectando a internet para actualizar cada archivo. Los trabajas en tu compu, y ya que está lo subes a tu servidor.

[Rafael]

Iniciado por jcc

Me dices que en vez de definir el ancho de los contenedores (990 es para mí el equivalente al 100%), que lo defina en un segundo div interno.

De hecho los divs externo e interno ya los tienes. Pego el código de tu página resumido.

Código HTML:

<DIV ID="contenedor" ALIGN="CENTER"> 
        <DIV ID="cabecera" ALIGN="CENTER"><IMG
          SRC="jccanalda_doc/jccanalda_graficos/logo.jpg" BORDER="0" ALIGN="MIDDLE"
          HEIGHT="auto" CLASS="foto" WIDTH="auto"> </DIV> 
        <DIV ID="menu-2"> 
          ......
<DIV ID="cuerpo" ALIGN="JUSTIFY"> <BR><BR><BR><BR><BR><BR> 
          <P CLASS="piefoto"><IMG
             SRC="jccanalda_doc/jccanalda_graficos/fotomia.jpg" ALT="foto mía" WIDTH="auto"
             HEIGHT="auto" CLASS="foto"><BR><BR>Fotograf&iacute;a de Iv&aacute;n
             Esp&iacute;nola</P><BR><BR>
 

Y pego la opción limpia:

Código HTML:

<div id="contenedor"> 
    <div id="cabecera">
        <img src="jccanalda_doc/jccanalda_graficos/logo.jpg">
    </div> 
 
    <div ID="menu-2"> 
          ......
<div id="cuerpo">
    <div class="piefoto">
        <img src="jccanalda_doc/jccanalda_graficos/fotomia.jpg" alt="foto mía">
        <p>Fotografía de Iván Espánola</p>
    </div>
 

Me voy en cámara lenta.
1) Nota que el código limpio es muy fácilmente leible.
2) Toda etiqueta debería estar en minúsculas. No lo hagas a mano, a ver si me acuerdo cómo cambiarlo solito.
3) Todos esos br sobran, esos align.

Código CSS:

#contenedor {width: 100%;}
#cabecera, #cuerpo {width: 960px; margin: 0 auto;}
 
.piefoto {width: 150px;}
 
p {text-align: justify;}
 

Los estilos:
Tu contenedor, sobra decirle que debe estar al 100%, solo es para reiterar.
El cuerpo y la cabecera ya toman un ancho y solitos se centran (margin auto)

El justify es para los párrafos de texto, no para los contenedores que pueden tener digamos fotos... ¿cómo es el justify de varias fotos?

El que sí modifique es el div piefoto. así tiene más lógica. Tienes un conenedor que te agrupa una foto y un párrafo de texto, que es su pié de foto.

y supongo que sobran todos los img class foto en tu caso, ya que supongo todas las fotos que pongas son... fotos.

En dado caso defines un div.piedefotoDerecha {float: right;} por ejemplo para mandarla a la derecha y cosas así.