Ojo con esto!
Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas
Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas
viernes, 10 de febrero de 2012
miércoles, 4 de enero de 2012
Capas semi transparentes, opacidad en HTML CSS
Para los navegadores safari, explorer y mozilla hay que usar todo esto:
filter:alpha(opacity=86); opacity:0.86; -moz-opacity:0.86;
sábado, 26 de marzo de 2011
Wordpress Desactivar admin bar
El wordpress 3.1 viene con una nueva barra de administración en la cabecera.
En según que situaciones querrás eliminarla.
En este link lo explican perfectamente: http://www.webtips.es/deshabilitar-la-barra-de-administracion-en-wordpress/
Deshabilitar la barra de administración para todos los usuarios
Si lo que necesitas es deshabilitar la barra para todos los usuarios, tendrás que usar el siguiente método. En el archivo functions.php del template que estés usando, añade el siguente código:
La barra de administración ya no se mostrará para ningún usuario, aunque las opciones de configuración de la barra de administración (en Usuarios > Tu Perfil) siguen mostrándose. Vamos a ver cómo quitar esta parte de la pantalla de editar perfil.
En según que situaciones querrás eliminarla.
En este link lo explican perfectamente: http://www.webtips.es/deshabilitar-la-barra-de-administracion-en-wordpress/
Deshabilitar la barra de administración para todos los usuarios
Si lo que necesitas es deshabilitar la barra para todos los usuarios, tendrás que usar el siguiente método. En el archivo functions.php del template que estés usando, añade el siguente código:
function quitar_barra_administracion(){ return false; } add_filter( 'show_admin_bar' , 'quitar_barra_administracion'); |
miércoles, 9 de febrero de 2011
Cambiar de imagen de fondo de una capa (onmouseover) al pasar ratón por encima
Si quieres que al pasar por encima de una capa con imagen de fondo cambie la imagen de fondo:
estilos:
.capa1 {background-image:url(imagen.jpg);}
.capa1:hover {background-image:url(imagen-up.jpg);}
[div style="capa1">[/div>
Donde imagen.jpg es la imagen normal y imagen-up.jpg es la imagen al pasar por encima
estilos:
.capa1 {background-image:url(imagen.jpg);}
.capa1:hover {background-image:url(imagen-up.jpg);}
[div style="capa1">[/div>
Donde imagen.jpg es la imagen normal y imagen-up.jpg es la imagen al pasar por encima
CSS diferentes para explorer 7 y 8, firefox, etc.
Copio aquí la info para que cuando IExplorer 7 te haga la vida imposible puedas de forma simple colarle a él y solo él un CSS alternativo.
Fuente: http://granimpetu.com/articulos/hack-css-para-internet-explorer-7/
Fuente: http://granimpetu.com/articulos/hack-css-para-internet-explorer-7/
Particularmente soy bastante reacio a utilizar hacks CSS en mis diseños, principalmente porque me gusta que validen, aunque como sabemos que no lo hagano cambia en anda el aspecto visual en el navegador. Sin embargo, creo que es bueno conocerlos por si en algún momento sea necesario utilizarlos.
Con la última versión de Internet Explorer, es decir, la 7, los diseñadores tenemos un nuevo problema ya que no todo se ve igual que en Firefox ni que en IE6, por lo que a veces es necesario realizar modificaciones sólo para este navegador. Un hack conocido es el de colocar un asterisco delante de la propiedad CSS y así sólo será reconocida por Internet Explorer 6 y 7. Algo así:
Es decir, en Firefox, Opera y los demás navegadores el fondo será blanco, pero en Internet Explorer 6 y 7 el fondo será negro, ya que lee la propiedad con el asterisco, cosa que los demás navegadores pasan por alto. Es importante la ubicación, es decir, la propiedad con el asterisco debajo de la normal (respetando la cascada). Otra opción que se utiliza para dar diferentes estilos a navegadores es el uso de
Firefox, IE7, Opera, Safari y los demás tendrán fondo blanco, pero IE6 tendrá fondo negro. Ahora para crear un hack exclusivo para IE7 combinamos estas dos técnicas que hemos repasado. Es decir, agregando un asterisco e
De esta forma podremos lograr 3 estilos direfentes dependiendo el navegador que estemos usando, es decir, en el primer caso, Firefox y los demás navegadores tendrán fondo blanco, Internet Explorer 7 fondo negro e Internet Explorer 6 fondo gris.
Con la última versión de Internet Explorer, es decir, la 7, los diseñadores tenemos un nuevo problema ya que no todo se ve igual que en Firefox ni que en IE6, por lo que a veces es necesario realizar modificaciones sólo para este navegador. Un hack conocido es el de colocar un asterisco delante de la propiedad CSS y así sólo será reconocida por Internet Explorer 6 y 7. Algo así:
body {
background: #fff; /* Todos los navegadores */
*background: #000; /* IE6 e IE7 */
}Es decir, en Firefox, Opera y los demás navegadores el fondo será blanco, pero en Internet Explorer 6 y 7 el fondo será negro, ya que lee la propiedad con el asterisco, cosa que los demás navegadores pasan por alto. Es importante la ubicación, es decir, la propiedad con el asterisco debajo de la normal (respetando la cascada). Otra opción que se utiliza para dar diferentes estilos a navegadores es el uso de
!important lo cual es aceptado por Firefox, IE7 y los demás navegadores, pero no por IE6. Por lo que se utiliza cuando no queremos dar cierta propiedad a IE6. Lo bueno de esto es que si valida y así se usa:body {
background: #fff !important; /* Firefox, IE7 y los demás */
background: #000; /* IE6 y anteriores */
}Firefox, IE7, Opera, Safari y los demás tendrán fondo blanco, pero IE6 tendrá fondo negro. Ahora para crear un hack exclusivo para IE7 combinamos estas dos técnicas que hemos repasado. Es decir, agregando un asterisco e
!important a la propiedad. Lo hacemos de la siguiente manera:body {
background: #fff !important; /* Firefox y los demás */
*background: #000 !important; /* Sólo IE7 */
*background: #ccc; /* Sólo IE6 */
}De esta forma podremos lograr 3 estilos direfentes dependiendo el navegador que estemos usando, es decir, en el primer caso, Firefox y los demás navegadores tendrán fondo blanco, Internet Explorer 7 fondo negro e Internet Explorer 6 fondo gris.
lunes, 15 de noviembre de 2010
HTML + CSS: Centrar en Explorer
Resulta que centras una capa CSS así:
margin-left:auto; margin-right:auto;
y funciona en mozilla pero no en explorer.
Pues para que vaya en explorer hay que poner esto en la primera linea de tu archivo html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
(vaya tela no?!)
margin-left:auto; margin-right:auto;
y funciona en mozilla pero no en explorer.
Pues para que vaya en explorer hay que poner esto en la primera linea de tu archivo html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
(vaya tela no?!)
jueves, 21 de mayo de 2009
Problemas anidando div CSS - Problema de ajuste de altura o height con capas
A veces puede ocurrir que cuando una capa (1) que dentro tiene a su vez otra capa (2) (anidada) dentro, al abrir nuevos divs a continuación el div se presenta debajo de la capa anidada, es decir:
NO SE AJUSTA LA CAPA 1 A LA ALTURA DE LA CAPA 2 (anidada)
y cuando abrimos nuevas capas se nos jode el invento a no ser que usemos height... y no queremos usar height sino que queremos que todo se ajuste en función de la altura de la capa2!
Pues hay un truco que es crear una capa con esta característica:
.ajustar{
clear:both;
}
Entonces la cosa queda así:
<div class="capa1">
<div class="capa2"></div>
<div class="capa3"></div>
</div>
<div class="ajustar"></div>
<div class="capa4"></div>
Con este esquema y con la propiedad clear:both; nos queda la capa4 que se muestra en función del tamaño de la capa2 y 3, es decir que la capa1 se ajusta a sus capas anidadas!!
Joder que lio no? Espero que sirva de algo
NO SE AJUSTA LA CAPA 1 A LA ALTURA DE LA CAPA 2 (anidada)
y cuando abrimos nuevas capas se nos jode el invento a no ser que usemos height... y no queremos usar height sino que queremos que todo se ajuste en función de la altura de la capa2!
Pues hay un truco que es crear una capa con esta característica:
.ajustar{
clear:both;
}
Entonces la cosa queda así:
<div class="capa1">
<div class="capa2"></div>
<div class="capa3"></div>
</div>
<div class="ajustar"></div>
<div class="capa4"></div>
Con este esquema y con la propiedad clear:both; nos queda la capa4 que se muestra en función del tamaño de la capa2 y 3, es decir que la capa1 se ajusta a sus capas anidadas!!
Joder que lio no? Espero que sirva de algo
Suscribirse a:
Entradas (Atom)
