sagraramirez.es

El objetivo es conseguir poner dos DIVs en una web, uno al lado del otro (por ejemplo un menú y el contenido), con colores de fondo distintos y que los dos queden con la misma altura. El caso más normal es que el menú queda más corto, por lo que se dejaría sin rellenar la parte inferior (hasta que apareciera el pie).

He encontrado en Internet 2 posibles soluciones:

La primera consiste en emular una tabla con la propiedad "display". Necesitaremos un DIV para la tabla (display:table), un DIV para la fila (display:table-row) y luego en cada columna añadimos el atributo display:table-cell. El ejemplo lo podemos ver aquí.

La segunda consiste en añadir un borde a la columna más alta (que será la del contenido) de la misma anchura y color que el menú. Para un menú a la derecha tendríamos:

#contenido {background-color:red; border-right: 200px solid yellow}
#menu {background-color:yellow; float:right; width:200}

El problema de esta solución es que si por alguna razón el menú es más alto, no quedaría bien. Fuente aquí.

Dejo una serie de enlaces a manuales y tutoriales para uso de HTML y CSS en diseño web.

• http://www.cssya.com.ar/: recomendado para CSS. Sencillo y con ejemplos
• http://es.html.net/tutorials/css/: otro manual sencillo
• http://www.w3.org/Style/Examples/011/firstcss.es.html: incluye información sobre HTML y CSS
• http://aprobarinformatica.com/HTML/: Manual HTML de un curso del Ministerio de Educación
• http://www.librosweb.es/ Incluye varios manuales web, que se pueden descargar en PDF:
  • Introducción a CSS: descargar en PDF
  • CSS avanzado: descargar en PDF
  • Listado de referencias de CSS 2.1
• http://www.mclibre.org/consultar/amaya/index.html: Curso HTML, XHTML, CSS y Amaya. Incluye un listado de propiedades de CSS. Utilizado en el IES Abastos.

Las páginas web hechas con joomla están formadas por distintos módulos: los menús, encuestas, pie de página, banner superior... Cada uno de ellos tiene una posición, que se puede modificar a través del backend (parte de administrador) en el menú Extensiones>Gestor de Módulos.

La posición viene dada por un nombre y dependerá de la plantilla utilizada. Hay algunas posiciones con nombres que indican donde se pondrá el módulo (left, right, top, footer...), pero en otras no es posible conocerlo a priori, ya que dependen completamente de la plantilla utilizada (user1, user2, breadcrumb...).

Para que joomla nos muestre en la página dónde va cada posición tenemos 2 opciones:

• Desde el backend, ir al gestor de plantillas, entrar a editar una de las plantillas y pulsar el botón "previsualizar". Nos mostrará en un frame la página tal y como quedará con nuestra plantilla, y con las posiciones de los módulos que existen en la misma (aunque no se usen).
• La forma más fácil: añadiendo a la dirección de la página "index.php?tp=1". Por ejemplo en este portal la dirección que tendríamos que utilizar es la siguiente: http://www.sagraramirez.es/index.php?tp=1. Puedes pulsar para ver la información que muestra esta opción.

Enlace a completo manual de HTML.

Publicado en la web del MEC por Ángel Ricardo Puente Pérez

http://roble.pntic.mec.es/apuente/html/paginas/contenidos.htm