Layout

Para definir el posicionamiento de los bloques de una página HTML creada por PHP usamos
  • Divisiones en la página PHP indicando un ID para cada división
  • Una hoja de estilos STRUCTURE.CSS definiendo el posicionamiento para cada división
Ejemplo de Página estructurada en Cabecera, Menu Horizontal, Contenedor y Pié de Página. El Contenedor está dividido en Cuerpo Principal y Columna Derecha. Y el Cuerpo Principal, dividido en Columna Izquierda y Contenido.
Cada uno de estos bloques consta de un 'wrap' y del propio bloque. Con ello podemos alinear el bloque.

Usamos Hojas de estilo CSS

Podemos copiar de una ya hecha en http://layouts.ironmyers.com/

Ejemplo de estructura

  1. container incluye mainbody y columna derecha
  2. mainbody engloba columna izquierda y contenido

<div id="wrapper" class="wrapper">
  • <div id="headerwrap" class="headerwrap">
    • <div id="header" class="clearfix header">
      • HEADER
    • </div>
  • </div>
  • <div id="mainnavwrap" class="mainnavwrap">
    • <div id="mainnav" class="clearfix mainnav">
      • HORIZONTAL NAVIGATION
    • </div>
  • </div>
  • <div id="containerwrap" class="containerwrap">
    • <div id="container" class="clearfix container">
      • <div id="mainbody" class="clearfix mainbody">
        • <div id="contentwrap" class="contentwrap">
          • <div id="content" class="content">
            • CONTENT
          • </div>
        • </div>
        • <div id="col1" class="col1">
          • COLUMNA IZQUIERDA
        • </div>
      • </div>
      • <div id="col2" class="col2">
        • COLUMNA DERECHA
      • </div>
    • </div>
  • </div>
  • <div id="footerwrap" class="footerwrap">
    • <div id="footer" class="clearfix footer">
      • FOOTER
    • </div>
  • </div>
</div>

structure.css

html, body {
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
margin: 0;
padding-bottom: 10px; /* espacio libre entre footer y final de pantalla */
padding-top: 10px; /* espacio libre entre header y principio de pantalla */
}
/* ------------------------ HEADER ------------------ */
#headerwrap {}
#header {
height: 100px;
padding: 0px;
margin-bottom: 10px; /* espacio entre header y mainnav */
}
/* ------------------------ MAIN NAV ------------------ */
#mainnavwrap {}
#mainnav {
padding: 0;
margin-bottom: 10px; /* espacio entre mainnav y Container */
}
/* ------------------------ CONTAINER ------------------ */
#containerwrap {}
#container {
padding: 0px ;
margin-bottom: 10px; /* espacio entre Container y Footer */
}
/* ------------------------ FOOTER ------------------ */
#footerwrap {
clear: both;
}
#footer {
padding: 0px;
position: relative;
height: 20px;
}
/*========== dentro del CONTAINER ==================*/
/* -------- MAINBODY dentro de CONTAINER------------------ */
#mainbody {
float: left;
width: 80%; /* resto para col2 */
}
/* -------- RIGHT COLUMN dentro de CONTAINER------------------ */
#col2 {
float: right;
width: 20%; /* resto para mainbody */
overflow: hidden;
}
/*========= dentro del MAINBODY ======================*/
/* -------- LEFT COLUMN dentro de MAINBODY ----------------- */
#col1 {
float: left;
width: 24.99%; /* resto para content */
overflow: hidden;
}
/* -------- CONTENT dentro de MAINBODY ----------------- */
#contentwrap {
min-height: 200px;
height: auto;
float: right;
width: 75%; /* resto para col1 */
}
#content {
padding: 0px;
margin: 0px;
}
/*------------------------ WIDTH-------------------*/
#headerwrap,#mainnavwrap,#containerwrap,#footerwrap {width: 950px;margin: 0 auto;}
/*------------------------ Clearfix -------------------*/
.clearfix:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}
* html > body .clearfix {
width: 100%;
display: block;
}
* html .clearfix {
height: 1%;
}
/* Firefox Scrollbar Hack - Do not remove */
html {
margin-bottom: 1px;
height: 100%!important;
height: auto;
}

