Maquetando con tamaños fijos

Maquetando con tamaños fijos – Capítulo 4

En la imagen anterior de nuestro proyecto podemos observar que están definidos distintos sectores o divs, a saber:

  • Un “header” o cabecera donde está la imagen con el logo de Joomla.
  • Una barra de navegación con el menú
  • Una barra lateral a la derecha dividida a su vez en tres sectores
  • Un cuerpo de contenido donde está el texto titulado “Template Joomla”, que a su vez tiene otro sector con una barra de navegación inferior (“Volver-Inicio-Mapa del sitio”)
  • Un pie donde dice “Mi primer template Joomla…”.

Dados estos sectores, modifiquemos primeramente nuestro “index.html” para que quede de la siguiente forma: (ver el código desde aquí) Vamos a ir viendo cada uno de los divs, pero expliquemos primero sus usos. Recordemos que un div empieza con el tag o etiqueta “
” y termina con “”.

Leer más

Tamaños variables

Maquetando con tamaños variables – Capítulo 12

Ya vimos como hacer una plantilla para Joomla desde cero hasta conseguir una personalización casi completa, por lo menos podemos llegar a eso si nos adentramos en profundidad en todos los estilos de Joomla (pufff… son demasiados no? 🙂

Ahora vamos a ver cómo hacer que esa plantilla se adapte al monitor que la muestra con tamaños variables, es decir que se autoajuste a la resolución del monitor del navegante.

En primer lugar tenemos que decidir si queremos que toda nuestra plantilla sea autoajuste o solamente alguna/s parte/s. En el caso que vamos a ver como ejemplo, usaremos como sección fija solamente la lateral derecha, es decir, donde está el Menú Principal, el buscador y el formulario de login. La cabecera o “header”, la barra de navegación superior y el pie o “footer” tendrán fijadas sus alturas pero no sus anchos. Y el cuerpo será flexible o ajustable 100%.

Leer más

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de sus datos para estos propósitos. Ver
Privacidad