Este es un problema que tenemos cuando queremos darle fondo a una capa con contenido y que en Internet Explorer se ve bien pero en Firefox no, cuando usamos una altura dinámica o al 100%.
Bueno la solución es tan simple que no requiere ejemplo. Sólo deben agregar este atributo al estilo de la clase o identificador:
overflow:auto;
Qué fácil ¿no?
fuente
Friday, April 18, 2008
Sunday, April 06, 2008
Haz magia con realtive absolute!!!
Todos sabemos que trabajar con tablas está obsoleto por muchos motivos; accesibilidad, carga de contenido, estándar, etc.
Ahora lo común es usar XHTML strict con CSS. Esto trae muchas ventajas, por la potencia de CSS, pero también nos da muchos dolores de cabeza, y uno de ellos es la posición de los elementos.
Bueno he estado practicando y probando esta técnica por bastante tiempo, y lo bueno es que pasa las pruebas de W3C y accesibilidad, se ve igual en la mayoría de los navegadores (IE 6-7, FF 1-2, Opera, Safari, entre otros) y es muy fácil de aprender a usarla.
La técnica:
Esto no es algo nuevo ni una revolución pero quiero divulgarla por si alguien no la conoce. En mi caso yo la descubrí iterando con los valores de la propiedad position.
El código:
Es muy simple de implementar, debemos usar un div que contenga todo, aplicarle position:relative y darle el ancho del diseño de la página, y a cada div interior position:abolute.
Y si quieren que el contenido se vea centrado sólo deben usar el modo que explico en mi anterior post de centrado.
Que fácil no?!
Si usas Dreamweaver es mucho mas fácil trabajar ya que en modo de diseño sólo arrastras las capas.
Descarga el ejemplo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>relative absolute</title>
<style type="text/css">
#contenedor {
position:relative;
width: 940px;
margin-right: auto;
margin-left: auto;
}
#cabecera {
position:absolute;
top:0px;
width: 940px;
height: 76px;
left:0px;
color: #FFFFFF;
background-color: #003366;
}
#menuIz {
position:absolute;
top:79px;
left:1px;
width: 117px;
height: 163px;
background-color: #CCCCCC;
}
#contenido {
position:absolute;
top:79px;
left:125px;
width: 816px;
height: 163px;
background-color: #99CC99;
color: #333333;
}
#pie {
position:absolute;
top:246px;
left:1px;
width: 940px;
height: 77px;
background-color: #666666;
color: #FFFFCC;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<h1 align="center">Cabezcera</h1>
</div>
<div id="menuIz">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="contenido">Contenido del documento...</div>
<div id="pie">
<div align="center">
<h3>Pie de página</h3>
</div>
</div>
</div>
</body>
</html>
Ahora lo común es usar XHTML strict con CSS. Esto trae muchas ventajas, por la potencia de CSS, pero también nos da muchos dolores de cabeza, y uno de ellos es la posición de los elementos.
Bueno he estado practicando y probando esta técnica por bastante tiempo, y lo bueno es que pasa las pruebas de W3C y accesibilidad, se ve igual en la mayoría de los navegadores (IE 6-7, FF 1-2, Opera, Safari, entre otros) y es muy fácil de aprender a usarla.
La técnica:
Esto no es algo nuevo ni una revolución pero quiero divulgarla por si alguien no la conoce. En mi caso yo la descubrí iterando con los valores de la propiedad position.
El código:
Es muy simple de implementar, debemos usar un div que contenga todo, aplicarle position:relative y darle el ancho del diseño de la página, y a cada div interior position:abolute.
Y si quieren que el contenido se vea centrado sólo deben usar el modo que explico en mi anterior post de centrado.
Que fácil no?!
Si usas Dreamweaver es mucho mas fácil trabajar ya que en modo de diseño sólo arrastras las capas.
Descarga el ejemplo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>relative absolute</title>
<style type="text/css">
#contenedor {
position:relative;
width: 940px;
margin-right: auto;
margin-left: auto;
}
#cabecera {
position:absolute;
top:0px;
width: 940px;
height: 76px;
left:0px;
color: #FFFFFF;
background-color: #003366;
}
#menuIz {
position:absolute;
top:79px;
left:1px;
width: 117px;
height: 163px;
background-color: #CCCCCC;
}
#contenido {
position:absolute;
top:79px;
left:125px;
width: 816px;
height: 163px;
background-color: #99CC99;
color: #333333;
}
#pie {
position:absolute;
top:246px;
left:1px;
width: 940px;
height: 77px;
background-color: #666666;
color: #FFFFCC;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<h1 align="center">Cabezcera</h1>
</div>
<div id="menuIz">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="contenido">Contenido del documento...</div>
<div id="pie">
<div align="center">
<h3>Pie de página</h3>
</div>
</div>
</div>
</body>
</html>
Subscribe to:
Posts (Atom)