styles.css


body {
font-family: Arial, Helvetica, sans-serif;
line-height: 130%;
}
body, #wrapper, #headerwrap, #mainnavwrap, #containerwrap, #footerwrap {
background: Blue;
}


Position

  • Para posicionar un bloque div tenemos las siguientes opciones
    • static: valor por omisión, sigue el flujo, y hace caso omiso de left/right/top/bottom
    • relative: la pone en el flujo HTML, y hace caso de top y left en relación al anterior elemento relativo o al último elemento estático. (ojo, el top y left no respeta el left del anterior)
    • fixed: posición absoluta en relación al borde superior izquierdo del navegador.
    • absolute: lo mismo que fixed, pero en relación al último elemento padre que no sea static. Yo marco en pixels la distancia que hay desde el borde de mi página hasta el elemento. Puedo especificar TOP (del borde superior) y LEFT (de la columna izquierda). Lo saca del flujo HTML.
  • Mejor usar STATIC, y si no, poner RELATIVE.

Float

  • le decimos al elemento que flote, es decir que se alinee en relación al último elemento estático o relativo que encuentre.
    • right: alinear a la derecha con relación al último elemento relativo
    • left: alinear a la izquierda con relación al último elemento relativo
  • Al poner FLOAT tambien se libera el espacio que queda horizontalmente, porque sino, salta abajo.

Clear

  • Cierro los flotantes, dice que ya no queda espacio a la derecha ni a la izquierda.
  • Debo poner un DIV como CLEAR que queda muy claro que salta (es como un salto de linea)

<div id="clear"></div>
#clear {
clear:both;
}

Width

  • Puedo poner un porcentaje del espacio disponible. En relación al tamaño del contenedor. Es decir si está un div dentro de un div.
  • Suelo hacer un contenedor con un tamaño fijo.
  • TAMAÑO UTIL DE ANCHO: 960 .. porque es divisible... 480.. 240.. 120... 60.. 30... 15... 5
    Puedo dividir la pantalla en enteros.. 960 es un numero interesante para dividirlo en segmentos. Por ejemplo 12 elementos. Y puedo decir que el menu mide n elementos de ancho. Es un GRID.. la maquetación de una revista se hace en GRIDs.

Diferencias entre IE y el resto de navegadores

  • Margin se aplican diferente, por ello usamos todos los wrapper del mismo color de fondo que body.



CSS templates



Pasos para integrar un CSS template en nuestra estructura MVC

Ejemplo:
  • Bajar el layout de la web a carpeta docs, por ejemplo hemos bajado creevykeel desde freecsstemplates.org
  • En la carpeta encontraremos
    • index.html
    • style.css
    • carpeta images
  • Copiamos index.html y lo renombramos como layout_frontend.php en application/layouts
  • Creamos la carpeta partials en application/layoutsy creamos los siguientes ficheros (en este caso particular)
    • logo.php
    • header.php
    • footer.php
    • sidebar.php
    • content.php
  • distribuimos los divs de layout_frontend.phpentre los partials
    • ejemplo:
<?php include_once("../application/layouts/partials/logo.php");?>
  • en index.php (bootstrap controller) incluimos una llamada al layout
    • en realidad no tiene que estar en el bootstrap sino en el módulo home.
//Read layout
require_once "../application/layouts/layout_frontend.php";
  • copiamos docs/style.css a public/styles/css
  • copiamos carpeta docs/images a public/styles/css
    • movemos algunas imágenes (las que se referencian directamente desde layout_frontend.php), como img07-09, a public/assets/images
  • modificamos layout_frontend.php
    • los links a styles y imagenes los hacemos absolutos, como <link href="/styles/css/style.css"