ZoneArtCSS | Desarrollo Web, Diseño de páginas Web, Aplicaciones Móviles, Notas de Tecnología » problema

Div 100% alto definitivo

miguelortega — Sat, 11 Jul 2009 04:42:31 +0000

Bua…. como lo dice el titulo… porfin una solucion, sino la correcta, supongo que la unica por el momento… (y si me equivoco manda la tuya haciendo click aqui), y siempre que necesitamos dar este efecto en nuestros diseños… acabamos haciendolo con javascript… o si tenemos un diseño fijo, estatico, pues optamos por el uso de una imagen de fondo… que no es lo mas conveniente en algunas ocaciones pero si nos ahorra horas y frustraciones pero bueno. eh aqui la solucion para igualar nuestras columnas, cuando estan dentro de un div contenedor… y dar el efecto de divs relativamente iguales en su altura...

Al lio… tenemos nuestro div contenedor (class=”all”) y dentro tenemos otros 2 div ‘s (class=”contenido” y class=”lateral”) y queremos que tengan la misma altura cubriendo asi el 100% del contenedor (class=”all”)… entonces el html es:…

<div class="all">
    <div class="contenido">
        <p>nuestra primera columna</p>
    </div>
    <div class="lateral">
        <p>nuestra segunda columna.</p>
    </div>
</div>

Ahora para dar el efecto necesitamos hacer uso del “overflow” para que nos oculte el scroll que nos da el “padding” y el “margin“, que son ridiculamente enormes y nos da mucha altura.

1 2	.all{overflow:hidden;} .contenido, .lateral{float:left;padding-bottom:30000px;margin-bottom:-30000px;}

Click para ver demo en linea

position:fixed para Internet Explorer 6

miguelortega — Sat, 04 Jul 2009 01:19:48 +0000

Bueno despues de tratar, y utilizar un millon de hacks… eh encontrado una solucion… ok no valida pero sirve… asi k toca joderse otra vez… por culpa de… adivinen…. sip… FUCK IE 6 acertaron… (joer… k cliche de post) pero bueno… eh aqui la luz…

Tenemos nuestro div “cabecera” que tiene el fondo, ancho, alto etc… y le agregamos… position:absolute; esto es para IE6, y el siguiente codigo en JS (No estoy seguro de que sea JS, no se programar mucho tansolo, diseño y css, pero si me equivoco corrijanme) hace el efecto de “estar fijo“, tomando en cuenta el movimiento de nuestro scroll del mouse para darle las cordenadas de arriba e izquierda para simular la posicion fija…

1
2
3

