Quenerapú » CSS http://quenerapu.com Sentado delante de un ordenador desde 1982. ¿De qué voy a hablar, si no? Mon, 12 Jul 2010 09:09:47 +0000 en hourly 1 http://wordpress.org/?v=3.0 El layout con columnas más simple del mundo (probablemente) http://quenerapu.com/css/el-layout-con-columnas-mas-simple-del-mundo-probablemente/ http://quenerapu.com/css/el-layout-con-columnas-mas-simple-del-mundo-probablemente/#comments Thu, 15 Oct 2009 16:19:54 +0000 Quenerapú http://quenerapu.com/?p=125 Hace mucho tiempo que deseaba dar definitivamente por cerrados mis quebraderos de cabeza al diseñar sitios web con columnas. Y creo que al fin lo he conseguido.

<!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>TinyCSS</title>
<style type="text/css">
*{margin:0;padding:0;}
h1{font-size:1em;}
.header{border-bottom:1px solid #aaa;}
.container{overflow:hidden;height:100% !important;}
.main{width:500px;margin-bottom:-1000px;padding-bottom:1000px;float:left;}
.sideBar{margin-bottom:-1000px;padding-bottom:1000px;float:right;}
.s1{width:160px;border-left:1px solid #aaa;}
.s2{width:300px;border-left:1px solid #aaa;}
.footer{border-top:1px solid #aaa;}
</style>
</head>
<body>
<div class="header"><h1>Header</h1></div>
<div class="container">
	<div class="sideBar s2"><h1>Sidebar 2</h1></div>
	<div class="sideBar s1"><h1>Sidebar 1</h1></div>
	<div class="main"><h1>Main</h1></div>
</div>
<div class="footer"><h1>Footer</h1></div>
</body>
</html>

Si bien el resultado final es bastante feo (puedes ver una demo aquí) el peso de este documento es de menos de 1Kb. y es compatible con Internet Explorer (versión 6 incluída), Firefox, Chrome, Opera y Safari (Browsershots.org).

No será difícil para un diseñador hábil con las CSS partir de este esqueleto para crear algo mucho más agradable a la vista.

Lo que más me gusta es que los <div> de las columnas pueden crecer al alto tanto como quieras sin preocuparte por sus vecinas, que se prolongarán en lo vertical para que todas sean iguales (con unos ejemplos me explico mejor). Para ello no he usado ni javaScript ni el conocido método Faux Columns, sino un truco CSS que consiste en atribuir

margin-bottom:-1000px; padding-bottom:1000px;

a cada una de las columnas, y

overflow:hidden;

al <div> que las contiene.

Y para terminar, es importante recordar que en la línea

.container{overflow:hidden;height:100% !important;}

height:100% !important; son necesarios para que el sistema sea compatible con IE6. El glorioso día en que IE6 sea desterrado ya no será necesario incluir ese código.

Me ha ayudado mucho un viejo post de Ed Elliot. Gracias Ed!

]]> http://quenerapu.com/css/el-layout-con-columnas-mas-simple-del-mundo-probablemente/feed/ 5 Hojas de estilo CSS dinámicas http://quenerapu.com/css/hojas-de-estilo-css-dinamicas/ http://quenerapu.com/css/hojas-de-estilo-css-dinamicas/#comments Fri, 06 Mar 2009 11:52:08 +0000 Quenerapú http://quenerapu.local/?p=72 Es posible generar hojas de estilo dinámicas con PHP. El siguiente artículo sólo pretende mostrar la idea, pero naturalmente se puede ‘complicar’ todo lo que uno quiera para obtener mejores resultados.

Supongamos que tengo una web en la que utilizo el sistema de plantillas más simple del mundo (probablemente). Mediante ese sistema podemos generar diferente HTML en cada plantilla, pero ¿cómo aplicaríamos una hoja de estilos propia para cada plantilla?.

Una solución sin complicarnos mucho sería crear diferentes hojas de estilo y llamar a la que corresponda en cada caso. Supongamos que la variable $tpl contiene el nombre de la plantilla:

<?php
$tpl = "moderna";
echo "
<link rel='stylesheet'
type='text/css'
href='".$tpl.".css' />";
?>

Pero a mi no me gusta la idea de tener varios archivos CSS esperando en una carpeta y elegir ‘el que toca’ en cada caso. Me recuerda a aquellos tiempos feos (pre-PHP o pre-ASP) en que hacíamos sitios web estáticos, con decenas o incluso cientos de documentos HTML prácticamente iguales. ¿Si ahora creamos HTML dinámicamente, por qué no estamos creando también CSS dinámicamente? Esta es mi propuesta:

<?php
$tpl = "moderna";
echo "
<link rel='stylesheet'
type='text/css'
href='estilos.php?tpl=$tpl' />";
?>

LLama la atención que nuestra página de estilos ya no lleva la extensión .css, sino que se trata de un archivo PHP en toda regla. Este es el archivo estilos.php:

<?php
header('Content-type:text/css');
switch ($_GET['tpl'])
{
case "clasica" :$f="'Times New Roman'";$c="#0000cc";break;
case "moderna" :$f="Verdana";          $c="#cc0000";break;
default        :$f="Arial";            $c="#00cc00";break;
}
print <<<_CSS
h1{font-family:{$f};color:{$c};}
_CSS;
?>

Así, con un simple switch ajustamos el valor de las variables $f (para font-family) o $c (para color) en este sencillo ejemplo, de modo que los estilos para h1 se construyen dinámicamente en función de la plantilla elegida.

]]> http://quenerapu.com/css/hojas-de-estilo-css-dinamicas/feed/ 1