Tag Archives: Css

Compass (IV): 100% height using 960.gs grid [SOLVED]

01/12/2011 14:52 \ Leave a Comment \

Ayer os comenté la forma de conseguir un sticky footer usando el grid 960.gs en Compass

Sin embargo el ejemplo de ayer no completaba la altura del div de contenido (#content) hasta el footer:

El ejemplo de hoy es muy similar, pero el contenido se extiende hasta alcanzar el footer (height 100% del elemento contenedor):

Fichero de marcado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="./stylesheets/grid.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="./stylesheets/text.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>Compass 24 column grid tutorial by Miguel Martín</title>
</head>
<body>
	<div id="wrapper2">
	    <div id="segundo" class="container_24">  
        	<div id="header">
        		<p>This is the header</p>
        	</div>
        	<div id="left-sidebar">
        		<p>This is left</p>
        	</div>
        	<div id="main-content">
        		<p>This is main content</p>
        	</div>
        	<div id="right-sidebar">
        		<p>This is right</p>
    		</div>
       </div> <!-- /segundo -->
    </div> <!-- /wrapper2 -->
 
    <div id="footer">
        	<p>This is footer</p>
    </div>
</body>
</html>

Fichero grid.scss (de estilo):

 
/* Tutorial Compass (IV) 
 * Autor: Miguel Martin (miguelm[at]unizar[dot]es)
 * Más detalles: www.leccionespracticas.com
 */
 
@import "compass/reset";
@import "960/grid";  
 
$ninesixty-columns: 24;
$ninesixty-gutter-width: 10px;
 
.container_24 {
  @include grid-container;
 
  background-image: url(../img/24_col.gif);
  background-color: #fff;
  background-repeat: repeat-y;
 
  min-height: 100%;
 
  #header {
    @include grid(24); 
  }
 
  #left-sidebar{
  	@include grid(4);
  }
 
  #right-sidebar {
    @include grid(4); 
  }
 
  #main-content {
    @include grid(16);
  } 
 
}
 
#footer {
    position: relative;
    margin-top: -50px; /* negative value of footer height */
    height: 50px;
    clear: both;
	background: #FFF;
	margin-bottom: 0px;
	padding:0px;
	width: 960px;
	margin-left: auto;
	margin-right:auto;
 
	p{
		padding: 5px;
		border: 0px;
		margin: 0px;
	}
} 
 
/* ---- con wrapper2 consigo height 100% en el contenedor de contenido ------ */
#wrapper2{
	height:100%;
	margin-bottom: -50px;
	background:#333;
	width:960px;
	margin-left:auto;
	margin-right:auto;
}
/* --------------------------------------------------------- */
 
/* General CSS settings */
body {
  background: #123;
  color: #333;
  font-size: 11px;
}
 
html, body, #wrapper {height: 100%;}
 
body > #wrapper { height: auto; min-height: 100%; }
 
#content { overflow: auto; padding-bottom: 50px; } 
 
a {
  color: #fff;
  text-decoration: none;
}
 
a:hover {
  text-decoration: underline;
}
 
h1 {
  font-family: Georgia, serif;
  font-weight: normal;
  padding-top: 20px;
  text-align: center;
  background: #FFF;
}
 
h2 {
  padding-top: 20px;
  text-align: center;
}
 
p {
  border: 1px solid #666;
  overflow: hidden;
  padding: 10px 0;
  text-align: center;
}
 
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
 
 
.clearfix:before,
.clearfix:after,
.container_24:before,
.container_24:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}
 
.clearfix:after,
.container_24:after {
  clear: both;
}
 
/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/
 
.clearfix,
.container_24 {
  zoom: 1;
}

Utilizando estos dos ejemplos como base se puede realizar de forma muy simple cualquier layout sobre un grid de anchura fija de 960px.

En próximos capítulos veremos las desventajas de utilizar grids de ancho fijo ahora que los tablets, móviles y demás aparatos de resoluciones dispares están conquistando el mercado.

Posted in: Informática - web \ Tagged: , , ,

Compass (III): Sticky footer how to [SOLVED] [RESUELTO]

30/11/2011 14:50 \ 1 Comment \

Llevo unos posts hablando sobre Compass y me preguntaban vía mail cómo conseguir un sticky footer mediante este sistema.

Bueno, me preguntaban cómo hacer que la altura de la página fuera 100%. Pero vamos, es lo mismo y se hace del mismo modo que se hace siempre: div para wrapper, div para content y el footer fuera. Pero veámoslo con un ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="./stylesheets/grid.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="./stylesheets/text.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>Compass 24 column grid tutorial by Miguel Martín</title>
</head>
<body>
	<div id="wrapper">
	   <div id="content" class="container_24">  
        	<div id="header">
        		<p>This is the header</p>
        	</div>
        	<div id="left-sidebar">
        		<p>This is left</p>
        	</div>
        	<div id="main-content">
        		<p>This is main content</p>
        	</div>
        	<div id="right-sidebar">
        		<p>This is right</p>
    		</div>
       </div> <!-- content -->
    </div> <!-- /wrapper -->
 
    <div id="footer">
        <p>This is footer</p>
    </div>
</body>
</html>

Y el grid.scss para 24 columnas sería

/* Tutorial Compass (III) - sticky footer resuelto
 * Autor: Miguel Martin (miguelm[at]unizar[dot]es)
 * Más detalles: www.leccionespracticas.com
 */
 
@import "compass/reset";
@import "960/grid";  
 
$ninesixty-columns: 24;
$ninesixty-gutter-width: 10px;
 
.container_24 {
  @include grid-container;
 
  background-image: url(../img/24_col.gif);
  background-color: #fff;
  background-repeat: repeat-y;
 
  #header {
    @include grid(24); 
  }
 
  #left-sidebar{
  	@include grid(4);
  }
 
  #right-sidebar {
    @include grid(4); 
  }
 
  #main-content {
    @include grid(16);
  } 
 
}
 
#footer {
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear: both;
	background: #FFF;
	margin-bottom: 0px;
	padding:0px;
} 
 
 
 
/* General CSS settings */
body {
  background: #123;
  color: #333;
  font-size: 11px;
}
 
 
html, body, #wrapper {height: 100%;}
 
body > #wrapper { height: auto; min-height: 100%; }
 
#content { overflow: auto; padding-bottom: 150px; } 
 
a {
  color: #fff;
  text-decoration: none;
}
 
a:hover {
  text-decoration: underline;
}
 
h1 {
  font-family: Georgia, serif;
  font-weight: normal;
  padding-top: 20px;
  text-align: center;
  background: #FFF;
}
 
h2 {
  padding-top: 20px;
  text-align: center;
}
 
p {
  border: 1px solid #666;
  overflow: hidden;
  padding: 10px 0;
  text-align: center;
}
 
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
 
 
.clearfix:before,
.clearfix:after,
.container_24:before,
.container_24:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}
 
.clearfix:after,
.container_24:after {
  clear: both;
}
 
/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/
 
.clearfix,
.container_24 {
  zoom: 1;
}

Y el resultado:

Posted in: Informática - web \ Tagged: , , , , , , , , ,

Compass (II): Grid de 24 columnas listo para trabajar

30/11/2011 11:07 \ Leave a Comment \

Como ya vimos en la primera parte del tutorial de Compass este sistema facilita muchísimo la escritura, legibilidad y jerarquización de CSS.

Los ejemplos de la primera parte del tutorial eran simplemente para entender los mecanismos de Compass+SASS. En esta segunda parte vamos a desarrollar un ejemplo más útil, que servirá para comenzar a diseñar sobre él: un grid de 24 columnas con un header, footer y dos sidebars.

Lo que vamos a obtener es esto:

El fichero index.html que contiene el marcado html (aka markup) será realmente simple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="./stylesheets/grid.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="./stylesheets/text.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>Compass 24 column grid tutorial by Miguel Martín</title>
</head>
<body>
    <h1>Ejemplo más completo de Compass+LASS</h1>
	<div class="container_24">  
    	<div id="header">
        	<p>This is the header</p>
        </div>
        <div id="left-sidebar">
        	<p>This is left</p>
        </div>
        <div id="main-content">
        	<p>This is main content</p>
        </div>
        <div id="right-sidebar">
        	<p>This is right</p>
    	</div>
        <div id="footer">
        	<p>This is footer</p>
        </div>
    </div>
</body>
</html>

En este caso nuestro fichero grid.scss va a contener varias cosas adicionales que no habíamos visto en la primera parte del tutorial.

Algunos ajustes básicos de estilo:

body {
  background: #123;
  color: #333;
  font-size: 11px;
  height: auto;
  padding-bottom: 20px;
}
 
a {
  color: #fff;
  text-decoration: none;
}
 
a:hover {
  text-decoration: underline;
}
 
h1 {
  font-family: Georgia, serif;
  font-weight: normal;
  padding-top: 20px;
  text-align: center;
  background: #FFF;
}
 
h2 {
  padding-top: 20px;
  text-align: center;
}
 
p {
  border: 1px solid #666;
  overflow: hidden;
  padding: 10px 0;
  text-align: center;
}

Las reglas clearfix para un grid de 24 columnas:

/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
 
/* http://sonspring.com/journal/clearing-floats */
 
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
 
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
 
.clearfix:before,
.clearfix:after,
.container_24:before,
.container_24:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}
 
.clearfix:after,
.container_24:after {
  clear: both;
}
 
/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/
 
.clearfix,
.container_24 {
  zoom: 1;
}

Y la parte jugosa, donde definiremos el grid de 24 columnas sobre el contenedor de 960px, centrado, con su margen (aka gutter) entre columnas (que no serán los 20px por defecto, sino 10px):

$ninesixty-columns: 24; // grid de 24 columnas...
$ninesixty-gutter-width: 10px; // separadas 10px...
 
.container_24 {
  @include grid-container;
 
  background-image: url(../img/24_col.gif); // imagen con las franjas "rosas" de fondo
  background-repeat: repeat-y; // que se repite en horizontal...
  background-color: #fff; // sobre un color de fondo blanco...
  margin-bottom: 20px;
 
  #header, #footer {
    @include grid(24); 
  }
 
  #left-sidebar{
  	@include grid(4);
  }
 
  #right-sidebar {
    @include grid(4); 
  }
 
  #main-content {
    @include grid(16);
  } 
}

Y por último, dejo el fichero grid.scss completo:

/* Tutorial Compass (II) 
 * Autor: Miguel Martin (miguelm[at]unizar[dot]es)
 * Más detalles: www.leccionespracticas.com
 */
 
@import "compass/reset";
@import "960/grid";  
 
$ninesixty-columns: 24;
$ninesixty-gutter-width: 10px;
 
body {
  background: #123;
  color: #333;
  font-size: 11px;
  height: auto;
  padding-bottom: 20px;
}
 
a {
  color: #fff;
  text-decoration: none;
}
 
a:hover {
  text-decoration: underline;
}
 
h1 {
  font-family: Georgia, serif;
  font-weight: normal;
  padding-top: 20px;
  text-align: center;
  background: #FFF;
}
 
h2 {
  padding-top: 20px;
  text-align: center;
}
 
p {
  border: 1px solid #666;
  overflow: hidden;
  padding: 10px 0;
  text-align: center;
}
 
.container_24 {
  @include grid-container;
 
  background-image: url(../img/24_col.gif);
  background-color: #fff;
  background-repeat: repeat-y;
  margin-bottom: 20px;
 
  #header, #footer {
    @include grid(24); 
  }
 
  #left-sidebar{
  	@include grid(4);
  }
 
  #right-sidebar {
    @include grid(4); 
  }
 
  #main-content {
    @include grid(16);
  } 
}
 
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
 
/* http://sonspring.com/journal/clearing-floats */
 
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
 
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
 
.clearfix:before,
.clearfix:after,
.container_24:before,
.container_24:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}
 
.clearfix:after,
.container_24:after {
  clear: both;
}
 
/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/
 
.clearfix,
.container_24 {
  zoom: 1;
}

Si deseáis descargarlo de forma completa, podéis hacerlo aqui:
DESCARGA EJEMPLO COMPLETO

Un poco más

Vamos a ver cómo añadir, por ejemplo, una tercera fila con contenido solo en la segunda columna. Debemos añadir una nueva clase (que llamaré ancho1_desplazado1 y resultará en un ancho de 30px) con:

  .ancho1_desplazado1{
 	@include grid-prefix(1,24);
  	@include grid(1);
  }

Y añadir un nuevo div de esa clase en nuestro marcado…

<body>
    <h1>Ejemplo más completo de Compass+LASS</h1>
    <div class="container_24">  
    	<div id="header">
        	<p>This is the header</p>
        </div>
        <div id="left-sidebar">
        	<p>This is left</p>
        </div>
        <div id="main-content">
        	<p>This is main content</p>
        </div>
        <div id="right-sidebar">
        	<p>This is right</p>
    	</div>
        <div class="ancho1_desplazado1">
        	<p>A1</p>
        </div>      
        <div id="footer">
        	<p>This is footer</p>
        </div>
    </div>
</body>
</html>

Y conseguiremos el efecto deseado:

Utilizando Photoshop para hacer nuestro diseño

Una vez visto cómo colocar elementos del ancho deseado en la posición deseada, podemos empezar a realizar nuestro diseño de página usando photoshop. Para ello abrimos un nuevo documento .psd y metemos la imagen rosa de fondo.

A partir de este punto podemos realizar todo nuestro diseño sobre el fichero PSD y más adelante “traducirlo” a CSS :)

Posted in: Informática - web \ Tagged: , , , , , , , , , , ,

Compass (I): instalación, primeros pasos y ejemplos básicos

30/11/2011 09:48 \ 1 Comment \

Si diseñas webs a menudo puede que estés cansado de estar haciendo tú mismo los CSS’s (y los cálculos que esto conlleva). Hay sistemas, como 960 grid que ayudan (y mucho) a construir grids sobre un contenedor de 960 px. ¿Por qué 960px? Porque es un número fácilmente divisible (resto entero entre dos, tres, cuatro, cinco, etc)