.cabecera{background:#333;height:50px;width:100%;color:#FFF;position:absolute;
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px'); line-height:3em;}

Y ahora hacemos uso de > para que solo nuestros bonitos navegadores interpreten el siguiente codigo… y es todo

1	body > div.cabecera {position:fixed;top:0px;left:0px;}

y nuestro html algo asi

1
2
3

<div class="cabecera">
Posicion fija: </Alex Aguiar>
</div>

pero yo le agregue un div mas dandole mucha altura para hacer la prueba…

1 2	<div style="width:800px;height:1000px;margin:auto;"> </div>

Ver demo online

IE PNG FIX – Solucion a PNG ‘s con transparencia en IE6

miguelortega — Thu, 02 Jul 2009 03:01:29 +0000

Porfin una solucion definitiva para los PNG con transparencia en IE con Javascript y Prototype.

Ya sabemos todos lo amargo que es que este famoso Internet Explorer 6 nos haga mas dificil nuestros proyectos, cuando llegamos al famoso “Test en otros navegadores”, en lo personal eh probado miles… de FIXS, HACKS, y otras soluciones y metodos extraños, muy prometedores pero nunca, me funcionaron… algunas gentes dicen que si… pero bueno, espero que la utilizen y queden satisfechos como yo… estoy implementando un Theme para WordPress en la empresa donde trabajo… y uso transparencias y me fue y es muy util esta solucion a los PNG’S y aqui la comparto con ustedes…

Antes de aplicarlo es bueno saber que:

1.- Necesita la libreria JS de Prototype 1.6
2.- Funciona tanto en imagenes () como en (#css{background:url…}), pero!… si es un fondo en mosaico (que se repite X o Y o las 2) no funciona.

Bueno… para aplicarlo como eh dicho necesita Prototype asi que lo llamamos desde nuestro

1	<script src="javascripts/prototype.js" type="text/javascript"></script>

luego llamamos a pngHack.js este archivo necesita un gif (s.gif) que viene en dentro del zip… simplemente lo agregamos en una carpeta llamada “images“,

1	<script src="javascripts/pngHack.js" type="text/javascript"></script>

Luego llamamos a functions.js que es donde configuramos nuestros elementos que tendran transparencia.

<script src="javascripts/functions.js" type="text/javascript"></script>

// aplica el hack al elemento con la "id" yourPNG
$('yourPNG').pngHack();
 
// aplica el hack a todos estos elementos
$$('div#fixMe', 'img#andMe', 'img.andUsTo').invoke('pngHack');

Ver demo en linea
Descargar PNG FIX FOR IE
Y eso es todo por ahora… tratare de encontrar mas soluciones a este enorme problema…

Conoces una solucion mas???
funciona al 100%????
quieres compartirla con nosotros??….
pues envianos tus aportaciones a…. Tu Granito de Arena!!

Fix CSS “#Loquesea:hover” para IE 6

miguelortega — Mon, 29 Jun 2009 16:00:05 +0000

Bueno a la hora de revisar nuestros proyectos en diferentes navegadores y todos nos topamos con la inminente llegada del “FCK IE” y mas aun el IE6, siempre el enojo que por alguna razon que enverdad me la suda, no funcionan algunas propiedades CSS… y en este caso el ” *:hover ”

Si aveces… muchos implementadores con experiencia, ni saben que en el IE6 esta y otras propiedades CSS no andan, ya que maquetan a XHTML/CSS sin importarles si funciona o no en algun explorador, cumplen en tener sus codigos estandarizados (validos por la W3C); pero nosotros no somos asi (chiste) y nos gusta ser lo mas optimo para con nuestros clientes y/o visitantes de estos… asi que aqui les pongo 2 opciones o bien soluciones a este y otros problemas con el FKC IE…

Primera solución:
Whatever:hover
Link de la web del autor

Esta enfocada a solo resolver el “loquesea:hover” en IE6… es ligera, discreta y nos
vale para tener el famoso “li:hover” en nuestros menus y submenus… o igual nuestas “img:hover” en algunas ocaciones.

Descargar:
Esta ultima version nos arregla tambien el
:hover
:active
:focus

Descargar version ligera/paquetada

Descargar el codigo de fuente/sin empaquetar

Y como lo aplicamos?
Tan facil y sencillo como agregar esto en el body de nuestra hoja de estilos

1	body {behavior: url("csshover3.htc");}

Segunda Opcion:
En lo personal me gusta esta opcion ya que tiene mas arreglos… y aveces hace que nuestros proyectos, se vean casi igual en todos los IE…
:hover
:first-child
:background-image (transparencia PNG; pero no con imagenes en mosaico o bien que se repita)
:max-height – :min-height
:max-width – :min-width
position:fixed;
etc, etc… enfin una buena libreria js que nos ahorrara mucho tiempo y evitariamos miles de “Hacks” que solo nos dan un codigo CSS sucio, feo, e invalido… y diria que casi debe ser un complemento mas e imprescindible en nuestros proyectos.

Descargar:
La version actual es 2.0 beta 3
y podemos ver las otras versiones aqui del ie7 js en google

http://ie7-js.googlecode.com/svn/version/

Y como lo aplicamos?
Igual es sencillo si queremos una solucion rapida y externa podemos usar este codigo para actualizar cualquier version del IE anterior al IE7 con esto

1
2
3

tambien podemos usar esta libreria para actualizar cualquier version del IE anterior al IE8

1
2
3

si queremos podemos descargarnos la libreria e integrarla en nuestros proyectos y solo cambiamos la url del destino del archivo js ejemplo:

1
2
3

Ver demo enlinea