Hola Maikel.
Era obvio que iba a tener que preguntar algo.
Estoy usando el ejemplo
http://positioniseverything.net/articles/sidepages/jello-piefecta-clean.html
porque necesito que sean 3 columnas.
Pero quiero que el ancho maximo sea para una ventana de 1024 y no para
800 como el ejemplo de arriba.
En Firefox lo toma, pero en explorer no, y no se cual es la propiedad
que no estoy modificando correctamente.
Este es el css:
/*
**************************************************************************************************/
/* style basado en
http://positioniseverything.net/articles/sidepages/jello-piefecta-clean.html
*/
*, html, body, div, ol, ul, li, dl, dt, dd, img {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
body {
padding: 0 350px; /* the critical side padding that sets the natural
min-width! */
background: #F0F0F0; /* this BG tiles the area outside the columns */
color: #666666;
font-family: "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 100.01%; /* this body font-size fixes an IE bug and
maintains x-browser uniformity */
text-align: center; /* centers the #sizer element in IE5.x/win */
}
#sizer {
margin: 0 auto; /* centers #sizer in standard browsers */
padding: 0;
width: 100%; /* this value controls liquidity; 0% = full rigid, 100%
= full liquid */
text-align: left; /* resets the default text alignment for the page */
max-width: 300px;
}
#expander { /* Any % height here causes IE to lose the neg right margin */
margin: 0 -345px; /* neg side margin values should be < or = to side
body padding */
min-width: 700px; /* This prevents Safari from losing the negative
margins in narrow windows */
position: relative; /* makes #expander visible outside #sizer in
IEwin */
}
/*\*/
* html #expander {height: 0;}
/* #expander must have "height: 0" in IEwin bug fixing */
/* The above is a modified Holly hack for #expander, with zero
substituted for the
usual 1% height value. Any % value on this element causes a horrendous
IE bug! */
#wrapper1 {
position: relative;
background: url(../images/redcircles.gif); /* this BG tiles the left
column */
font-size: .7em; /* set global font-size here .9em es el default*/
border: 3px solid #da5;
border-width: 4px 3px;
} /* this positioning may be needed for IEwin if page is to contain
positioned elements */
#wrapper2 {
position: relative; /* extra insurance against bugs in IEwin */
background: url(../images/redblots.gif) 100% 0 repeat-y; /* this BG
tiles the right column */
}
/****************** Main Page Structure *****************/
/* To modify the side column widths and the col divider widths, the
values that are
marked "critical" and also refer to the desired mod MUST be changed as a
group. */
.outer {
background: url(../images/bluelattice.gif); /* this BG tiles the
center column */
border-left: 2px solid #da5; /*** Critical left divider dimension
value ***/
border-right: 2px solid #da5; /*** Critical right divider dimension
value ***/
margin-left: 180px; /*** Critical left col width value ***/
margin-right: 180px; /*** Critical right col width value ***/
}
.float-wrap {
float: left;
width: 100%;
}
.center {
float: right;
width: 100%;
}
.left {
float: left;
position: relative; /* Needed for IE/win */
width: 180px; /*** Critical left col width value ***/
margin-left: -182px; /*** Critical left col width value ***/ /***
Critical left divider dimension value ***/
}
.right {
float: right;
position: relative; /* Needed for IE/win */
width: 180px; /*** Critical right col width value ***/
margin-right: -182px; /*** Critical right col width value ***/ /***
Critical right divider dimension value ***/
margin-left: 2px; /*** Critical right divider dimension value ***/
}
.centerbox {
font-weight: bold;
text-align: justify;
overflow: visible;
width: 100%;
}
.container-left {color: #ffc;}
.container-right {color: #ffc; padding-bottom: 80px;} /* makes room for
the froggy */
/*************** Header and Footer elements *****************/
.header {
width: 100%;
color: #b33;
padding: 5px 0;
background: url(../images/jello1.gif) no-repeat 50px 7px;
} /* "jello" BG is made to be in fixed position here */
/*\*/
* html .header {background-position: 10px 3px;}
/* IEwin hack needed because the "jello" BG is in a positioned wrapper
and shows
variance. IEwin does not support fixed backgrounds on elements other
than the body */
.header span {color: #373;}
.footer {
width: 100%;
font-size: 1.8em;
font-weight: bold;
clear: both;
padding: 5px 0 15px;
position: relative;
}
.footer p {margin: 10px 0 0 20px; color: #383;}
.footer hr {
color: #944;
margin: 0;
background: #944;
height: 5px;
}
.froggy {
position: absolute;
top: -65px;
right: -10px;
}
/************** Spacing Controls for various column contents
***************/
.outer ul {
text-align: center;
margin: 10px 0;
}
.textpadder {padding: 8px;}
/************** Generic Rules *************/
a {color: #000; vertical-align: bottom;}
p {margin: .8em 0;}
h1 {margin: 70px 0 10px 80px;}
h2 {
font-size: 1.2em;
text-align: center;
padding: 5px 0;
margin: 0;
border: 3px solid #dcd3c2;
border-color: #fef5e4 #d4cab9 #c2b9a8 #ece3d2;
color: #500;
background: url(../images/marble1.jpg);
font-family: tahoma, arial, sans-serif;
}
h3 {
margin: 1em 0 .3em;
}
.alignright {margin: 0 10px 10px 0; text-align: right;}
.small {font-size: .8em;}
/************** Fancy Nav Buttons *************/
.sidenav li a {
display: block;
border: 2px solid #dcd3c2;
color: #500;
text-decoration: none;
background: url(../images/marble1.jpg);
padding: 4px 5px 4px 10px;
font-family: tahoma, arial, sans-serif;
font-size: 1.1em;
font-weight: bold;
}
.sidenav li a:hover {
border-color: #fef5e4 #d4cab9 #c2b9a8 #ece3d2;
background-position: -1px -1px;
padding: 3px 6px 5px 9px;
}
.sidenav li a:active {
border-width: 3px 1px 1px 3px;
border-color: #c2b9a8 #ece3d2 #fef5e4 #d4cab9;
background-position: 0 0;
padding: 4px 5px 4px 10px;
}
/************** Special Fixes *************/
.outer {word-wrap: break-word;}
/* Prevents long urls from breaking layout in IE, must
be hidden in a conditional comment for CSS to validate */
img {max-width: 100%;}
/* prevents oversize images from breaking layout in browsers that
support max-width */
/* \*/
* html #wrapper1,
* html #wrapper2,
* html .outer a,
* html .container-left,
* html .container-right,
* html .outer,
* html h2,
* html .sidenav li a
{height: 1%;}
/* Holly hack */
/*** Variance fixes for IEwin ***/
/*\*/
* html .outer p {margin-right: -6px;}
/* */
/**************** Utility Rules *******************/
/*\*/ /*/
.sidenav a:hover {position: relative;}
/* this fixes an IEmac hover bug in the left column, hidden from other
browsers */
.brclear { /* Use a break with this class to clear float containers */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
.clicker {
display: block;
text-align: center;
padding: 3px;
background: #833;
cursor: pointer;
}
.hide {display: none;}
/*
**************************************************************************************************/
muchas gracias.
Maira.
Maikel Naigt wrote:
Bueno, si tu problema radica en simular un 'min-width' para IE, creo que la
solución la tienes en lo que se ha venido a llamar 'Jello Mold Layout' [1],
y que básicamente se vale de los márgenes negativos en un contenedor global
para establecer una anchura mínima en ese contenedor.
La teoría en principio es "sencilla": cualquier elemento de bloque tiene una
anchura total igual a su ancho + acolchamiento (o como leñes se diga en
cristiano) + EL VALOR ABSOLUTO DEL margen. Esto quiere decir que es
indiferente que el margen sea un valor positivo o negativo. La diferencia
estriba en que con valores positivos de margen se crea un espacio vacío
entre el borde del bloque y el elemento adyacente (el margen que todos
conocemos, vaya) y el contenido permanece "dentro", pero con valores
negativos es el propio contenido el que se desplaza dentro de su margen.
Siendo así, cualquier elemento con 'width: 0', únicamente tendrá la anchura
de su padding (acolchamiento) y su margen, llegando a la feliz conclusión de
que ese bloque nunca puede tener menos anchura que lo definido en sus
márgenes y, si estos son negativos, tendremos que el contenido está siempre
presente.
Luego habrá que ajustar contenedores y posicionamientos relativos aquí y
allá para que IE sepa lo que queremos, pero te puedo asegurar que no es nada
complicado (comprendiendo bien la teoría) y es compatible con casi cualquier
tipo de maquetación (todas las normalitas por descontado) con un mínimo de
ajustes.
Además de esto, se ha descubierto que cambiando algunas propiedades de uno
de los contenedores intermedios es posible crear un Layout cuya anchura no
sea ni fija ni totalmente líquida, si no algo así como moldeable (de ahí lo
de Layout Gelatinoso).
De todas maneras, esta es una muy somera explicación del fenómeno. Te
aconsejo encarecidamente una buena lectura del enlaces que te adjunto para
que te quede todo mucho más claro. Además, una vez que investigues un poco
con los márgenes negativos comprobarás que son tremendamente útiles, no solo
para este propósito.
Un saludo, David Merino Ogando.
[1] http://positioniseverything.net/articles/jello.html
On 1/18/06, maira <[EMAIL PROTECTED]> wrote:
Hola nuevamente.
Estoy usando el template que se muestra en la siguiente pagina:
http://webhost.bridgew.edu/etribou/layouts/3col_footer/archives/3col_footer_02/
Yo necesito un template de 3 COLUMNAS, con ambas columnas laterales con
un ANCHO FIJO, y la columna central que sea LIQUIDA.
Necesito que el ancho de la columna central tenga como mínimo 468px que
es el ancho de un banner. En firefox lo logro con el min-width, pero
hay alguna forma de limitarle el ancho minimo en explorer? el problema
es que se me superponen los banners de la columna central con unos de
la columna derecha y se van a quejar seguro. Si achico la ventana lo
suficiente, la columna central casi desaparece. :(
Lo unico que se me ocurrió es usar la estructura líquida para
resoluciones mayores a 1024 y detectar cuando usan 800*600 y usar otra
hoja
de estilos con una estructura fija, pero no tiene sentido hacer dos
hojas de estilo.
Creo que he revisado cuanta estructura de 3 columnas se me haya cruzado
pero no hay ninguno que me permita darle un min-width al contenido.
En estas situaciones me da ganas de recurrir a las TABLAS <llorando />
Desde ya muchas gracias.
Maira.
Daniel calderón wrote:
Maira,
Echale un ojo a esta:
http://www.maxdesign.com.au/presentation/liquid/example10.htm
http://www.maxdesign.com.au/presentation/liquid
Es lo más cercano que encontre.
Saludos!!
-----Mensaje original-----
De: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] En nombre de maira
Enviado el: jueves, 12 de enero de 2006 15:03
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] 3 columnas: centro líquido, laterales de ancho fijo
Gracias por el sitio, tiene buenos templates, pero el de 3 columnas
tiene el mismo problema que indico en los sitios de mi primer mail.
Alguien ha hecho un template de 3 columnas que no tenga el problema
nombrado en explorer?
Saludos
Maira.
Daniel calderón wrote:
Maira,
No se si la conocías: http://intensivstation.ch/templates/
Pero puede ayudarte en temas de layouts :)
Saludos !
-----Mensaje original-----
De: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] En nombre de maira
Enviado el: jueves, 12 de enero de 2006 1:10
Para: Ovillo@lists.ovillo.org
Asunto: [Ovillo] 3 columnas: centro líquido, laterales de ancho fijo
Hola a todos después de tanto tiempo!
Disculpen si vuelvo a preguntar esto, pero no he encontrado una
respuesta a mi pregunta en mails anteriores.
Necesito hacer un site que tiene que tener 3 columnas, la central
líquida y las dos laterales con un ancho fijo, además de un header y
footer.
He encontrado varios ejemplos como:
- http://glish.com/css/7.asp
- http://www.positioniseverything.net/thr.col.stretch.html#
- http://realworldstyle.com/nn4_3col_header.html
- http://bluerobot.com/web/layouts/layout3.html
- http://thenoodleincident.com/tutorials/box_lesson/basic3.html
- http://www.positioniseverything.net/threecolbglong.html
-
http://www.ssi-developer.net/main/templates/temps/3c-hd-ft-flex.htm
Todos funcionan perfecto en firefox, pero en explorer, cuando la
ventana
no está maximizada, y uno la achica bastante, la columna central casi
desaparece y la derecha se superpone con la izquierda.
Hay algún ejemplo que no tenga este problema en explorer? tengo que
preocuparme por esta falla?
Algún ejemplo que me recomienden que sea mejor que otros para aplicar?
Desde ya muchas gracias y feliz año para todos!
Maira.
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