Los sistemas como 960.gs son muy cómodos de utilizar una vez entiendes el funcionamiento básico, pero terminan generando un markup muy poco legible y sobrecargado de información de estilo, algo que va en contra de la filosofía de separar markup de información de estilos.

Un ejemplo (sacado de un proyecto real):

<div class="grid_6 push_3 suffix_2">
   <p>logo</p>
</div>
<div class="grid_2 prefix_3">
   <p>sometext</p>
</div>
...

Con Compass seguiremos manteniendo la comodidad de diseñar sobre un grid, pero obtendremos un marcado mucho mejor.

Por ejemplo, partiendo de esto:

@import "compass/utilities/general/clearfix";
@import "960/grid";
 
$ninesixty_columns: 16;
 
#wrapper
{
  @include grid_container;
  @include clearfix;
}
 
#mast
{
  @include grid(16);
  @include clearfix;
  background: #ddd;
 
  #logo
  {
    @include grid(6);
    @include alpha;
  }
 
  #strapline
  {
    @include grid(10);
    @include omega;
  }
}

Terminaremos consiguiendo un fichero CSS renderizado tal que asi:

/* line 7, ../src/grid.scss */
#wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  overflow: hidden;
  display: inline-block;
}
/* line 8, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.0/frameworks/compass/... */
#wrapper {
  display: block;
}
 
/* line 13, ../src/grid.scss */
#mast {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 940px;
  overflow: hidden;
  display: inline-block;
  background: #ddd;
}
/* line 8, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.0/frameworks/compass/... */
#mast {
  display: block;
}
/* line 19, ../src/grid.scss */
#mast #logo {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 340px;
  margin-left: 0;
}
/* line 25, ../src/grid.scss */
#mast #strapline {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 580px;
  margin-right: 0;
  background: red;
}

¿Cómodo, eh?

Instalando Compass

Compass necesita que tengas instalado Ruby. Existen múltiples instaladores de Ruby. Si desarrollas en Windows, una de las formas más simples de instalar Ruby es utilizar RubyInstaller. Si desarrollas en MAC OS o en Linux/Unix, lo más cómodo es instalar Ruby utilizando RVM (Ruby Version Manager).

Una vez instalado, deberemos añadir al PATH la ruta donde hemos instalado Ruby. Por ejemplo, en mi caso, instalo en un Windows 7, en la ruta c:\Ruby193 y añadiré al PATH (panel de control -> variables de entorno) este directorio.

Después abro una consola (Inicio -> Ejecutar -> Start command prompt with Ruby) y procedo a instalar Compass y el plugin compass-960-plugin:

gem update --system
gem install compass
gem install compass-960-plugin

¿Dónde está la documentación del plugin 960gs para Compass?

Puedes leerla en tu máquina al instalar el compass-960-plugin o consultar la documentación en línea y las distintas opciones.

Creando nuestro primer proyecto con Compass

Una vez instalado, vamos a crear un primer proyecto llamado my_project utilizando el plugin 960 para Compass.

compass create -r ninesixty my_project --using 960

Producirá una salida tal que:

directory my_project/
directory my_project/sass/
directory my_project/stylesheets/
   create my_project/config.rb
   create my_project/sass/grid.scss
   create my_project/sass/text.scss
   create my_project/stylesheets/grid.css
   create my_project/stylesheets/text.css
 
*********************************************************************
Congratulations! Your compass project has been created.
 
You may now add and edit sass stylesheets in the sass subdirectory of your project.
 
Sass files beginning with an underscore are called partials and will not be compiled to CSS, but they can be imported into other sass stylesheets.
 
You can configure your project by editing the config.rb configuration file. 
 
You must compile your sass stylesheets (.scss) into CSS when they change.
This can be done in one of the following ways:
  1. To compile on demand:
     compass compile [path/to/project]
  2. To monitor your project for changes and automatically recompile:
     compass watch [path/to/project]
 
More Resources:
  * Website: http://compass-style.org/
  * Sass: http://sass-lang.com
  * Community: http://groups.google.com/group/compass-users/
 
 
Please see the 960 website for documentation:
 
    http://960.gs/
 
To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
  <link href="/stylesheets/grid.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="/stylesheets/text.css" media="screen, projection" rel="stylesheet" type="text/css" />
</head>

Ya está el proyecto creado. Vamos a echar un vistazo a los ficheros que se han creado en C:\Users\miguelm\my_project:

C:\Users\miguelm\my_project>dir
29/11/2011  09:47    <DIR>          .
29/11/2011  09:47    <DIR>          ..
29/11/2011  09:47    <DIR>          .sass-cache
29/11/2011  09:47               908 config.rb
29/11/2011  09:47    <DIR>          sass
29/11/2011  09:47    <DIR>          stylesheets

En la carpeta sass tenemos los ficheros SIN compilar y en la carpeta stylesheets los ficheros compilados. Los settings del proyecto se pueden modificar editando el archivo config.rb. Por ejemplo, puedes indicar cuál es el images_dir o el output_style (si deseas CSS comprimido o sin comprimir), por ejemplo:

...
images_dir = "public/images"
output_style = :compressed

Para hacer el desarrollo más cómodo y que compass detecte y auto-compile los ficheros “al vuelo”, vamos a ejecutar:

compass watch my_project

Y ya podemos empezar a editar los ficheros de /sass/*.scss
Por ejemplo, voy comentando los contenidos de sass/grid.scss:

 
// importa los resets y algunas cosas básicas del grid
@import "compass/reset";
@import "960/grid";
 
// Hay tres versiones del célebre 960.gs, en 12, 16 y 24 columnas (el que usaremos en el siguiente ejemplo)
.container_12 {
  @include grid-system(12); }
 
.container_16 {
  @include grid-system(16); }
 
// La mayoría de nosotros estamos acostumbrados a diseñar layouts algo más semánticos (por ejemplo, dos columnas, con header y footer)
$ninesixty-columns: 24;
 
// El contenedor de todo será de clase two-column
.two-column {
 
  // La siguiente línea indica que queremos CENTRAR el contenedor
  @include grid-container;
 
  // Comenzamos a describir nuestros id's...
  #header, #footer {
    @include grid(24); }
  #sidebar {
    @include grid(8); }
  #main-content {
    @include grid(16); } }

Vamos a hacer una prueba creando el archivo de markup para este CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="./stylesheets/grid.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="./stylesheets/text.css" media="screen, projection" rel="stylesheet" type="text/css" />
 
<title>My Project</title>
</head>
 
<body>
	<div class="two-column">
    	  <div id="header">
        	This is the header
          </div>
          <div id="main-content">
        	This is main-content
          </div>
          <div id="sidebar">
        	This is sidebar
    	  </div>
          <div id="footer">
        	This is footer
    	  </div>  
    </div>
</body>
</html>

Con el markup anterior vemos que nuestro contenedor será de la clase “two-column” y estará dividido en 24 columnas.

Tanto el header como el footer tienen 24 columnas (@include grid(24);), es decir, ocuparán los 960px de ancho.

La barra lateral (#sidebar) ocupará 8 columnas (@include grid(8);) y la zona del contenido, 16 columnas (@include grid(16);).

Nótese que el total de columnas será SIEMPRE igual al valor del parámetro $ninesixty-columns (24, en este caso).

Para que veamos mejor el grid, voy a poner color negro de fondo a todos los div (y el texto en blanco). Para ello simplemente añado al archivo grid.scss las líneas 14 a 16:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

/* 960 Grid System ~ Core CSS.
 * Learn more ~ http://960.gs/
 * *
 * Licensed under GPL and MIT. */
 
@import "compass/reset";
@import "960/grid";
 
// The following generates the default grids provided by the css version of 960.gs
.container_12 {
  @include grid-system(12); 
}
 
.container_16 {
  @include grid-system(16); 
}
 
// But most compass users prefer to construct semantic layouts like so (two column layout with header and footer):
 
$ninesixty-columns: 24;
 
*div{
	background: #000;
	color: #fff;
}
 
.two-column {
 
  @include grid-container;
 
  #header, #footer {
    @include grid(24); 
 
  }
  #sidebar {
    @include grid(8); 
  }
  #main-content {
    @include grid(16);
  } 
}

Guardamos el fichero.

Si nos fijamos en la consola que teníamos abierta, donde tecleamos compass wathc my_project veremos que ha detectado los cambios y sobreescrito grid.css.

>>> Change detected to: grid.scss
overwrite my_project/stylesheets/grid.css

Al ver el ejemplo en nuestro navegador, observaremos algo tal que:

Es feo, pero es un comienzo. Sigamos.

Compass alpha y omega: Ajustando márgenes entre elementos

Por defecto los bloques están separados 20px (cada uno tiene un margin de 10px). Podemos eliminar el margen entre elementos o bien al principio (@include alpha;) o bien al final (@include omega;) de los mismos.

Por ejemplo, para eliminar el margen al final de nuestro div main-content, añadimos @include omega; en el mismo…o añadimos @include alpha; en el sidebar.

...
#sidebar {
    @include grid(8); 
    @include alpha;
}
...

A continuación vamos a ver cómo sería un diseño en tres columnas usando 960 gs para Compass:

/* This is grid.scss */
 
@import "compass/reset";
@import "960/grid";
 
// The following generates the default grids provided by the css version of 960.gs
.container_12 {
  @include grid-system(12); 
}
 
.container_16 {
  @include grid-system(16); 
}
 
// But most compass users prefer to construct semantic layouts like so (two column layout with header and footer):
 
$ninesixty-columns: 24;
 
*div{
	background: #000;
	color: #fff;
}
 
.three-column {
 
  @include grid-container;
 
  #header, #footer {
    @include grid(24); 
 
  }
 
  #left-sidebar{
  	@include grid(4);
  }
 
  #right-sidebar {
    @include grid(4); 
  }
 
  #main-content {
    @include grid(16);
  } 
 
}

Y el marcado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="./stylesheets/grid.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="./stylesheets/text.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>My Project</title>
</head>
<body>
	<div class="three-column">  
    	<div id="header">
        	This is the header
        </div>
        <div id="left-sidebar">
        	This is left
        </div>
        <div id="main-content">
        	This is main-content
        </div>
        <div id="right-sidebar">
        	This is right
    	</div>
        <div id="footer">
             This is the footer                                      
    	</div>
    </div>
</body>
</html>

Explorando más posibilidades

En el README del compass-960-plugin leemos:

To create a grid system using only CSS, use the following semantic grid mixins:
 
    Use the +grid-container mixin to declare your container element.
    Use the +grid(N, columns, gutter-width) mixin to declare a grid element.
    Use the +alpha and +omega mixins to declare the first and last grid elements for a row.
    Use the +grid-prefix(N, columns) and +grid-suffix(N, columns) mixins to add empty grid columns before or after a grid element.
    Use the +grid-push(N, columns) and +grid-pull(N, columns) mixins to move a grid element from its default position.
 
N is the number of grid columns to span as in grid_N or push_N with the original 960 Grid System framework.

Además de las ya exploradas @include grid(N) encontramos una forma útil de crear espacios negativos (vacíos) en el layout con @include grid-prefix(N,cols) y @include grid-suffix(N,cols).

Por ejemplo, vamos a crear una segunda fila en la que desplacemos 1 columna hacia la derecha el layout:

/* 960 Grid System ~ Core CSS.
 * Learn more ~ http://960.gs/
 * *
 * Licensed under GPL and MIT. */
 
@import "compass/reset";
@import "960/grid";
 
// The following generates the default grids provided by the css version of 960.gs
.container_12 {
  @include grid-system(12); 
}
 
.container_16 {
  @include grid-system(16); 
}
 
// But most compass users prefer to construct semantic layouts like so (two column layout with header and footer):
 
$ninesixty-columns: 24;
 
*div{
	background: #000;
	color: #fff;
}
 
.three-column {
 
  @include grid-container;
 
  #header, #footer {
    @include grid(24); 
 
  }
 
  #left-sidebar{
  	@include grid(4);
  }
 
  #right-sidebar {
    @include grid(4); 
  }
 
  #main-content {
    @include grid(16);
  } 
 
  #left-sidebar-2{
  	@include grid(4);
        // extiendo 1 columna hacia la derecha de 24 totales...
        // Nótese que sigue sumando 24: 4(grid)+1(extensión)+3(right)+16(main-content2)
	@include grid-suffix(1,24);
  }
 
  #right-sidebar-2 {
    @include grid(3); 
  }
 
  #main-content-2 {
    @include grid(16);
  } 
}

Y la salida que obtendremos:

En próximos posts, haremos algún ejemplo real de uso de Compass :)

Posted in: Informática - web \ Tagged: , , , , , ,

Invenio CSS – sticky footer [solved]

16/09/2011 10:33 \ Leave a Comment \

If you check Invenio Demo you will notice that the footer is not sticky, this is, it is not always in the bottom. This was quite annoying IMHO.

Lets fix it!

General CSS+markup for sticky footer

In general, you can make a footer sticky like this:

    * {
    margin: 0;
    }
    html, body {
    height: 100%;
    }
    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* height of the footer = 100px */
    }
    .footer,  {
    clear:both;
    height: 100px; /* height of the footer = 100px */
    }
    <html>
        <head>
            <link rel="stylesheet" href="styles.css" ... />
        </head>
        <body>
            <div class="wrapper">
                Content here
            </div>
            <div class="footer">
                Footer here
            </div>
        </body>
    </html>

CSS Sticky footer in CDS Invenio

CDS Invenio, by default, renders pages in three divs:

<div class="pageheader">
<div class="pagebody">
<div class="pagefooter">

We are going to change it to a markup like the above one, it’ll end up looking like this:

<div class="wrapper">
    <div class="pageheader">
    <div class="pagebody">
</div>
<div class="pagefooter">

To achieve this you will have to edit your webstyle_templates.py file and your CSS file to add the wrapper. Find the <body> tag and add the wrapper after it:

