Mostrando entradas con la etiqueta css. Mostrar todas las entradas
Mostrando entradas con la etiqueta css. Mostrar todas las entradas

jueves, 22 de febrero de 2007

Altura mínima y dinámica de divs de css usando js

Muchas veces tenemos, por ejemplo, un menú lateral con un determinado fondo y queremos que cuando el contenido central vaya creciendo pues el color del menú se extienda hasta abajo.

Esto se logra con un js que me encontré, para llamarlo basta citarlo con la ruta correspondiente (quitar los espacios después del '<'):

< script language="JavaScript" src="./column.js">< /script>


...ahora sí: la función js:


// by Paul@YellowPencil.com and Scott@YellowPencil.com
// feel free to delete all comments except for the above credit

function setTall() {
if (document.getElementById) {
// the divs array contains references to each column's div element.
// Replace 'center' 'right' and 'left' with your own.
// Or remove the last one entirely if you've got 2 columns. Or add another if you've got 4!
var divs = new Array(document.getElementById('contenido'), document.getElementById('enlaces'), document.getElementById('menu'));

// Let's determine the maximum height out of all columns specified
var maxHeight = 0;
for (var i = 0; i < divs.length; i++) {
if (divs[i].offsetHeight > maxHeight) maxHeight = divs[i].offsetHeight;

}

// Let's set all columns to that maximum height
for (var i = 0; i < divs.length; i++) {
divs[i].style.height = maxHeight + 'px';

// Now, if the browser's in standards-compliant mode, the height property
// sets the height excluding padding, so we figure the padding out by subtracting the
// old maxHeight from the new offsetHeight, and compensate! So it works in Safari AND in IE 5.x
if (divs[i].offsetHeight > maxHeight) {
divs[i].style.height = (maxHeight - (divs[i].offsetHeight - maxHeight)) + 'px';
}
}
}
}

window.onload = function() {
setTall();
}

window.onresize = function() {
setTall();
}

viernes, 16 de febrero de 2007

Vertical-align

Artículo en inglés, aunque tiene varias traducciones, sobre cómo centrar verticalmente para varios navegadores y css

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

CSS distintas para los navegadores

Bien sabido es que cada navegador interpreta las css casi que a su modo y ello obliga a hacer pequeñas modificaciones para uno u otro navegador.

Para hacer que nuestras páginas tomen una css u otra yo realizo lo siguiente:
(Nota: quitar los espacios después de '<')

1.-La css que me sirve de base la hago basada en firefox y luego genero otras para hacer las modificaciones.


< link type="text/css" rel="stylesheet" href="../css/css_base.css" />


2.- Para la css que modifica para explorer 7


< !--[if gte IE 6]>
< link rel="stylesheet" type="text/css" media="screen" href="../css/ie7_bug.css" />
< ![endif]-->


3.- La css que modifica para explorer 6


< !--[if IE 6]>
< link rel="stylesheet" type="text/css" media="screen" href="../css/ie6_bug.css" />
< ![endif]-->


A destacar:
Los atributos puesto con '_' (que sólo los veía explorer 6 o anteriores) no son válidos por el w3c.
Los estilos que coloquemos con *> el explorer 7 sí los interpreta (aunque no del todo bien) y el explorer 6 no. El firefox también los interpreta.