<body><div id='wrapper' style='min-height:100%%; margin-bottom: -60px;'>""" % {
...

And of course, close this div before pagefooter begins:

</div> <!-- /wrapper -->
<div class="cdl_pagefooter">

Here is my full customized webstyle_templates_buz.py:

# -*- coding: utf-8 -*-
## $Id: webstyle_templates_cern.py,v 1.23 2008/08/11 09:07:56 jerome Exp $
## CDS Invenio WebStyle templates.
 
## This file is part of CDS Invenio.
## Copyright (C) 2002, 2003, 2004, 2005, 2006, 2007 CERN.
##
## CDS Invenio is free software; you can redistribute it and/or
## modify it under the terms of the GNU General Public License as
## published by the Free Software Foundation; either version 2 of the
## License, or (at your option) any later version.
##
## CDS Invenio is distributed in the hope that it will be useful, but
## WITHOUT ANY WARRANTY; without even the implied warranty of
## MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
## General Public License for more details.
##
## You should have received a copy of the GNU General Public License
## along with CDS Invenio; if not, write to the Free Software Foundation, Inc.,
## 59 Temple Place, Suite 330, Boston, MA 02111-1307, USA.
"""
WebStyle templates. Customize the look of pages of CDS Invenio
"""
__revision__ = \
    "$Id: webstyle_templates_cern.py,v 1.23 2008/08/11 09:07:56 jerome Exp $"
 
import urllib
import cgi
from invenio.config import \
     CFG_SITE_LANG, \
     CFG_SITE_NAME, \
     CFG_SITE_NAME_INTL, \
     CFG_SITE_SUPPORT_EMAIL, \
     CFG_SITE_SECURE_URL, \
     CFG_SITE_URL, \
     CFG_VERSION
from invenio.messages import gettext_set_language
from invenio.urlutils import make_canonical_urlargd, create_html_link
from invenio.dateutils import convert_datecvs_to_datestruct, \
                              convert_datestruct_to_dategui
from invenio.webuser import collect_user_info, isUserSubmitter, \
     isUserReferee
from invenio.access_control_admin import acc_find_possible_activities
from invenio.webstyle_templates import Template as DefaultTemplate
 
CFG_DEVEL_SITE = 0
 
class Template(DefaultTemplate):
    """
    Override default Altantis template to provide CERN specific style
    """
    def tmpl_pageheader(self, req, ln=CFG_SITE_LANG, headertitle="",
                        description="", keywords="", userinfobox="",
                        navtrailbox="", pageheaderadd="", uid=0,
                        secure_page_p=0, navmenuid="admin", metaheaderadd="",
                        rssurl=CFG_SITE_URL+"/rss"):
        """Creates a page header
 
           Parameters:
 
          - 'CFG_SITE_URL' *string* - The base URL for the site
 
          - 'ln' *string* - The language to display
 
          - 'sitename' *string* - the first part of the page HTML title
 
          - 'headertitle' *string* - the second part of the page HTML title
 
          - 'CFG_SITE_SUPPORT_EMAIL' *string* - email of the support team
 
          - 'description' *string* - description goes to the metadata in the header of the HTML page
 
          - 'keywords' *string* - keywords goes to the metadata in the header of the HTML page
 
          - 'metaheaderadd' *string* - list of further tags to add to the <HEAD></HEAD> part of the page
 
          - 'userinfobox' *string* - the HTML code for the user information box
 
          - 'userinfobox_structure' *list of tuples* - similar to 'userinfobox' but structured
 
          - 'navtrailbox' *string* - the HTML code for the navigation trail box
 
          - 'pageheaderadd' *string* - additional page header HTML code
 
          - 'languagebox' *string* - the HTML code for the language box
 
          - 'secure_page_p' *int* (0 or 1) - are we to use HTTPS friendly page elements or not?
 
          - 'navmenuid' *string* - the id of the section of the website the displayed page belongs (search, submit, etc.)
 
          - 'rssurl' *string* - the url of the RSS feed for this page
 
           Output:
 
          - HTML code of the page headers
        """
 
        # load the right message language
        _ = gettext_set_language(ln)
 
        if headertitle == CFG_SITE_NAME_INTL.get(ln, CFG_SITE_NAME):
            headertitle = _("Home")
 
        out = """\
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="%(ln)s" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>%(headertitle)s - %(sitename)s</title>
 <link rev="made" href="mailto:%(CFG_SITE_SUPPORT_EMAIL)s" />
 <!-- <link rel="stylesheet" href="https://zaguan.unizar.es/combine.php?type=css&files=buzcds.compressed.css,cds.compressed.css" type="text/css" />-->
 <link rel="stylesheet" href="https://zaguan.unizar.es/img/newbuzcds.css" type="text/css" />
 <link rel="alternate" type="application/rss+xml" title="%(sitename)s RSS" href="%(rssurl)s" />
 <link rel="shortcut icon" href="/img/favicon.ico"/>
 <meta name="verify-v1" content="UMC2+4TXTky6whrJacawBYJh0MR7tRk1QB7zV5yFDP0=" />
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="description" content="%(description)s" />
 <meta name="keywords" content="%(keywords)s" />
 <script type="text/javascript" src="https://zaguan.unizar.es/combine.php?type=javascript&files=jquery.js,spoiler.js"></script>
 <script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-6988718-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
 
 %(metaheaderadd)s
</head>
<body><div id='wrapper-miguel' style='min-height:100%%; margin-bottom: -60px;'>""" % {
     'CFG_SITE_URL' : CFG_SITE_URL,
     'CFG_SITE_SECURE_URL' : CFG_SITE_SECURE_URL,
     'cssurl' : secure_page_p and CFG_SITE_SECURE_URL or CFG_SITE_URL,
     'rssurl': rssurl,
     'ln' : ln,
 
     'sitename' : CFG_SITE_NAME_INTL.get(ln, CFG_SITE_NAME),
     'headertitle' : headertitle,
     'CFG_SITE_SUPPORT_EMAIL' : CFG_SITE_SUPPORT_EMAIL,
 
     'description' : description,
     'keywords' : keywords,
     'metaheaderadd' : metaheaderadd,
     }
 
        # Build the main menu
        main_menu = [('search', _("Search"), CFG_SITE_URL + '/?ln=' + ln, None),
                     ('submit', _("Submit"), CFG_SITE_URL+'/submit?ln=' + ln, None),
                     #('account', _("Personalize"), CFG_SITE_URL+'/youraccount/display?ln='+ln, None),
                     ('help', _("Help"), CFG_SITE_URL+'/help/?ln=' + ln, None)
                     ]
        user_activities_menu = get_user_activities_menu(req, ln)
        main_menu.extend(user_activities_menu)
 
        # Create HTML for the menu
        out += get_navigation_menu_html(req, ln, navmenuid, main_menu, secure_page_p)
 
        out +="""<div class="pageheader">
<table class="navtrailbox">
 <tr>
  <td class="navtrailboxbody">
   %(navtrailbox)s
  </td>
 </tr>
</table>
<!-- end replaced page header -->
%(pageheaderadd)s
</div>
""" % {'navtrailbox' : navtrailbox,
       'pageheaderadd' : pageheaderadd
       }
        return out
 
    def tmpl_pagefooter(self, req=None, ln=CFG_SITE_LANG, lastupdated=None,
                        pagefooteradd=""):
        """Creates a page footer
 
           Parameters:
 
          - 'CFG_SITE_URL' *string* - The base URL for the site
 
          - 'ln' *string* - The language to display
 
          - 'sitename' *string* - the first part of the page HTML title
 
          - 'CFG_SITE_SUPPORT_EMAIL' *string* - email of the support team
 
          - 'CFG_VERSION' *string* - the CFG_VERSION number of CDS Invenio
 
          - 'lastupdated' *string* - when the page was last updated
 
          - 'languagebox' *string* - the HTML code for the language box
 
          - 'pagefooteradd' *string* - additional page footer HTML code
 
           Output:
 
          - HTML code of the page headers
        """
 
        # load the right message language
        _ = gettext_set_language(ln)
 
        if lastupdated:
            if lastupdated.startswith("$Date: "):
                lastupdated = convert_datestruct_to_dategui(\
                                 convert_datecvs_to_datestruct(lastupdated),
                                 ln=ln)
            msg_lastupdated = _("Last updated") + ": " + lastupdated
        else:
            msg_lastupdated = ""
 
        out = '''
</div> <!-- /wrapper-miguel -->
<div class="cdl_pagefooter">
%(pagefooteradd)s
<!-- replaced page footer -->
 <div class="pagefooterstripeleft">
  %(sitename)s&nbsp;::&nbsp;<a class="footer" href="%(CFG_SITE_URL)s/?ln=%(ln)s">%(msg_search)s</a>&nbsp;::&nbsp;<a class="footer" href="%(CFG_SITE_URL)s/submit?ln=%(ln)s">%(msg_submit)s</a>&nbsp;::&nbsp;<a class="footer" href="%(CFG_SITE_SECURE_URL)s/youraccount/display?ln=%(ln)s">%(msg_personalize)s</a>&nbsp;::&nbsp;<a class="footer" href="%(CFG_SITE_URL)s/help/index.%(ln)s.html">%(msg_help)s</a>
  <br />
  %(msg_poweredby)s <a class="footer" href="http://invenio-software.org/">CDS Invenio</a><!-- v%(CFG_VERSION)s -->
  <!--<br/>
  %(msg_maintainedby)s <a class="footer" href="mailto:%(CFG_SITE_SUPPORT_EMAIL)s">%(CFG_SITE_SUPPORT_EMAIL)s</a>-->
  <br/>
  %(msg_lastupdated)s
 </div>
 <div class="pagefooterstriperight">
  %(languagebox)s
 </div>
 <div class="pagefooterstriperight">
        <a href="http://www.facebook.com/Biblioteca.Universidad.de.Zaragoza">
            <img src="https://zaguan.unizar.es/img/ico_facebook.png" alt="facebook biblioteca universidad de Zaragoza" style="height:22px" />
        </a>
        <a href="http://twitter.com/bibliouz">
            <img src="https://zaguan.unizar.es/img/ico_twitter.png" alt="facebook biblioteca universidad de Zaragoza" style="height:22px" />
        </a> &nbsp; &nbsp;
	<a href="http://www.openarchives.org" title="Open Archives homesite">
<!--                <img class="iconoOAI"  src="http://www.openarchives.org/images/OA100.gif"-->
		    <img class="iconoOAI" src="https://zaguan.unizar.es/img/OA100.gif"
                     alt="OAI icon."/>
        </a>
	<a href="http://www.w3.org/WAI/WCAG1AA-Conformance" title="Explicaci&oacute;n del Nivel Doble-A de Conformidad">
<!--                <img class="iconow3c"  src="http://www.w3.org/WAI/wcag1AA.gif"-->
		    <img class="iconow3c" src="https://zaguan.unizar.es/img/wcag1AA.gif"
                     alt="Icono de conformidad con el Nivel Doble-A, de las Directrices de Accesibilidad
                                             para el Contenido Web 1.0 del W3C-WAI. Abre nueva ventana."/>
        </a>
        <a href="http://validator.w3.org/check?uri=referer">
<!--                <img src="http://www.w3.org/Icons/valid-xhtml10.gif"-->
		    <img src="https://zaguan.unizar.es/img/valid-xhtml10.gif"
                    alt="Valid XHTML 1.0 Transitional" class="iconow3c"  />
        </a>
</div>
<!-- replaced page footer -->
</div>
</body>
</html>
        ''' % {
          'CFG_SITE_URL' : CFG_SITE_URL,
          'CFG_SITE_SECURE_URL' : CFG_SITE_SECURE_URL,
          'ln' : ln,
 
          'sitename' : CFG_SITE_NAME_INTL.get(ln, CFG_SITE_NAME),
          'CFG_SITE_SUPPORT_EMAIL' : CFG_SITE_SUPPORT_EMAIL,
 
          'msg_search' : _("Search"),
          'msg_submit' : _("Submit"),
          'msg_personalize' : _("Personalize"),
          'msg_help' : _("Help"),
 
          'msg_poweredby' : _("Powered by"),
          'msg_maintainedby' : _("Maintained by"),
 
          'msg_lastupdated' : msg_lastupdated,
          'languagebox' : self.tmpl_language_selection_box(req, ln),
          'CFG_VERSION' : CFG_VERSION,
 
          'pagefooteradd' : pagefooteradd,
        }
        return out
 
 
# Utility functions
##
 
def get_user_activities_menu(req, ln):
    """Returns the main navigation menu with actions based on user's
    priviledges
 
      - 'ln' *string*  - The selected language
 
      - 'req' *object* - the request object
 
    """
    # load the right message language
    _ = gettext_set_language(ln)
    menus = []
    if req is not None:
        user_info = collect_user_info(req)
    else:
        user_info = {}
        user_info['guest'] = 1
        user_info['nickname'] = ''
        user_info['email'] = ''
 
    if req:
        if req.subprocess_env.has_key('HTTPS') \
           and req.subprocess_env['HTTPS'] == 'on':
            url_referer = CFG_SITE_SECURE_URL + req.unparsed_uri
        else:
            url_referer = CFG_SITE_URL + req.unparsed_uri
        if '/youraccount/logout' in url_referer:
            url_referer = ''
    else:
        url_referer = CFG_SITE_URL
 
    lang_link = '?ln=' + ln
 
    #user_icon = """<img src="%s/img/user.gif" border="0" alt="" />""" % CFG_SITE_URL
    if user_info['guest'] == '1' :#.get('guest', True):
        your_cds_submenu = [('yourbaskets', _("Your Baskets"), CFG_SITE_SECURE_URL+'/yourbaskets/display%s' % lang_link, None),
                            ('youralerts', _("Your Alerts"), CFG_SITE_SECURE_URL+'/youralerts/list%s' % lang_link, None),
                            #('youraccount', user_icon+ ' '+_("guest"), CFG_SITE_SECURE_URL+'/youraccount/display?ln='+ln, None),
                            #('login',  _("login"), CFG_SITE_SECURE_URL+'/youraccount/login?ln='+ln, None)
                            ('yoursearches', _("Your Searches"), CFG_SITE_SECURE_URL+'/youralerts/display%s' % lang_link, None)
                            ]
        menus = [('yourcds', _("Your options"), CFG_SITE_SECURE_URL+'/youraccount/display%s' % lang_link, None, your_cds_submenu),
                 #('yourbaskets', _("baskets"), CFG_SITE_SECURE_URL+'/yourbaskets/display?ln='+ln, None),
                 #('youralerts', _("alerts"), CFG_SITE_SECURE_URL+'/youralerts/list?ln='+ln, None),
                 #('youraccount', user_icon+ ' '+_("guest"), CFG_SITE_SECURE_URL+'/youraccount/display?ln='+ln, None),
                 ('login',  _("login"), CFG_SITE_SECURE_URL+'/youraccount/login%(sep)s%(ln)s%(referer)s' % \
                  {'sep': (ln or url_referer) and '?' or '',
                   'ln': 'ln=' + ln,
                   'referer' : url_referer and \
                   ('&amp;referer=%s' % urllib.quote(url_referer))}, None)
                 ]
    else:
        username_or_email = user_info['nickname']
        if username_or_email is None or username_or_email == '':
            username_or_email = user_info['email']
        your_cds_submenu = [('yourbaskets', _("Your Baskets"), CFG_SITE_SECURE_URL+'/yourbaskets/display%s' % lang_link, None),
                            ('youralerts', _("Your Alerts"), CFG_SITE_SECURE_URL+'/youralerts/list%s' % lang_link, None),
                            ('yourmessages', _("Your Messages"), CFG_SITE_SECURE_URL+'/yourmessages/display%s' % lang_link, None),
                            ('yourgroups', _("Your Groups"), CFG_SITE_SECURE_URL+'/yourgroups/display%s' % lang_link, None),
                            ('yoursearches', _("Your Searches"), CFG_SITE_SECURE_URL+'/youralerts/display%s' % lang_link, None)
                            ]
 
        if req is not None and isUserSubmitter(user_info):
            your_cds_submenu.append(('yoursubmissions', _("Your Submissions"), CFG_SITE_SECURE_URL+'/yoursubmissions.py%s' % lang_link, None))
 
        if req is not None and isUserReferee(user_info):
            your_cds_submenu.append(('yourapprovals', _("Your Approvals"), CFG_SITE_SECURE_URL+'/yourapprovals.py%s' % lang_link, None))
        your_cds_submenu.append(('youraccount', _("Your Account"), CFG_SITE_SECURE_URL+'/youraccount/display%s' % lang_link, None))
 
        menus = [('yourcds', _("Your options"), CFG_SITE_SECURE_URL+'/youraccount/display%s' % lang_link, None, your_cds_submenu)
                 #('yourbaskets', _("baskets"), CFG_SITE_SECURE_URL+'/yourbaskets/display?ln='+ln, None),
                 #('youralerts', _("alerts"), CFG_SITE_SECURE_URL+'/youralerts/list?ln='+ln, None),
                 #('yourmessages', _("messages"), CFG_SITE_SECURE_URL+'/yourmessages/display?ln='+ln, None),
                 #('yourgroups', _("groups"), CFG_SITE_SECURE_URL+'/yourgroups/display?ln='+ln, None)
                ]
 
        if req is not None:
            activities = acc_find_possible_activities(user_info, ln)
            if len(activities) > 0:
                admin_submenu = [(name, name, url, None) for (name, url) in activities.iteritems()]
                menus.append(('admin', _("Administracion "),
                              CFG_SITE_SECURE_URL+'/youraccount/youradminactivities%s' % lang_link, None, admin_submenu))
 
        menus.append(('logout', _("logout"), CFG_SITE_SECURE_URL+'/youraccount/logout%s' % lang_link, None))
        menus.append(('youraccount', username_or_email , CFG_SITE_SECURE_URL+'/youraccount/display%s' % lang_link, None))
 
    return menus
 
def get_navigation_menu_html(req, ln=CFG_SITE_LANG,
                             selected_main_menu_id='',
                             main_menu_structure=None,
                             secure_page_p=0):
    """
    Returns the complete navigation menu as HTML.
 
    Parameters:
 
        ln - The language in which the menu is to be returned.
 
        selected_external_links_menu_id - The id (as string) of the selected
                                   tab in the navigation menu.
 
        selected_main_menu_id - The id (as string) of the selected
                                tab in the main navigation menu.
 
        main_menu_structure - The list of items to display in the main
                              navigation menu.
    """
    external_links_menu = [
                           ('unizar', 'UniZar', 'http://www.unizar.es/',
                            'Universidad de Zaragoza',
                            {'en': ('UniZar', 'http://www.unizar.es/', 'University of Zaragoza'),
                             'es': ('UniZar', 'http://www.unizar.es/', None)
                             }),
                           ('library', 'Library', 'http://biblioteca.unizar.es/',
                            'Library of Unizar',
                            {'en': ('Library', 'http://biblioteca.unizar.es/', None),
                             'es': ('Biblioteca', 'http://biblioteca.unizar.es/', "Biblioteca de Unizar")
                             }),
                           ('catalogo', 'Cat&aacute;logo', 'http://roble.unizar.es/',
                            'Catalogo de la BUZ',
                            {'en': ('Cataloge', 'http://roble.unizar.es/search', 'Cataloge of Library'),
                             'es': ('Cat&aacute;logo', 'http://roble.unizar.es/', None)
                             })
                           ]
 
    # Skip to content links
    out = '''
    <ul class="hidden" title="Keyboard tabbing &amp; Accessibility helper links">
        <li><a name="main" id="main" href="#mainContent" accesskey="1">Skip to main content</a></li>
    </ul>'''
 
    # Specify if we are on DEV site
    if CFG_DEVEL_SITE:
        out += '<div style="font-size:small;color:#f00;">You are on the development site. If you are here by mistake, please go to <a href="http://cdsweb.cern.ch/?ln=%s">the production website</a>.</div>' % ln
 
    # Primary navigation menu
    out +=  """
<!--<div id="cdlnav3"/></div>-->
<div id="cdlhead"%(head_class)s>
    <map name="Navigation_Bar" id="cdlnav">
    <h1 id="cdlheadtitle">
	<a href="%(CFG_SITE_URL)s"><!--<img src="/img/logo_buz.png" alt="Logo BUZ" class="iconobuz"/>-->
		<img src="/img/banner_nuevo_white.jpg" alt="Logo Zaguan Universidad de Zaragoza" />&nbsp;	
		<!--(U)Zagu&aacute;n  -->
	</a></h1>
        <div id="cdlnav1" class="cdsweb">
            <h2>Related links</h2>
            <ul>\n""" % {'CFG_SITE_SECURE_URL': secure_page_p and CFG_SITE_SECURE_URL or CFG_SITE_URL,
                         'CFG_SITE_URL':CFG_SITE_URL,
			 'CFG_SITE_NAME':CFG_SITE_NAME,
                         'head_class': CFG_DEVEL_SITE and ' class="dev"' or ''}
    for menu_item in external_links_menu:
        if menu_item[4] is not None and \
               menu_item[4].has_key(ln):
            label = menu_item[4][ln][0]
            if label is None:
                label = menu_item[1]
            link = menu_item[4][ln][1]
            if link is None:
                link = menu_item[2]
            title = menu_item[4][ln][2]
            if title is None:
                title = menu_item[3]
        else:
            label = menu_item[1]
            link  = menu_item[2]
            title = menu_item[3]
 
        li_css_class = [menu_item[0]+'tab']
        li_css_class_string = ''
        if menu_item[0] == 'cdsweb':
            li_css_class.append('on')
            #li_css_class.append(selected_external_links_menu_id)
        #if menu_item[0] == 'home':
        #    li_css_class.append('hometab')
        if menu_item == external_links_menu[-1]:
            # Last element of the list
            li_css_class.append('last')
        if li_css_class:
            li_css_class_string = ' class="%s"' % ' '.join(li_css_class)
        out += """                <li%s>
                     <a href="%s" hreflang="%s" title="%s">%s</a>
                </li>\n""" % (li_css_class_string, link, ln, title, label)
 
    argd = {}
    if req and req.args:
        argd.update(cgi.parse_qs(req.args))
 
    argd['ln'] = 'es'
    if req and req.uri:
        args = urllib.quote(req.uri, '/:?') + make_canonical_urlargd(argd, {})
    else:
        args = ""
    url_esp = create_html_link(args, {},
			       """<img style="border: medium none ;" src="/img/spain-flag.gif" alt="Spanish" height="15" width="22" />""",
			       {'class': "langinfo"})
    argd['ln'] = 'en'
    if req and req.uri:
        args = urllib.quote(req.uri, '/:?') + make_canonical_urlargd(argd, {})
    else:
        args = ""
    url_eng = create_html_link(args, {},
			       """<img style="border: medium none ;" src="/img/england-flag.gif" alt="English" height="15" width="22" />""",
			       {'class': "langinfo"})
    out += """                    <li%s>
                     %s
                     %s
                </li>\n""" % (li_css_class_string, url_esp, url_eng)
 
    out += """            </ul><div class="clear"></div>
    </div>
    <div id="cdlnav2" class="cdsweb"> <!-- &nbsp; fix -->
    <h2><a name="localNavLinks">Main navigation links:</a></h2>
    <ul>\n"""
 
    # Secondary navigation menu
    for sub_menu_item in main_menu_structure:
        if sub_menu_item[0] in []:#['login', 'logout', 'youraccount']:
            continue
 
        if sub_menu_item[3] is not None and \
               sub_menu_item[3].has_key(ln):
            link = sub_menu_item[3][ln][1]
            if link is None:
                link = sub_menu_item[2]
            label = sub_menu_item[3][ln][0]
            if label is None:
                label = sub_menu_item[1]
        else:
            link = sub_menu_item[2]
            label = sub_menu_item[1]
 
        li_css_class = []
        li_css_class_string = ''
 
        # Sub-submenu
        sub_sub_menu = ''
        if len(sub_menu_item) == 5:
            li_css_class.append('hassubmenu')
            sub_sub_menu = '<ul class="subsubmenu" style="width:%sem;">%s</ul>'
            # Get lenght of longest string, tansform it a bit and
            # pass it as inline css for the submenu item width
            sub_sub_menu_width = int(max([len(sub_sub_menu_item[1].decode('utf-8')) \
                                      for sub_sub_menu_item in sub_menu_item[4]]))
            sub_sub_menu_width = 12 + ((sub_sub_menu_width - 15)* 0.5)
            sub_menu_item[4].sort(lambda x, y: cmp(x[1].lower(), y[1].lower())) # sort items
            sub_sub_menu = sub_sub_menu % (sub_sub_menu_width, \
            ''.join(['<li><a href="%s">%s</a></li>' % (sub_sub_menu_item[2], sub_sub_menu_item[1])\
             for sub_sub_menu_item in sub_menu_item[4]]))
 
        if sub_menu_item[0] == selected_main_menu_id or \
               (sub_menu_item[0] == 'yourcds' and \
                selected_main_menu_id.startswith('your') and \
                selected_main_menu_id != 'youraccount'):
            li_css_class.append('on')
        if sub_menu_item[0] == 'login' or \
               sub_menu_item[0] == 'logout' or \
               sub_menu_item[0] == 'youraccount':
            li_css_class.append('right')
            if sub_menu_item[0] in ['youraccount', 'login']:
                li_css_class.append('user')
        if li_css_class:
            li_css_class_string = ' class="%s"' % ' '.join(li_css_class)
 
        out +="""        <li%s>
            <a href="%s" hreflang="%s">%s</a> %s
        </li>
""" % (li_css_class_string, link, ln, label, sub_sub_menu)
 
    out += """</ul><div class="clear"></div>
 </div>
 </map>
</div>
<a name="mainContent"></a>
 
 """
    return out

And the CSS I am currently using:

/* new CSS  by Miguel Martin */
.mandatory-field textarea {
    border: 2px solid #FF0000;
}
.mandatory-field input {
    border: 2px solid #FF0000;
}
.mandatory-field select {
    border: 2px solid #FF0000;
}
.mandatory-field-radio {
    background-color: #FFCCCC;
    border: 2px solid #FF0000;
}
.mbi_element_no_editable {
    background: none repeat scroll 0 0 #CCCCCC;
    color: #000000;
}
.mbi_element_no_editable input {
    background: none repeat scroll 0 0 #CCCCCC;
    color: #999999;
}
.mbi_element_no_editable td {
    background: none repeat scroll 0 0 #CCCCCC;
    color: #000000;
}
.mbi_element_no_editable table {
    background: none repeat scroll 0 0 #CCCCCC;
    color: #000000;
}
#rec_externos {
    display: inline;
    margin: 1px;
    padding: 0;
    width: 0;
}
#rec_externos li {
    float: left;
    list-style-type: none;
    margin: 0.25em;
}
#rec_externos a, #rec_externos a:visited {
    border: 1px solid #0066FF;
    display: block;
    font-family: arial,verdana,sans-serif;
    font-size: 0.8em;
    padding: 0.25em;
    text-align: center;
    text-decoration: none;
}
#rec_externos a:hover {
    background: none repeat scroll 0 0 #DDDDDD;
}
#cdlhead {
    background: none repeat scroll 0 0 #FFFFFF;
    font-size: 0.8em;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 999;
}
#cdlhead a {
    color: #FF9900;
    text-decoration: none;
}
#cdlhead a:visited {
    color: #FF9900;
}
#cdlhead a:visited:hover {
    color: #3366CC;
    text-decoration: underline;
}
#cdlhead.dev a, #cdlhead.dev a.visited, #cdlhead.dev a:visited:hover {
    color: #666666 !important;
}
.user a, .user a:hover, .user a:visited {
    background: url("http://zaguan.unizar.es/img/spriteme1.png") no-repeat scroll -10px -175px transparent;
    padding-left: 18px !important;
}
.on.user a, .on.user a:hover, .on.user a:visited {
    background: url("/img/user-icon-1-16x16.gif") no-repeat scroll left center transparent;
}
#cdlhead h1 {
    background: url("http://zaguan.unizar.es/img/spriteme1.png") no-repeat scroll right -15px #FFFFFF;
    clear: both;
    color: #FFFFFF;
    font: 2em arial,sans-serif;
    height: 50px;
    margin: 0;
    padding: 0;
}
a {
    color: #486187;
    text-decoration: none;
}
a:hover {
    background-color: #486187;
    color: #FFFFFF;
    text-decoration: none;
}
#cdlhead h1 a {
    color: #486187;
    float: left;
    font-weight: bold;
    margin-left: 0;
    text-decoration: none !important;
}
#cdlhead h1 a img {
    border: medium none;
    margin-right: 7px;
    padding: 0;
    vertical-align: middle;
}
#cdlnav1 {
    background: none repeat scroll 0 0 #FFFFFF;
    display: inline;
    float: right;
    padding: 0 0 0 0;
    text-align: right;
}
#cdlnav1 ul {
    list-style: none outside none;
    padding-bottom: 0;
}
#cdlnav1 li {
    border-right: 1px solid #999999;
    display: block;
    float: left;
    margin: 1px;
    padding: 1px 3px;
}
#cdlnav1 li.last {
    border-right: medium none;
}
#cdlnav1 li a {
    font-size: 0.9em;
    margin: 0;
    text-decoration: none;
    white-space: nowrap;
}
#cdlnav1 li a:visited {
    text-decoration: none;
}
#cdlnav1 li.on {
    color: #000000;
}
#cdlnav1 li.on a, #cdlnav1 li.on a:visited {
    color: #666666;
    font-weight: normal;
    text-decoration: none;
}
#cdlnav1 h2, #cdlnav2 h2 {
    display: none;
}
#cdlnav1 ul, #cdlnav2 ul {
    list-style: none outside none;
    margin: 0;
    padding: 0 0 0 4px;
}
#cdlnav3 {
    background-image: url("/img/spriteme1.png");
    background-position: 100px 50%;
    background-repeat: repeat;
    width: 100%;
}
#cdlnav2 {
    background: url("/img/spriteme1.png") repeat-x scroll 100px 500px #FFFFFF;
    border: 1px solid #3366CC;
    clear: both;
    height: auto;
    padding-bottom: 5px;
    position: relative;
}
#cdlnav2 ul {
    background: url("/img/spriteme1.png") repeat-x scroll 100px 500px transparent;
    padding-top: 5px;
    position: relative;
}
* html #cdlnav2 ul {
    width: 99%;
}
#cdlnav2 li.on a, #cdlnav2 li.on a:hover, #cdlnav2 li.on a:visited {
    color: #555555;
    text-decoration: none;
}
#cdlnav2 li {
    background: url("http://zaguan.unizar.es/img/spriteme1.png") no-repeat scroll -10px -110px transparent;
    display: block;
    float: left;
    height: 100%;
    margin-right: 10px;
    padding: 5px 5px 5px 7px;
    text-decoration: none;
}
#cdlnav2 li.hassubmenu {
    position: relative;
}
#cdlnav2 li.hassubmenu a {
    background: url("http://zaguan.unizar.es/img/spriteme1.png") no-repeat scroll 81px -142px transparent;
    padding-right: 17px;
}
#cdlnav2 li.on {
    background: url("http://zaguan.unizar.es/img/spriteme1.png") no-repeat scroll -10px -80px #EEEEEE;
    height: 100%;
}
#cdlnav2 li a img {
    vertical-align: middle;
}
#cdlnav2 li img {
    border: medium none;
}
#cdlnav2 li.right {
    background-image: none;
    float: right;
    margin-left: 0;
    margin-right: 2px;
    padding-left: 0;
    padding-right: 0;
}
#cdlnav2 li a {
    margin: 0;
    padding: 3px 6px;
    text-decoration: none;
    white-space: nowrap;
}
#cdlnav2 li ul.subsubmenu {
    background-image: none;
    display: none;
    left: 0;
    position: absolute;
    top: 1em;
}
#cdlnav2 li ul.subsubmenu li {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 1px solid #3366CC;
    border-left: 1px solid #3366CC;
    border-right: 1px solid #3366CC;
    display: list-item !important;
    float: none !important;
    position: relative;
}
#cdlnav2 li ul.subsubmenu li a, #cdlnav2 li ul.subsubmenu li a:hover, #cdlnav2 li ul.subsubmenu li a:visited {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
    display: block;
}
#cdlnav2 li ul.subsubmenu li a:hover {
    text-decoration: underline;
}
#cdlnav2 li:hover ul {
    display: block;
    position: absolute;
}
html, body {
    font-size: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#cdlfooter {
    background: none repeat scroll 0 0 #486187;
    border-top: 1px solid #666666;
    clear: both;
    color: #FFFFFF;
    font-size: x-small;
    margin-top: 50px;
    padding: 0;
    width: 100%;
}
.cdl_pagefooter {
    background-color: #486187;
    padding-top:5px;
    bottom: 0;
    clear: both;
    color: #FFFFFF;
    font-size: x-small;
    height: 55px;
    position: relative;
    width: 100%;
}
.pagefooterstripeleft {
    color: #FFFFFF;
    float: left;
    font-size: x-small;
    margin-left: 15px;
    text-align: left;
    width: 60%;
}
.pagefooterstriperight {
    font-size: x-small;
    margin-right: 10px;
    text-align: right;
}
.footer:link {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.footer:link {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.footer:visited {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.footer:active {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.footer:hover {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.langinfo:link {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.langinfo:visited {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.langinfo:active {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.langinfo:hover {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
.clear {
    clear: both;
    line-height: 1px;
}
.hidden {
    display: none;
}
html > body div.spacer {
    height: 0.01em;
}
body {
    font-family: arial,sans-serif;
}
div.detailed div.content {
    background: url("detailed_background.gif") repeat-y scroll right top #FFFFFF;
    border: 1px solid #999999;
}
.top-left-folded {
    height: 0;
}
.formatRecordTable {
    border-collapse: collapse;
    margin: 0;
    vertical-align: top;
    width: 100%;
}
.formatRecordHeader {
    background-color: #3366CC;
    background-repeat: no-repeat;
    color: white;
    font-size: 18px;
    font-weight: normal;
    height: 34px;
    letter-spacing: 6px;
    padding-left: 140px;
}
.formatRecordLabel {
    background: none repeat scroll 0 0 #F1F1F1;
    border-bottom: 1px solid #999999;
    border-spacing: 0;
    color: #000000;
    font-size: small;
    font-weight: normal;
    padding: 2px 10px 2px 5px;
    text-align: left;
    vertical-align: top;
}
.formatRecordTableFullWidth {
    border-collapse: collapse;
    border-top: 1px solid #3366CC;
    vertical-align: top;
    width: 100%;
}
ul.formatRecordIndent {
    margin-bottom: 5px;
    margin-left: 16px;
}
.redlink a:link {
    background: none repeat scroll 0 0 transparent;
    color: #660033;
}
.redlink a:visited {
    background: none repeat scroll 0 0 transparent;
    color: #660033;
}
.redlink a:active {
    background: none repeat scroll 0 0 transparent;
    color: #660033;
}
.redlink a:hover {
    background: none repeat scroll 0 0 transparent;
    color: #C11B17;
}
.iconow3c {
    border: 0 none;
    height: 22px;
    width: 60px;
}
.iconoOAI {
    border: 0 none;
    height: 22px;
    width: 41px;
}
.iconobuz {
    border: 0 none;
    height: 15%;
    width: 15%;
}
.iconocul {
    border: 0 none;
}
.w3clogodiv {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    float: right;
    font-size: x-small;
    width: 150px;
}
.logoFH {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0 none;
    color: #000000;
    float: right;
    font-size: x-small;
    width: 147px;
}
.FHtitle {
    width: 79%;
}
.clear2 {
    clear: both;
}
.w3clogodivcolor {
    background-color: #FFFFFF;
    color: #FF9900;
    float: right;
    font-size: x-small;
    width: 150px;
}
.pagebodystripeleft {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    font-size: x-small;
    left: 520px;
    line-height: 15px;
    margin-left: 20px;
    padding-left: 0;
    position: absolute;
    top: 155px;
    width: 630px;
}
body {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    height: 100%;
    margin: 0;
    padding: 0;
}
h1 {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
    font-size: 173%;
    font-weight: 700;
    margin-left: 0;
    margin-top: 5px;
}
.h1 {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
    font-size: 173%;
    font-weight: 700;
    margin-left: 0;
}
h2 {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
    font-size: 144%;
    font-weight: 700;
    margin-left: 0;
}
h3 {
    background: none repeat scroll 0 0 transparent;
    border-bottom: 2px dotted #3366CC;
    color: #3366CC;
    font-size: 120%;
    font-variant: small-caps;
    font-weight: 600;
    margin-bottom: 10px;
    margin-left: 0;
    margin-top: 40px;
    width: 50%;
}
h4 {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
    font-size: 110%;
    font-style: italic;
    font-weight: 600;
    margin-left: 0;
}
h5 {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
    font-size: 110%;
    font-weight: 400;
    margin-left: 0;
}
h6 {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
    font-size: 110%;
    font-style: italic;
    font-weight: 200;
    margin-left: 0;
}
a:link {
    background: none repeat scroll 0 0 transparent;
    color: #243754;
}
a:visited {
    background: none repeat scroll 0 0 transparent;
    color: #000066;
}
a:active {
    background: none repeat scroll 0 0 transparent;
    color: #0000CC;
}
a:hover {
    background: none repeat scroll 0 0 transparent;
    color: #0000CC;
}
a.moreinfo:link {
    background: none repeat scroll 0 0 transparent;
    color: #006600;
}
a.moreinfo:visited {
    background: none repeat scroll 0 0 transparent;
    color: #006600;
}
a.moreinfo:active {
    background: none repeat scroll 0 0 transparent;
    color: #006600;
}
a.moreinfo:hover {
    background: none repeat scroll 0 0 transparent;
    color: #006600;
}
a.examplequery:link {
    background: none repeat scroll 0 0 transparent;
    color: #0000CC;
}
a.examplequery:visited {
    background: none repeat scroll 0 0 transparent;
    color: #000066;
}
a.examplequery:active {
    background: none repeat scroll 0 0 transparent;
    color: #0000CC;
}
a.examplequery:hover {
    background: none repeat scroll 0 0 transparent;
    color: #0000CC;
}
a.img:hover {
    background: none repeat scroll 0 0 transparent;
    color: #0000CC;
}
a.img:active {
    background: none repeat scroll 0 0 transparent;
    color: #0000CC;
    font-weight: normal;
}
a.note:link {
    background: none repeat scroll 0 0 transparent;
    color: #666666;
}
a.note:visited {
    background: none repeat scroll 0 0 transparent;
    color: #666666;
}
a.note:active {
    background: none repeat scroll 0 0 transparent;
    color: #666666;
}
a.note:hover {
    background: none repeat scroll 0 0 transparent;
    color: #666666;
}
a.nodecoration:link {
    color: #000000;
    text-decoration: none;
}
a.nodecoration:visited {
    color: #000000;
    text-decoration: none;
}
a.nodecoration:active {
    color: #000000;
    text-decoration: none;
}
a.nodecoration:hover {
    color: #000000;
    text-decoration: underline;
}
th.searchboxheader a:link {
    color: #000000;
    text-decoration: none;
}
th.searchboxheader a:visited {
    color: #000000;
    text-decoration: none;
}
th.searchboxheader a:active {
    color: #000000;
    text-decoration: none;
}
th.searchboxheader a:hover {
    color: #000000;
}
.headerbox {
    background: none repeat scroll 0 0 transparent;
    border-collapse: collapse;
    color: #000000;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
    width: 100%;
}
.headerboxbody {
    color: #000000;
    margin: 0;
    padding: 0;
}
.headerboxbodylogo {
    color: #3366CC;
    font-size: 20px;
    font-variant: small-caps;
    font-weight: bold;
    letter-spacing: 6px;
    padding-bottom: 2px;
    padding-left: 5px;
    width: 200px;
}
.headermodulebox {
    background: none repeat scroll 0 0 transparent;
    border-collapse: collapse;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
}
.headermoduleboxbody {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #7799DD #7799DD #3366CC;
    border-left: 2px solid #7799DD;
    border-right: 2px solid #7799DD;
    border-style: solid;
    border-width: 2px;
    color: #000000;
    font-size: x-small;
    font-weight: bold;
    margin: 0;
    padding: 2px 10px;
    text-align: center;
    width: 75px;
}
.headermoduleboxbodyblank {
    border-bottom: 2px solid #3366CC;
    margin: 0;
    padding: 2px 5px;
    width: 12px;
}
.headermoduleboxbodyblanklast {
    border-bottom: 2px solid #3366CC;
    margin: 0;
    padding: 0;
    width: 100%;
}
.headermoduleboxbodyselected {
    background: none repeat scroll 0 0 #FFFFFF;
    border-left: 2px solid #3366CC;
    border-right: 2px solid #3366CC;
    border-top: 2px solid #3366CC;
    color: #3366CC;
    font-size: x-small;
    font-weight: bold;
    margin: 5px;
    padding: 2px 10px;
    text-align: center;
    width: 75px;
}
a.header:link {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #7799DD;
    text-decoration: none;
    white-space: nowrap;
}
a.header:visited {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #7799DD;
    text-decoration: none;
    white-space: nowrap;
}
a.header:active {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #7799DD;
    text-decoration: none;
    white-space: nowrap;
}
a.header:hover {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #3366CC;
    text-decoration: underline;
    white-space: nowrap;
}
a.headerselected:link {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #3366CC;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}
a.headerselected:visited {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #3366CC;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}
a.headerselected:active {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #3366CC;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}
a.headerselected:hover {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #3366CC;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}
.navtrailbox {
    background: none repeat scroll 0 0 #FFFFFF;
    border-collapse: collapse;
    border-spacing: 0;
    color: #3366CC;
    font-size: x-small;
    margin-top: 7px;
    padding: 0;
}
.navtrailboxbody {
    background: none repeat scroll 0 0 #FFFFFF;
    border-spacing: 0;
    color: #3366CC;
    font-size: x-small;
    padding: 0 0 0 10px;
}
a.navtrail:link {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
}
a.navtrail:visited {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
}
a.navtrail:active {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
}
a.navtrail:hover {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
}
.info {
    background: none repeat scroll 0 0 transparent;
    color: #006600;
}
.snapshot {
    background: none repeat scroll 0 0 transparent;
    border: 2px solid #999999;
    color: #000000;
    margin: 10px 10px 0 40px;
}
.pageheader {
    background: none repeat scroll 0 0 transparent;
    color: #999999;
    font-size: x-small;
    margin: 0;
    padding: 0;
    width: 100%;
}
.pagebody {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    margin: 0;
    padding-bottom: 20px;
    padding-top: 20px;
}
.pagebodystripemiddle {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    margin: 0 0 40px 10px;
    padding: 0;
}
.pagebodystriperight {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    float: right;
    font-size: x-small;
    padding-right: 10px;
    width: 140px;
}
.pageboxlefttop {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    font-size: x-small;
}
.pageboxlefttopadd {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    font-size: x-small;
}
.pageboxleftbottom {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    font-size: x-small;
}
.pageboxleftbottomadd {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    font-size: x-small;
}
.pageboxrighttop {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    font-size: x-small;
}
.pageboxrighttopadd {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    font-size: x-small;
}
.pageboxrightbottom {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    font-size: x-small;
}
.pageboxrightbottomadd {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    font-size: x-small;
}
.pagefooter {
    background: none repeat scroll 0 0 #FFFFFF;
    border-top: 1px solid #666666;
    clear: both;
    color: #666666;
    font-size: x-small;
    margin-top: 50px;
    padding: 0;
    width: 100%;
}
.errorbox {
    background: none repeat scroll 0 0 #FFCCCC;
    border: 2px solid #990000;
    border-collapse: collapse;
    color: #000000;
    margin: 5px 30px;
    padding: 1px;
}
.errorboxheader {
    background: none repeat scroll 0 0 #FFCCCC;
    border-spacing: 0;
    color: #000000;
    font-weight: bold;
    padding: 3px;
    text-align: left;
}
.errorboxbody {
    background: none repeat scroll 0 0 #FFCCCC;
    color: #000000;
    padding: 3px;
}
.searchbox {
    background: none repeat scroll 0 0 #FFFFFF;
    border-collapse: collapse;
    border-top: 1px solid #3366CC;
    color: #000000;
    margin: 5px 0;
    padding: 1px;
}
.searchboxheader {
    background: none repeat scroll 0 0 #486187;
    border-spacing: 0;
    color: #FFFFFF;
    font-size: small;
    padding: 3px;
    text-align: left;
}
.searchboxbody {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    font-size: 0.9em;
    padding: 3px 0 0;
}
.narrowsearchbox {
    background: none repeat scroll 0 0 #FFFFFF;
    border-collapse: collapse;
    border-top: 1px solid #3366CC;
    color: #000000;
    margin: 20px 20px 5px 0;
    padding: 1px;
    width: 99%;
}
.narrowsearchboxheader {
    background: none repeat scroll 0 0 #F1F1F1;
    border-spacing: 0;
    color: #000000;
    font-size: small;
    padding: 3px;
    text-align: left;
}
.narrowsearchboxbody {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    padding: 3px;
}
.focusonsearchbox {
    background: none repeat scroll 0 0 #FFFFFF;
    border-collapse: collapse;
    border-top: 1px solid #3366CC;
    color: #000000;
    margin: 20px 20px 5px 0;
    padding: 1px;
}
.focusonsearchboxheader {
    background: none repeat scroll 0 0 #F1F1F1;
    border-spacing: 0;
    color: #000000;
    font-size: small;
    padding: 3px;
    text-align: left;
}
.focusonsearchboxbody {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    padding: 3px;
}
.searchalsosearchbox {
    background: none repeat scroll 0 0 #FFFBF5;
    border-collapse: collapse;
    border-top: 1px solid #3366CC;
    color: #000000;
    margin: 20px 20px 5px 0;
    padding: 1px;
}
.searchalsosearchboxheader {
    background: none repeat scroll 0 0 #FFEACC;
    border-spacing: 0;
    color: #000000;
    font-size: small;
    padding: 3px;
    text-align: left;
}
.searchalsosearchboxbody {
    background: none repeat scroll 0 0 #FFFBF5;
    color: #444444;
    padding: 3px;
}
.latestadditionsbox {
    background: none repeat scroll 0 0 #FFFFFF;
    border-spacing: 5px;
    color: #000000;
    margin: 5px 20px 5px 0;
    padding: 5px;
}
.latestadditionsboxtimebody {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    font-size: xx-small;
    padding: 3px;
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
}
.latestadditionsboxrecordbody {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    font-size: small;
    padding: 3px;
    text-align: left;
    vertical-align: top;
}
.portalbox {
    background: none repeat scroll 0 0 #FFFFFF;
    border-collapse: collapse;
    border-top: 1px solid #AABBBB;
    color: #000000;
    font-size: x-small;
    margin: 0 0 15px;
    width: 100%;
}
.portalboxheader {
    background: none repeat scroll 0 0 #F1F1F1;
    border-bottom: 1px solid #999999;
    border-spacing: 0;
    color: #000000;
    font-size: x-small;
    padding: 2px;
    text-align: left;
}
.portalboxbody {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    font-size: x-small;
    padding: 2px;
}
.admin_wvar, .admin_w200, .admin_wvar_nomargin {
    background: none repeat scroll 0 0 white;
    border-spacing: 0;
    border-top: 1px solid #3366CC;
    color: #000000;
    margin: 0 0 5px 20px;
    padding: 1px;
}
.admin_w200 {
    width: 250px;
}
.admin_wvar_nomargin {
    margin: 0;
}
.adminlabel {
    background: none repeat scroll 0 0 #F1F1F1;
    font-size: small;
    vertical-align: top;
    width: 100px;
}
.adminheader, .adminheaderleft, .adminheadercenter, .adminheaderright {
    background: none repeat scroll 0 0 #F1F1F1;
    border-spacing: 0;
    color: #000000;
    font-size: small;
    padding: 3px 5px;
    text-align: center;
}
.adminheaderleft {
    text-align: left;
}
.adminheaderright {
    text-align: right;
}
.adminbutton {
    background: none repeat scroll 0 0 #3366CC;
    border-collapse: collapse;
    border-top: 1px solid #3366CC;
    color: #FFFFFF;
    font-weight: bold;
    margin: 5px 10px;
}
.admintd, .admintdleft, .admintdright {
    font-size: small;
    padding: 0 10px;
    text-align: center;
    vertical-align: top;
}
.admintdleft {
    text-align: left;
}
.admintdright {
    text-align: right;
}
a.google:link {
    background: none repeat scroll 0 0 transparent;
    color: #333333;
}
a.google:visited {
    background: none repeat scroll 0 0 transparent;
    color: #333333;
}
a.google:active {
    background: none repeat scroll 0 0 transparent;
    color: #333333;
}
a.google:hover {
    background: none repeat scroll 0 0 transparent;
    color: #333333;
}
.googlebox {
    background: none repeat scroll 0 0 #FFFFFF;
    border-collapse: collapse;
    border-top: 1px solid #FFCC00;
    color: #333333;
    font-size: small;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    padding: 10px;
    text-align: left;
}
.googleboxheader {
    background: none repeat scroll 0 0 #FFFFCC;
    color: #333333;
    font-size: small;
    font-weight: normal;
    vertical-align: top;
}
.googleboxbody {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #333333;
    font-size: small;
    padding: 0 5px;
    text-align: left;
    vertical-align: top;
}
.adminbox {
    background: none repeat scroll 0 0 #F1F1F1;
    color: #000000;
    margin: 0;
    padding: 0;
    width: 120px;
}
.adminboxheader {
    background: none repeat scroll 0 0 #F1F1F1;
    color: #000000;
    font-size: x-small;
    text-align: left;
}
.adminboxbody {
    background: none repeat scroll 0 0 #F1F1F1;
    color: #000000;
    font-size: x-small;
}
.formbutton {
    background: none repeat scroll 0 0 #486187;
    color: #FFFFFF;
    font-weight: normal;
}
.headline {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
}
.quicknote {
    background: none repeat scroll 0 0 transparent;
    color: #660033;
}
.important {
    background: none repeat scroll 0 0 transparent;
    color: #FF0000;
}
.popupselected {
    background: none repeat scroll 0 0 #000066;
    color: #FFFFFF;
}
.searchresultsbox {
    background: none repeat scroll 0 0 #FFFFEE;
    border-collapse: collapse;
    border-top: 1px solid #FFCC00;
    color: #000000;
    margin-top: 15px;
    padding: 0;
    width: 100%;
}
.searchresultsboxheader {
    background: none repeat scroll 0 0 #FFFFCC;
    border-spacing: 0;
    color: #000000;
    font-weight: normal;
    padding: 2px;
    text-align: left;
}
.searchresultsboxbody {
    background: none repeat scroll 0 0 #FFFFEE;
    border-bottom: 1px dotted #FFCC00;
    border-top: 1px dotted #FFCC00;
    color: #000000;
    padding: 2px;
}
.searchresultsboxrecords {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    margin-left: 0;
    margin-right: 20px;
}
.nearesttermsbox {
    background: none repeat scroll 0 0 #FFFFEE;
    border-collapse: collapse;
    color: #660033;
    padding: 0;
}
.nearesttermsboxheader {
    background: none repeat scroll 0 0 #FFFFCC;
    border-spacing: 0;
    color: #660033;
    font-weight: normal;
    padding: 0;
    text-align: left;
}
.nearesttermsboxbody {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #660033;
    padding: 0;
}
a.nearestterms:link {
    background: none repeat scroll 0 0 transparent;
    color: #660033;
}
a.nearestterms:visited {
    background: none repeat scroll 0 0 transparent;
    color: #660033;
}
a.nearestterms:active {
    background: none repeat scroll 0 0 transparent;
    color: #660033;
}
a.nearestterms:hover {
    background: none repeat scroll 0 0 transparent;
    color: #660033;
}
.nearesttermsboxbodyselected {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #999999;
    padding: 0;
}
a.nearesttermsselected:link {
    background: none repeat scroll 0 0 transparent;
    color: #999999;
}
a.nearesttermsselected:visited {
    background: none repeat scroll 0 0 transparent;
    color: #999999;
}
a.nearesttermsselected:active {
    background: none repeat scroll 0 0 transparent;
    color: #999999;
}
a.nearesttermsselected:hover {
    background: none repeat scroll 0 0 transparent;
    color: #999999;
}
.moreinfo {
    background: none repeat scroll 0 0 transparent;
    color: #006600;
    font-size: small;
}
.examplequery {
    background: none repeat scroll 0 0 transparent;
    color: #006600;
    font-size: x-small;
}
.rankscoreinfo {
    background: none repeat scroll 0 0 transparent;
    color: #666666;
    font-size: x-small;
}
.userinfobox {
    color: #003399;
    font-size: x-small;
    margin-bottom: 15px;
    width: 150px;
}
.userinfoboxheader {
    border-bottom: 1px solid #006600;
    border-top: 1px solid #006600;
    color: #003399;
    font-size: x-small;
    font-weight: bold;
}
.userinfoboxbody {
    color: #003399;
    font-size: x-small;
    font-weight: normal;
    padding: 5px 5px 2px 0;
}
a.userinfo:link {
    background: none repeat scroll 0 0 transparent;
    color: #003399;
}
a.userinfo:visited {
    background: none repeat scroll 0 0 transparent;
    color: #003399;
}
a.userinfo:active {
    background: none repeat scroll 0 0 transparent;
    color: #003399;
}
a.userinfo:hover {
    background: none repeat scroll 0 0 transparent;
    color: #003399;
}
a.langinfo:link {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.langinfo:visited {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.langinfo:active {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.langinfo:hover {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
.faq {
    margin-left: 12%;
    margin-right: 3%;
}
.faqq {
    margin-left: 18%;
    margin-right: 3%;
}
.exampleleader {
    background: none repeat scroll 0 0 transparent;
    color: #006600;
}
.example {
    background: none repeat scroll 0 0 transparent;
    color: #003399;
}
.blocknote {
    background: none repeat scroll 0 0 #CCCCCC;
    color: #000000;
}
.blocknotebis {
    background: none repeat scroll 0 0 #999999;
    color: #000000;
}
.devel {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #660000;
    border-left: medium solid #660000;
    color: #660000;
    font-size: 90%;
}
.normal {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
}
.address {
    font-size: x-small;
    font-style: normal;
}
.note {
    background: none repeat scroll 0 0 transparent;
    color: #666666;
}
.warning {
    background: none repeat scroll 0 0 transparent;
    color: #660033;
}
.light {
    background: none repeat scroll 0 0 transparent;
    color: #CCCCCC;
}
.nbdoccoll {
    background: none repeat scroll 0 0 transparent;
    color: #666666;
}
hr {
    background-color: #999999;
    border-width: 0;
    color: #999999;
    height: 1px;
    width: 100%;
}
input, select {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
}
.wsactionbutton {
    background-color: #FFFFFF;
    border: 2px solid #003399;
    color: #003399;
    font-size: small;
    height: 25px;
    margin: 0;
    padding: 5px 5px 0;
    vertical-align: middle;
    width: 150px;
}
.wsactionbuttonh {
    background-color: #99CCFF;
    border: 2px solid #003399;
    color: #003399;
    font-size: small;
    height: 25px;
    margin: 0;
    padding: 5px 5px 0;
    vertical-align: middle;
    width: 150px;
}
.textbutton {
    color: #003399;
    font-weight: bold;
    text-decoration: none;
}
.submitBody {
    background: none repeat scroll 0 0 #99CCFF;
    color: #000000;
}
.submitHeader {
    background: none repeat scroll 0 0 #000066;
    color: #FFFFFF;
}
.submitCurrentPage {
    background: none repeat scroll 0 0 #99CCFF;
    border-left: 1px solid #003399;
    border-right: 1px solid #003399;
    border-top: 1px solid #003399;
    color: #000000;
}
.submitEmptyPage {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 1px solid #003399;
    color: #FFFFFF;
}
.submitPage {
    background: none repeat scroll 0 0 #FFFFFF;
    border-left: 1px solid #003399;
    border-right: 1px solid #003399;
    border-top: 1px solid #003399;
    color: #000000;
}
.mycdscell {
    border-right: 1px solid #FFFFFF;
}
.guideimg {
    border: 2px dotted #777777;
    margin: 5px;
    padding: 5px;
}
.guideheader {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
    font-size: 120%;
    font-variant: small-caps;
    font-weight: 600;
    margin-left: 10px;
}
.recordlastmodifiedbox {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #660033;
    font-size: small;
    text-align: left;
}
.commentbox {
    border-left: 2px solid #3366CC;
    color: #000000;
    padding: 0 10px 10px;
    width: 100%;
}
.warninggreen {
    background: none repeat scroll 0 0 transparent;
    color: #006600;
}
.warningred {
    background: none repeat scroll 0 0 transparent;
    color: #FF0000;
}
.reportabuse {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    font-size: small;
    vertical-align: bottom;
}
.mailbox {
    border-collapse: collapse;
    color: #000000;
    margin-top: 15px;
    padding: 0;
    width: auto;
}
.mailboxheader tr {
    background: none repeat scroll 0 0 #FFFFCC;
}
.inboxheader {
    border-bottom: 1px solid #FFCC00;
    border-top: 1px solid #FFCC00;
    padding: 5px 30px;
    text-align: center;
}
.messageheader {
    border: 0 none;
    padding: 0;
    width: 100%;
}
.mailboxinput {
    width: 100%;
}
.mailboxlabel {
    padding-right: 15px;
    white-space: nowrap;
}
.mailboxbody {
    background: none repeat scroll 0 0 #FFFFEE;
}
.mailboxrecord {
}
.mailboxrecord td {
    border-top: 1px dashed #FFFFFF;
    padding: 4px 30px;
}
.mailboxfooter {
    background-color: #FFFFFF;
}
.mailboxfooter td {
    border-color: #FFCC00 -moz-use-text-color -moz-use-text-color;
    border-style: solid none none;
    border-width: 1px medium medium;
    padding: 10px 0 0;
}
.mailboxsearch td {
    padding-bottom: 10px;
    padding-top: 10px;
}
.mailboxresults td {
    border-bottom: 1px solid #FFCC00;
    padding-bottom: 5px;
}
.nonsubmitbutton {
    background: none repeat scroll 0 0 #FFCC00;
    color: #000000;
    font-weight: bold;
}
.confirmoperation {
    background-color: #DDDDFF;
    height: 100px;
    margin: auto;
    width: 400px;
}
.confirmmessage {
    font-weight: bold;
    text-align: center;
}
.infobox {
    background-color: #FFFFCC;
    border: 1px solid #FFCC00;
    border-collapse: collapse;
    padding: 7px;
}
.warningbox {
    background-color: #CCFFFF;
    border: 1px solid #CCFF00;
    border-collapse: collapse;
    padding: 7px;
}
.quotabox {
    background-color: #FFFFCC;
    border: 1px solid #FFCC00;
    height: 15px;
    margin: 3px 0;
    width: 200px;
}
.quotabar {
    background-color: #FFCC00;
    border: 0 none black;
    height: 15px;
}
#bskcontainer {
    background: none repeat scroll 0 0 transparent;
    float: left;
}
#bsktabs {
    background: none repeat scroll 0 0 transparent;
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
}
.bsktab {
    background-color: #FFFFEE;
    background-position: left top;
    background-repeat: no-repeat;
    float: left;
    margin: 0 20px;
    padding: 4px 10px 5px 5px;
    vertical-align: middle;
}
#bsktab_selected {
    background-color: #FFFFCC;
    border-bottom: medium hidden;
    font-weight: bold;
}
.bsktab a {
    color: #000000;
    text-decoration: none;
}
.bsktab a:hover {
    text-decoration: underline;
}
.bsktab img {
    margin: 0 5px 0 0;
}
#bskcontent {
    background: none repeat scroll 0 0 #FFFFEE;
    border: medium none;
    border-collapse: collapse;
    float: left;
    width: 100%;
}
#bsktopics {
    background-color: #FFFFCC;
    padding: 10px;
    width: 100%;
}
.bsktopic {
    font-weight: bold;
    margin: 0 20px;
    white-space: nowrap;
}
.bsktopic a {
    color: #000000;
    font-weight: normal;
    text-decoration: none;
}
.bsktopic a:hover {
    text-decoration: underline;
}
#bskbaskets {
    padding: 10px;
}
#bskinfos {
    background-color: transparent;
}
.bskbasket {
    background-color: white;
    border: 1px solid #FFCC00;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.bskbasketheader {
    background-color: #FFFFCC;
}
.bskbasketheader td {
    border-bottom: 1px solid #FFCC00;
    border-collapse: collapse;
    padding: 5px;
    vertical-align: top;
}
.bskbasketfooter {
    background-color: #FFFFCC;
    border-top: 1px solid #FFCC00;
    padding: 3px;
}
.bskbasketheaderactions {
    text-align: center;
    white-space: nowrap;
}
.bskbasketheaderactions td {
    border: medium none;
}
.bskbasketheaderactions img {
    border: 0 none;
    margin: 2px;
}
.bskbasketheaderactions a {
    color: #000000;
    font-size: small;
}
.bskbasketfooter td {
    padding: 5px 0;
}
.bskactions {
    border-bottom: 1px solid #FFCC00;
    text-align: center;
    white-space: nowrap;
}
.bskactions td {
    border: medium none;
}
.bskactions img {
    border: 0 none;
    margin: 2px;
}
.bskactions a {
    font-size: x-small;
}
.bsktitle {
    width: 100%;
}
.bskcmtcol {
    text-align: right;
    white-space: nowrap;
}
.bskcontentcol {
    border-bottom: 1px solid #FFCC00;
    padding: 5px;
}
.bskcontentcol a {
    font-size: small;
}
.bskcomment {
    border-bottom: 1px solid #FFCC00;
    margin-bottom: 5px;
    padding: 15px 10px;
}
.bsklabel {
    font-size: small;
    font-weight: bold;
    padding-right: 15px;
    white-space: nowrap;
}
.bsk_create_link {
    background-color: transparent;
    padding-bottom: 10px;
    padding-top: 5px;
}
.bsk_create_link a {
    color: black;
}
.bsk_create_link img {
    border: medium none;
}
dd {
    margin-bottom: 10px;
}
form.hyperlinkform {
    display: inline;
    height: 0;
    margin: 0;
    padding: 0;
    width: 0;
}
input.hyperlinkformHiddenInput {
    display: inline;
    height: 0;
    margin: 0;
    padding: 0;
    width: 0;
}
input.hyperlinkformSubmitButton {
    background-color: transparent;
    border: 0 none;
    color: blue;
    cursor: pointer;
    display: inline;
    font-size: 1em;
    line-height: 1em;
    margin: 0;
    padding: 0;
    text-decoration: underline;
}
.bibEditTable {
    background: none repeat scroll 0 0 #ECECEC;
    border: 0 none;
    border-collapse: collapse;
    padding: 0;
}
.bibEditTable th {
    background: none repeat scroll 0 0 #CCCCCC;
    padding: 5px;
    text-align: left;
}
.bibEditCellRight {
    font-size: small;
    padding: 0;
    text-align: right;
}
.bibEditCellTag {
    font-size: small;
    font-weight: bold;
    padding: 2px 5px;
    text-align: right;
    vertical-align: top;
}
.alrtTable {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 0;
    width: 100%;
}
.alrtTable td {
    border: 1px solid black;
    padding: 3px;
}
.externalcollectionsbox {
    background: none repeat scroll 0 0 #FFFBF5;
    border-collapse: collapse;
    border-top: 1px solid #FFCC00;
    color: #333333;
    font-size: small;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    padding: 10px;
    text-align: left;
}
.externalcollectionsboxheader {
    background: none repeat scroll 0 0 #FFEACC;
    color: #333333;
    font-size: small;
    font-weight: normal;
    vertical-align: top;
}
.externalcollectionsboxbody {
    background: none repeat scroll 0 0 #FFFBF5;
    color: #333333;
    font-size: small;
    padding: 0 5px;
    text-align: left;
    vertical-align: top;
}
.externalcollectionsresultsbox {
    background: none repeat scroll 0 0 #FFFBF5;
    border-collapse: collapse;
    border-top: 1px solid #FFCC00;
    color: #000000;
    margin-top: 15px;
    padding: 0;
    width: 100%;
}
.externalcollectionsresultsboxheader {
    background: none repeat scroll 0 0 #FFEACC;
    border-spacing: 0;
    color: #000000;
    font-weight: normal;
    padding: 2px;
    text-align: left;
}
.externalcollectionsresultsboxbody {
    background: none repeat scroll 0 0 #FFFBF5;
    border-bottom: 1px dotted #FFCC00;
    border-top: 1px dotted #FFCC00;
    color: #000000;
    padding: 2px;
}
.externalcollectionsresultsboxrecords {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    margin-left: 0;
    margin-right: 20px;
}
div.detailedrecordbox, div.detailedrecordminipanel {
    margin: auto;
    max-width: 1280px;
    position: relative;
    width: 90%;
}
div.detailedrecordbox img, div.detailedrecordminipanel img {
    border: medium none;
}
div.detailedrecordtabs {
    border-bottom: 2px solid #3366CC;
    position: relative;
}
div.detailedrecordtabs div {
    bottom: -2px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}
div.detailedrecordbox div.detailedrecordboxcontent {
    border-bottom: 2px solid #3366CC;
    border-left: 2px solid #3366CC;
    border-right: 2px solid #3366CC;
    padding-bottom: 3px;
    padding-top: 1px;
}
div.detailedrecordminipanel {
    border: 1px solid #DDDDDD;
    padding-bottom: 3px;
    padding-top: 3px;
}
div.detailedrecordminipanel {
    background-color: #F7F7F7;
}
.notopgap {
    height: 0;
    margin: 0;
}
.nobottomgap {
    height: 0;
    margin-bottom: 0;
}
.top-left-folded {
    height: 10px;
}
ul.detailedrecordtabs {
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
    margin-top: 0;
    padding-left: 0;
    text-align: center;
    width: 100%;
}
.detailedrecordtabs li {
    display: block;
    float: left;
    margin: 0;
}
.detailedrecordtabs li a {
    background-color: #FFFFFF;
    border-color: #7799DD #7799DD #3366CC;
    border-style: solid;
    border-width: 2px;
    color: #7799DD;
    display: block;
    font-size: x-small;
    font-weight: bold;
    height: 100%;
    margin-right: 10px;
    padding: 4px;
    position: relative;
    text-decoration: none;
}
.detailedrecordtabs li a:hover {
    text-decoration: underline;
}
.detailedrecordtabs li.on a {
    border-color: #3366CC #3366CC #FFFFFF;
    border-style: solid;
    border-width: 2px;
    color: #3366CC;
}
.detailedrecordtabs li.on a:hover, .detailedrecordtabs li.disabled a:hover {
    text-decoration: none;
}
.detailedrecordtabs li.disabled a {
    border-left: 2px solid #CCCCFF;
    border-right: 2px solid #CCCCFF;
    border-top: 2px solid #CCCCFF;
    color: #CCCCFF;
    cursor: default;
}
.detailedrecordtabs li.first a {
    border-left: 2px solid #7799DD;
}
.detailedrecordtabs li.first.on a {
    border-left: 2px solid #3366CC;
}
ul.detailedrecordactions {
    list-style-image: url("/img/arrow_link-icon-15x11-right.gif");
    margin: 0.05em;
    padding-left: 1em;
    text-align: left;
}
.detailedrecordactions, .detailedrecordactions a {
    color: #555555;
    font-size: small;
    font-weight: 700;
    text-decoration: none;
}
#detailedrecordminipanelreview div.star a {
    float: left;
    height: 30px;
    text-indent: -9000px;
    width: 30px;
}
#detailedrecordminipanelreview div.star {
    background: url("/img/star_empty-icon-30x30.gif") no-repeat scroll 0 0 transparent;
    clear: none;
    float: left;
    height: 30px !important;
    text-align: left;
    width: auto;
}
#detailedrecordminipanelreview div.star:hover {
    background-image: url("/img/star-icon-30x30.gif") !important;
}
#detailedrecordminipanelreview:hover div.full, #detailedrecordminipanelreview:hover div.half {
    background-image: url("/img/star_empty-icon-30x30.gif");
}
#detailedrecordminipanelreview div.full {
    background-image: url("/img/star-icon-30x30.gif");
}
#detailedrecordminipanelreview div.half {
    background-image: url("/img/star_half-icon-30x30.gif");
}
#detailedrecordshortreminder {
    background: url("/img/paper-texture-128x128.gif") repeat scroll left top #FFFFFF;
    border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
    border-style: solid;
    border-width: 1px;
    margin: 10px 10px 0;
    padding: 4px;
}
#detailedrecordshortreminder #clip {
    background: url("/img/paper_clip-72x72.gif") no-repeat scroll left top transparent;
    clear: none;
    float: left;
    height: 72px;
    left: -45px;
    position: relative;
    top: -15px;
    width: 72px;
}
#detailedrecordshortreminder #HB {
    left: -50px;
    position: relative;
}
.webjournalBoxList {
}
.webjournalBoxList a:visited, .webjournalBoxList a:link, .webjournalBoxList a:active {
    text-decoration: none;
}
.webjournalBoxList a:hover {
    text-decoration: underline;
}
#citesummary td {
    padding-left: 30px;
}

Posted in: CDS Invenio \ Tagged: , , , , ,

Drupal: customize language switcher block

06/04/2011 10:15 \ 2 Comments \

If you are runnning a drupal multilingual site, you might be using i18n with language icons modules.

I’ve received some mails asking how to customize the aspect of the multilang switcher block. Easy!

Log in as admin and navigate to /admin/settings/language/icons
There you will be able to
1) customize the Icon placement (before link (after link) means that the language icon will be placed before (after) the language text, or just replace link which means no text will be displayed, just the language icon ).
2) customize the path to the language icons (default is sites/default/modules/languageicons/flags/*.png
3) customize the size of language icons (default is 16×12)

But you can also customize the way in which those icons are shown. For instance, you can change from vertical list to horizontal list by editing your CSS file and

.block-locale-0 li{
	display:inline;
	list-style-image: none;
}

In my drupal, the language icons are showing in the sidebar, so for displaying an horizontal list, I set:

.sidebar ul li{
/*border-top:1px solid #979ea8;*/
border:0px;
margin-left:5px;
margin-right:5px;
padding-top:6px;
padding-bottom:6px;
list-style-type: none;
list-style-image: none;
/* para que los language icons salgan en horizontal */
display:inline;
}

For not showing the block’s title (inside an h2):

.sidebar h2{
display:none;
}

Posted in: Drupal \ Tagged: , , , , , , ,

Centrar div y contenido con CSS [resuelto]

15/02/2011 15:40 \ 1 Comment \

Os voy a dejar algunos códigos de ejemplos para que veáis cómo centrar horizontalmente y verticalmente un div (y/o su contenido) utilizando CSS. Las explicaciones están (en inglés) en el propio código.

Es fundamental definir correctamente el DTD (primera línea del código). En mi ejemplo uso el transitional.

Ejemplo 1: centrar un div horizontalmente y verticalmente

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<title>Center div both horizontally and vertically in the screen</title>
	<style>
	.wrapper {
		background-color: #AAA;
		color: #000;
 
		height: 500px;             /* height = H1 */
		width: 600px;							 /* width  = W1 */
 
		position: absolute;        /* we want it to be absolutely centered */
		left: 50%;                 /* with these two lines i set the begining of the div in the center of screen */
		top: 50%;
															/* but I have to "correct" it because I do not want the *BEGINING* to be centered. But the div itself. */
		margin-left: -300px;      /* correct1-> set to left W1/2 so that the middle point of the div is centered horizontally */
		margin-top: -250px;       /* correct2-> set to top H1/2 so that the midddle point of the div is centered vertically */
 
	}
	</style>
</head>
 
<body>
	<div class="wrapper">
		This div is centered vertically and horizontally
	</div>
</body>
 
</html>

Y asi se muestra en los dos navegadores por excelencia. Fijaos que está centrado el propio div ¡y no su contenido!:

Firefox (3.6.13)

Internet Explorer (8.0.7600)

Ejemplo 2: div centrado dentro de otro div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<title>Center div CONTENTS HORIZONTALLY inside a DIV</title>
	<style>
	.wrapper {
		background-color: #AAA;
		color: #000;
 
		height: 500px;             /* height = H1 */
		width: 600px;							 /* width  = W1 */
 
		position: absolute;        /* we want it to be absolutely centered */
		left: 50%;                 /* with these two lines i set the begining of the div in the center of screen */
		top: 50%;
															/* but I have to "correct" it because I do not want the *BEGINING* to be centered. But the div itself. */
		margin-left: -300px;      /* correct1-> set to left W1/2 so that the middle point of the div is centered horizontally */
		margin-top: -250px;       /* correct2-> set to top H1/2 so that the midddle point of the div is centered vertically */
 
	}
 
	.centeredContent{
		background-color: #D00;
		color: #0D0;
		width: 400px;
 
		/* the following two lines will center THE DIV ITSELF in the middle of the wrapper div */
		/* but will ONLY WORK IF THE DTD IS CORRECTLY DEFINED!!!! */
		margin-left: auto;
		margin-right: auto; 
 
		/* this line will center the TEXT inside the .centeredContent div  but not the div itself!! */
		/*text-align: center;*/
	}
	</style>
</head>
 
<body>
	<div class="wrapper">
		<div class="centeredContent">
			The content of this DIV is centered in the div
		</div>
	</div>
</body>
</html>

Firefox:

Internet Explorer:

Ejemplo 3: Centrar el CONTENIDO del div en el div que lo contiene
Igual que en el caso anterior, añadiendo simplemente la línea text-align: center;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<title>Center div CONTENTS HORIZONTALLY inside a DIV</title>
	<style>
	.wrapper {
		background-color: #AAA;
		color: #000;
 
		height: 500px;             /* height = H1 */
		width: 600px;							 /* width  = W1 */
 
		position: absolute;        /* we want it to be absolutely centered */
		left: 50%;                 /* with these two lines i set the begining of the div in the center of screen */
		top: 50%;
															/* but I have to "correct" it because I do not want the *BEGINING* to be centered. But the div itself. */
		margin-left: -300px;      /* correct1-> set to left W1/2 so that the middle point of the div is centered horizontally */
		margin-top: -250px;       /* correct2-> set to top H1/2 so that the midddle point of the div is centered vertically */
 
	}
 
	.centeredContent{
		background-color: #D00;
		color: #0D0;
		width: 400px;
 
		/* the following two lines will center THE DIV ITSELF in the middle of the wrapper div */
		/* but will ONLY WORK IF THE DTD IS CORRECTLY DEFINED!!!! */
		margin-left: auto;
		margin-right: auto; 
 
		/* this line will center the TEXT inside the .centeredContent div  but not the div itself!! */
		text-align: center;
	}
	</style>
</head>
 
<body>
	<div class="wrapper">
		<div class="centeredContent">
			The content of this DIV is centered in the div
		</div>
	</div>
</body>
</html>

Firefox:

Internet Explorer:

Ejemplo 4: centrar texto dentro de un div usando line-height (o imágenes con vertical align):
¡Nótese que el atributo vertical-align funciona bien con imágenes si éstas son más grandes que el contenedor!
En este nuevo ejemplo vamos a hacer el div rojo más ancho y vamos a centrar el texto en él usando line-height. Si el texto es más grande que el contenedor, este método tampoco funcionará.

El código es:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<title>Center div CONTENTS HORIZONTALLY inside a DIV</title>
	<style>
	.wrapper {
		background-color: #AAA;
		color: #000;
 
		height: 500px;             /* height = H1 */
		width: 600px;							 /* width  = W1 */
 
		position: absolute;        /* we want it to be absolutely centered */
		left: 50%;                 /* with these two lines i set the begining of the div in the center of screen */
		top: 50%;
															/* but I have to "correct" it because I do not want the *BEGINING* to be centered. But the div itself. */
		margin-left: -300px;      /* correct1-> set to left W1/2 so that the middle point of the div is centered horizontally */
		margin-top: -250px;       /* correct2-> set to top H1/2 so that the midddle point of the div is centered vertically */		
	}
 
	.centeredContent{
		background-color: #D00;
		color: #0D0;
		width: 400px;
		height: 200px;  /* lets make the div bigger! */
 
		/* the following two lines will center THE DIV ITSELF in the middle of the wrapper div */
		/* but will ONLY WORK IF THE DTD IS CORRECTLY DEFINED!!!! */
		margin-left: auto;
		margin-right: auto; 
 
		/* this line will center the TEXT inside the .centeredContent div  but not the div itself!! */
		text-align: center;		
 
		/* centrar verticalmente el div dentro del wrapper */
		line-height:12em;	 /* the value has been set with try&error method and will only be valid for ONE line text */
	}
	</style>
</head>
 
<body>
	<div class="wrapper">
		<div class="centeredContent">
			Line 1
		</div>
	</div>
</body>
</html>

Y asi se ve en los navegadores:

Firefox:

Internet Explorer:

Pero, ¿qué sucede si en lugar de una línea de texto queremos escribir más? Si fueran sólo dos líneas bastaría con dividir el line-height anterior entre dos (line-height:6em;). Si fueran tres, dividir entre tres(line-height:4em;). Etcétera. Pero, ¿y si el texto ocupa más líneas? Podríamos hacerlo con , pero también estaríamos dependiendo de cuánto texto introdujésemos…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<title>Center div CONTENTS HORIZONTALLY inside a DIV</title>
	<style>
	.wrapper {
		background-color: #AAA;
		color: #000;
 
		height: 500px;             /* height = H1 */
		width: 600px;							 /* width  = W1 */
 
		position: absolute;        /* we want it to be absolutely centered */
		left: 50%;                 /* with these two lines i set the begining of the div in the center of screen */
		top: 50%;
															/* but I have to "correct" it because I do not want the *BEGINING* to be centered. But the div itself. */
		margin-left: -300px;      /* correct1-> set to left W1/2 so that the middle point of the div is centered horizontally */
		margin-top: -250px;       /* correct2-> set to top H1/2 so that the midddle point of the div is centered vertically */		
	}
 
	.centeredContent{
		background-color: #D00;
		color: #0D0;
		width: 400px;
		height: 200px;
 
		/* the following two lines will center THE DIV ITSELF in the middle of the wrapper div */
		/* but will ONLY WORK IF THE DTD IS CORRECTLY DEFINED!!!! */
		margin-left: auto;
		margin-right: auto; 
 
		/* this line will center the TEXT inside the .centeredContent div  but not the div itself!! */
		text-align: center;		
 
		/* centrar verticalmente el div dentro del wrapper */
		line-height:1em;	
 
		/* lets now use padding-top to center the text vertically in the red div */
		padding-top: 15px; /* this value is set with try&error method and it is content-dependent. Ug. */
 
	}
	</style>
</head>
 
<body>
	<div class="wrapper">
		<div class="centeredContent">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultricies risus euismod risus consectetur ut lacinia dolor vestibulum. Aenean condimentum enim ut odio porttitor vestibulum bibendum lectus ultrices. Etiam scelerisque sodales arcu vel ullamcorper. Mauris cursus massa ac neque aliquam faucibus. Proin pretium mollis neque, in ornare libero auctor at. Fusce vitae enim massa. Pellentesque sed tellus sit amet risus sollicitudin interdum. Etiam dolor tortor, molestie in tempor vel, gravida quis justo. Aliquam erat volutpat. Morbi sodales dignissim posuere. Praesent adipiscing arcu non mi pulvinar mattis. Donec ipsum quam, tristique ac fermentum vitae, eleifend eu risus. 
		</div>
	</div>
</body>
</html>

La solución pasa por utilizar display:table-cell; y vertical-align:middle.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<title>Center div CONTENTS HORIZONTALLY inside a DIV</title>
	<style>
	.wrapper {
		background-color: #AAA;
		color: #000;
 
		height: 500px;             /* height = H1 */
		width: 600px;							 /* width  = W1 */
 
		position: absolute;        /* we want it to be absolutely centered */
		left: 50%;                 /* with these two lines i set the begining of the div in the center of screen */
		top: 50%;
															/* but I have to "correct" it because I do not want the *BEGINING* to be centered. But the div itself. */
		margin-left: -300px;      /* correct1-> set to left W1/2 so that the middle point of the div is centered horizontally */
		margin-top: -250px;       /* correct2-> set to top H1/2 so that the midddle point of the div is centered vertically */		
	}
 
	.centeredContent{
		background-color: #D00;
		color: #0D0;
		width: 400px;
		height: 200px;
 
		/* the following two lines will center THE DIV ITSELF in the middle of the wrapper div */
		/* but will ONLY WORK IF THE DTD IS CORRECTLY DEFINED!!!! */
		margin-left: auto;
		margin-right: auto; 
 
		/* this line will center the TEXT inside the .centeredContent div  but not the div itself!! */
		text-align: center;		
 
    /* to center the text within the red div we use the following two lines */
		display:table-cell;
		vertical-align: middle;
	}
 
	</style>
</head>
 
<body>
	<div class="wrapper">
		<div class="centeredContent">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultricies risus euismod risus consectetur ut lacinia dolor vestibulum.
		</div>
	</div>
</body>
</html>

Pero si nos fijamos el div rojo (contenedor del texto) se nos desplazará a la izquierda (muestro solo el pantallazo de Internet Explorer 8, porque en Firefox se ve igual):

Ire completando el post con más ejemplos. Si os quedan dudas, podéis empezar a leer éste tutorial

Posted in: Informática - web \ Tagged: , , , , , , ,

CDS-Invenio: compress CSS to speed up page load

26/11/2010 13:35 \ 1 Comment \

Some days ago I discovered PageSpeed plugin for Firebug. This plugin is really useful to speed up your CDSInvenio website load time.

In this brief post I’ll be describing how to compress CSS with GZIP to speed up page load.

It is really simple.

1. Your server must be able to execute PHP.

2. Edit etc/apache/invenio-apache-vhost.conf. Locate this lines:

<Directory /soft/cds-invenio/var/www>
           AddHandler python-program .py .cgi

And change them to:

<Directory /soft/cds-invenio/var/www>
           AddHandler application/x-httpd-php52 .css
           AddHandler python-program .py .cgi

3. Edit your CSS files (var/www/img/*.css) and add these lines to the begining:

<?php
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>

4. Restart your server:

/etc/init.d/httpd restart

Posted in: CDS Invenio, Informática - web \ Tagged: , , , , , ,

CSS horizontal scroll div with fixed-height images [SOLVED]

27/10/2010 18:46 \ Leave a Comment \

This is often asked in web developing forums.

What is the easiest way to make an horizontal scrolling div that contains fixed-height images?

Well, I just coded this and it works like a charm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal image scrolling</title>
<style>
.imagen{
  display:inline; 
  white-space: nowrap
}
 
#visor {
   height:500px; /* the height of all the images and the height of the div */
   width:950px; /* the width of the scrolling div */
   overflow-y:hidden;
   overflow-x:auto; 
   white-space: nowrap;
}
</style>
</head>
 
<body>
<div id="visor">
  <div class="imagen">
    <img src="images/beauty/1.jpg" height="500" alt="Laura by Miguel Martin fotografia" />
  </div>
  <div class="imagen">
    <img src="images/beauty/2.jpg" height="500" alt="Laura by Miguel Martin fotografia" />
  </div>
  <div class="imagen">
    <img src="images/beauty/3.jpg" height="500" alt="Laura by Miguel Martin fotografia" />
  </div>
  <div class="imagen">
    <img src="images/beauty/4.jpg" height="500" alt="Laura by Miguel Martin fotografia" />
  </div>
</div>
</body>
</html>

Posted in: Informática - web \ Tagged: , , , , ,

CSS Layout examples

07/07/2010 09:36 \ Leave a Comment \

Usually I find myself answering to questions like “how do I set up a two column layout with fixed/fluid width?” and so on.
Well, for all of you who have issues with layouts, take a look at dynamicdrive.com.

For instance, here you can find several CSS configurations for two column layouts”.

Posted in: Informática - web \ Tagged: , , ,