Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 13 de 13

Tema: Abuelo, padre e hijo. Comandos CSS

  1. #1
    Me va gustando esto... Habitante
    Fecha de Ingreso
    26 jul, 13
    Mensajes
    116
    Poder de Reputación
    12

    Abuelo, padre e hijo. Comandos CSS

    Buenas a todos:

    Tengo cierta duda que he estado intentado solucionar por internet pero sin exito. Estoy creando una web para reformar la antigua, esta nueva web va a tener un fondo en el body de color negro, un div que ocupa casi toda la página (como si fuese un segundo body) con una imagen de fondo ya adaptada. Dentro de este div tengo creado otro div con formato de cuadro por encima de la imagen. En este último le otorgue un opacity para dar un aspecto diferente a la página, y el problema o duda con la que me encuentro ahora es el siguiente; dentro de este último estoy comenzando a crear la página (menus, enlaces, etc) y resulta que la propiedad opacity esta siendo heredada por los hijos dentro del cuadro, yo no quiero que esto suceda si no que, todos los hijos del cuadro con esta propiedad sean sólidos.

    Asi es como esta ahora (perdon si la imagen no se ve o es pequeña):
    Archivo Adjunto 706

    Me gustaría que ese menu (y lo que venga dentro del cuadro blanco semitransparente) sea sólido, es decir, sin heredar la propiedad opacity.

    Muchas gracias por adelantado.

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,077
    Poder de Reputación
    26
    Hola!

    En CSS, todas las propiedades se sobreescriben de acuerdo al orden que aparezcan. Esto quiere decir que, suponiendo el siguiente código:

    Código HTML:
    body { color: red; }
    
    body { color: orange; }
    
    body { color: blue; }
    El color final de la letra será azul (blue), puesto que es la última propiedad que aparece.

    Como norma, las propiedades se reemplazan unas a otras de la siguiente forma:

    1. Las propiedades escritas en la hoja de estilo reemplazan a las del navegador (el navegador tiene estilos por defecto).
    1.a. Las propiedades se reemplazan a si mismas en el orden de aparición (las últimas del archivo, por ejemplo, reemplazarán a las primeras).
    2. Las propiedades escritas en el archivo HTML (con la etiqueta <style>) reemplazarán a las del archivo CSS (y también a las del navegador). Ocurre lo mismo que el punto 1.a.
    3. Las propiedades declaradas dentro de cada etiqueta reemplazarán a las anteriores.
    4. Las propiedades declaradas con important! reemplazarán a todas las demás.

    Si bien así funciona la herencia, no es buena idea re-declarar una propiedad para una misma etiqueta (de hecho, el navegador mostrará una advertencia diciendo que esta propiedad ya fue declarada).

    Sobre tu problema, bastaría con declarar algo como esto:

    Código:
    #padre #hijo { opacity: 1.0; filter: alpha(opacity=100); }
    Si eso no funciona, entonces algo así debería:

    Código:
    #padre #hijo * { opacity: 1.0; filter: alpha(opacity=100); }

  3. #3
    Me va gustando esto... Habitante
    Fecha de Ingreso
    26 jul, 13
    Mensajes
    116
    Poder de Reputación
    12
    Buenas skaparate:

    Decir que he intentado los dos códigos que me has facilitado y no he logrado quitar esa transparencia. Dejo mi código css para que sea revisado, y en caso de que halla colocado mal el código que me diste saber si me podrias pasar el código en su forma correcta:

    Dejo un comentario dentro del css explicando lo que coloque.

    CSS:
    Código:
    #pagina {
    	width: 70%;
    	height: 100%;
    	margin: 0 auto;
    	background-color: #FFFFFF;
    	opacity: 0.65; /* Hace el fondo medio transparente */
    	}
    /* Esta etiqueta "pagina" es donde cree el fondo blanco encima de la imagen con la transparencia. El código que viene debajo seria como implemente el código que me pasaste, y la etiqueta "texto" es un div que tengo creado para colocar texto en la web */
    
    #pagina #texto * { opacity: 1.0; filter: alpha(opacity=100); }
    
    #texto {
            background-color: #FFFFFF;
            opacity: 1.0;
    	width: 65%;
    	height: 450px;
    	border-style: solid;
    	position: relative; left: 8.8px;
    	font-weight: bold;
    	font-size: 20px;
    }

  4. #4
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,077
    Poder de Reputación
    26
    ¿Podrías poner el código HTML también?

  5. #5
    Me va gustando esto... Habitante
    Fecha de Ingreso
    26 jul, 13
    Mensajes
    116
    Poder de Reputación
    12
    Dejo el código HTML completo, el css dejo casi todo, la parte donde tengo programadas unas animaciones no las pongo dado que no creo que sea necesario:

    HTML:
    Código HTML:
    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
    <title>Gruas Copa</title>
    
    <meta name="description" content=""> <!-- Descripción de la web -->
    <meta name="keywords" content=""> <!-- Palabras clave -->
    <meta name="author" content="Alexander Marques"> <!-- Autor de la web -->
    <meta charset="UTF-8">
    
    <link rel="icon" type="image/png" href=""/> <!-- Imagen favicon de la pestaña -->
    <link rel="stylesheet" type="text/css" href="estilos.css"> <!-- Enlace a la hoja estilos -->
    
    </head>
    
    <body>
    
    <div id="body">
    <div id="pagina">
    <!-- Cabecera -->
    	<header>
    		<!-- Menu -->
    			<ul id="menu">
    				<a href=""><li class="menu">Home</li></a>
    				<a href=""><li class="menu">Serviços</li></a>
    				<a href=""><li class="menu">Empresa</li></a>
    				<!-- Menus desplegables -->
    					<li class="menu">Produtos
    
    						<ul id="sub_1">
    
    							<li class="sub_1">Acessorios
    								<ul id="sub_2">
    									<a href=""><li class="sub_2">Garfo</li></a>
    								</ul>						
    							</li>
    
    							<li class="sub_1">Gruas
    								<ul id="sub_2">
    									<a href=""><li class="sub_2">Auto-estaveis</li></a>
    									<a href=""><li class="sub_2">Auto-montaveis</li></a>
    									<a href=""><li class="sub_2">Telescopadas</li></a>
    								</ul>
    							</li>
    
    						</ul>
    
    					</li>
    
    					<a href=""><li class="menu">Contato</li></a>
    			</ul>
    		<!-- Gruas Copa -->
    			<div id="gruas_titulo">
    				<span class="gruas">
    					<span class="letra_1">G</span>
    					<span class="letra_2">R</span>
    					<span class="letra_1">U</span>
    					<span class="letra_2">A</span>
    					<span class="letra_1">S </span>
    				</span>
    				<span class="copa">
    					<span class="letra_1"> C</span>
    					<span class="letra_2">O</span>
    					<span class="letra_1">P</span>
    					<span class="letra_2">A</span>
    				</span>
    			</div>
    	</header>
    <!-- Cuerpo -->
    	<section id="cuerpo">
    
    		<div id="imagenes">
    			<div class="imagen_1"></div>
    			<div class="imagen_2"></div>
    		</div>
    		
    		<div id="texto">
    		</div>
    
    		<div id="otros">
    		</div>
    
    	</section>
    </div>
    </div>
    <!-- Pie de página -->
    	<footer>
    		<div id="logo"><img src="imagenes/logos/logo.png" alt="Gruas Copa logo" title="Gruas Copa logo"></div>
    		<div id="text">
    			<p>A éxperiência é uma lanterna dependurada nas costas que apenas ilumina o caminho ja percorrido...</p>
    			<p><a href="http://https://www.google.com.br/maps/preview?q=rua+joao+kaufmann+785+rochdale&ie=UTF-8&ei=JUeXU9foFoTesASQuoHQAw&ved=0CAYQ_AUoAQ" target="_Blank">Rua João Kauffman 785 Rochedale-CEP: 06220-060-Osasco-SP</a></p>
    			<p>Horario de atendimento: Segunda - Sexta 8:00 - 13:00 ; 15:00 - 18:00</p>
    		</div>
    	</footer>
    
    </body>
    </html>
    CSS:

    Código:
    /* Programación de estilos */
    	body {
    		min-width: 1310px;
    		min-height: 770px;
    		background-color: #000000;
    	}
    	#body {
    		width: 1335px;
    		height: 770px;
    		margin: 0 auto;
    		background-image: url("imagenes/fondos/fondo_3.jpg"); /* Imagen de fondo del div */
    		background-size: cover; /* Hace que la imagen de fondo se ajuste al tamaño del div */
    	}
    	#pagina {
    		width: 70%;
    		height: 100%;
    		margin: 0 auto;
    		background-color: #FFFFFF;
    		opacity: 0.65; /* Hace el fondo medio transparente */
    	}
    	/* Cabecera */
    		/* Menu */
    			#menu {
    				display: block;
    				list-style: none;
    				width: 895px; height: 50px;
    				background-color: #000000;
    				color: #FFFFFF;
    				font-weight: bold;
    				font-size: 20px;
    			}
    			#menu a {
    				text-decoration: none;
    				color: #FFFFFF;
    				font-weight: bold;
    			}
    			#menu .menu {
    				float: left;
    				display: block;
    				background-color: #000000;
    				height: 20px;
    				padding: 15px;
    				color: #FFFFFF;
    				font-weight: bold;
    			}
    			#menu .menu:hover {
    				cursor: pointer; /* Para que se vea la mano cuando estamos encima del "producto" */
    				color: #FF0000;
    				transition: all 0.6s;
    			}
    			#menu .menu #sub_1 {
    				display: none;
    				list-style: none;
    				background-color: #000000;
    				position: relative;
    				top: 12px;
    				padding: 10px;
    				z-index: 2; /* Para que el sub-menu se vea por encima del titulo de Gruas Copa */
    			}
    			#menu .menu:hover > #sub_1 {
    				display: block;
    				cursor: pointer;
    			}
    			#menu .menu #sub_1 .sub_1 {
    				padding: 10px;
    				color: #FFFFFF;
    			}
    			#menu .menu #sub_1 .sub_1:hover {
    				color: #FF0000;
    				transition: all 0.6s;
    			}
    			#menu .menu #sub_1 .sub_1 #sub_2 {
    				display: none;
    				background-color: #000000;
    			}
    			#menu .menu #sub_1 .sub_1:hover > #sub_2 {
    				display: block;
    				cursor: pointer;
    			}
    			#menu .menu #sub_1 .sub_1 #sub_2 .sub_2 {
    				background-color: #000000;
    				color: #FFFFFF;
    				text-decoration: none;
    				padding: 10px;
    			}
    			#menu .menu #sub_1 .sub_1 #sub_2 .sub_2:hover {
    				color: #FF0000;
    				transition: all 0.6s;
    			}
    		/* Gruas Copa */
    			#gruas_titulo {
    				font-family: fantasy;
    				font-size: 40px;
    				text-align: center;
    			}
    			.gruas {
    				position: relative;
    				right: 10px;
    				-webkit-animation-name: gruas;
    				-webkit-animation-duration: 20s;
    				-webkit-animation-iteration-count: infinite;
    				-moz-animation-name: gruas;
    				-moz-animation-duration: 20s;
    				-moz-animation-iteration-count: infinite;
    				-o-animation-name: gruas;
    				-o-animation-duration: 20s;
    				-o-animation-iteration-count: infinite;
    				animation-name: gruas;
    				animation-duration: 20s;
    				animation-iteration-count: infinite;
    			}
    			.copa {
    				position: relative;
    				left: 10px;
    				-webkit-animation-name: copa;
    				-webkit-animation-duration: 20s;
    				-webkit-animation-iteration-count: infinite;
    				-moz-animation-name: copa;
    				-moz-animation-duration: 20s;
    				-moz-animation-iteration-count: infinite;
    				-o-animation-name: copa;
    				-o-animation-duration: 20s;
    				-o-animation-iteration-count: infinite;
    				animation-name: copa;
    				animation-duration: 20s;
    				animation-iteration-count: infinite;
    			}
    			.letra_1 {
    				color: #FF0000;
    			}
    			.letra_2 {
    				color: #000000;
    			}
    
    	/* Cuerpo */
    		/* Texto */
    			#texto {
    				width: 65%;
    				height: 450px;
    				position: relative; left: 8.8px;
    				font-weight: bold;
    				font-size: 20px;
    				border-style: solid;
    			}
    		/* Imagenes */
    			#imagenes {
    				width: 30%;
    				height: 450px;
    				float: right;
    				position: relative; right: 8.8px;
    			}
    			.imagen_1 {
    				width: 260px;
    				height: 210px;
    				margin: 0 auto;
    				position: relative; top: 5px;
    				background-image: url("imagenes/gruas/grua_1.jpg");
    				background-size: cover;
    				-webkit-animation-name: imagen;
    				-webkit-animation-duration: 24s;
    				-webkit-animation-iteration-count: infinite;
    				-moz-animation-name: imagen;
    				-moz-animation-duration: 24s;
    				-moz-animation-iteration-count: infinite;
    				-o-animation-name: imagen;
    				-o-animation-duration: 24s;
    				-o-animation-iteration-count: infinite;
    				animation-name: imagen;
    				animation-duration: 24s;
    				animation-iteration-count: infinite;
    			}
    			.imagen_2 {
    				width: 260px;
    				height: 210px;
    				margin: 0 auto;
    				position: relative; top: 10px;
    				background-image: url("imagenes/gruas/grua_2.jpg");
    				background-size: cover;
    				-webkit-animation-name: imagene;
    				-webkit-animation-duration: 24s;
    				-webkit-animation-iteration-count: infinite;
    				-moz-animation-name: imagene;
    				-moz-animation-duration: 24s;
    				-moz-animation-iteration-count: infinite;
    				-o-animation-name: imagene;
    				-o-animation-duration: 24s;
    				-o-animation-iteration-count: infinite;
    				animation-name: imagene;
    				animation-duration: 24s;
    				animation-iteration-count: infinite;
    			}
    		/* Otros */
    			#otros {
    				width: 98%;
    				height: 150px;
    				margin: 0 auto;
    				border-style: solid;
    				position: relative; top: 15px;
    			}
    
    	/* Pie de página */
    		footer {
    			width: 1330px;
    			height: 170px;
    			text-align: center;
    		}
    		#logo {
    			width: 120px;
    			height: 130px;
    			position: relative;
    			left: 5px;
    			top: 22px;
    			background-color: #FFFFFF;
    			float: left;
    		}
    		footer #text {
    			color: #FFFFFF;
    			width: 930px;
    			height: 130px;
    			margin: 0 auto;
    			position: relative;
    			top: 22px;
    		}
    		footer a {
    			color: #FFFFFF;
    			text-decoration: underline;
    		}
    		footer a:hover {
    			color: #FF0000;
    			transition: all 0.6s;
    		}

  6. #6
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,077
    Poder de Reputación
    26
    Hmmm... hay algo que acabo de aprender.

    Cuando se utiliza opacity, el navegador aplica esta propiedad al grupo de etiquetas (padre e hijos) para mostrarlos todos de una vez a través de un bufer (piensa en el bufer como una imagen que se dibuja una sola vez, cada vez que se actualiza la página), no se hereda. Esto quiere decir que no se puede utilizar opacity sin que afecte a todas las etiquetas hijas del elemento.

    Puedes utilizar rgba(rojo, verde, azul, transparencia) para dar la opacidad que deseas:

    Código:
    #texto { background-color: rgba(0, 255, 0, 0.5) }

  7. #7
    Me va gustando esto... Habitante
    Fecha de Ingreso
    26 jul, 13
    Mensajes
    116
    Poder de Reputación
    12

    Una pregunta mas.

    Muchas gracias, coloque el código que me facilitaste y funciono.

    Se que debería crear otros hilos para estas dos preguntas, pero prefiero hacerlo aquí para no llenar el foro con cosas que seguramente ya fueron resueltas y no encuentro su hilo.

    Tengo una animación en uno de los div de esta página, y por alguna razón (seguramente algún error programando que no encuentro) la animación no me funciona el IE (hasta ahora solo probé en Chrome). Dejo los estilos css de la animación para ver que puede estar pasando, los códigos que ejecutan esta animación se encuentran en el código css ya pasado en la sección: cuerpo/imagenes (esto siguiendo los comentarios escritos en dicho código).

    Ademas de esto, estuve investigando sobre los comentarios condicionales para IE (incluso llegue a realizar un tutorial escrito en el foro y sin éxito) con la mala fortuna de que, estando el código correctamente introducido en la página (incluso llegue a copiar y pegar) estos comentarios no me funcionaban, es decir, los estilos que supuesta mente debían funcionar solo en el IE estaban formatando los estilos para cualquier navegador.

    CSS de la animación:
    Código:
    /* Animación Diapositiva de imagenes index */
    		@-webkit-keyframes imagen {
    			0% {background-image: url("imagenes/gruas/grua_1.jpg");background-size: cover;}
    			33% {background-image: url("imagenes/gruas/grua_3.jpg");background-size: cover;}
    			66% {background-image: url("imagenes/gruas/grua_5.jpg");background-size: cover;}
    			100% {background-image: url("imagenes/gruas/grua_7.jpg");background-size: cover;}
    		}
    		@-webkit-keyframes imagene {
    			0% {background-image: url("imagenes/gruas/grua_2.jpg");background-size: cover;}
    			33% {background-image: url("imagenes/gruas/grua_4.jpg");background-size: cover;}
    			66% {background-image: url("imagenes/gruas/grua_6.jpg");background-size: cover;}
    			100% {background-image: url("imagenes/gruas/grua_8.jpg");background-size: cover;}
    		}
    		@-moz-keyframes imagen {
    			0% {background-image: url("imagenes/gruas/grua_1.jpg");background-size: cover;}
    			33% {background-image: url("imagenes/gruas/grua_3.jpg");background-size: cover;}
    			66% {background-image: url("imagenes/gruas/grua_5.jpg");background-size: cover;}
    			100% {background-image: url("imagenes/gruas/grua_7.jpg");background-size: cover;}
    		}
    		@-moz-keyframes imagene {
    			0% {background-image: url("imagenes/gruas/grua_2.jpg");background-size: cover;}
    			33% {background-image: url("imagenes/gruas/grua_4.jpg");background-size: cover;}
    			66% {background-image: url("imagenes/gruas/grua_6.jpg");background-size: cover;}
    			100% {background-image: url("imagenes/gruas/grua_8.jpg");background-size: cover;}
    		}
    		@-o-keyframes imagen {
    			0% {background-image: url("imagenes/gruas/grua_1.jpg");background-size: cover;}
    			33% {background-image: url("imagenes/gruas/grua_3.jpg");background-size: cover;}
    			66% {background-image: url("imagenes/gruas/grua_5.jpg");background-size: cover;}
    			100% {background-image: url("imagenes/gruas/grua_7.jpg");background-size: cover;}
    		}
    		@-o-keyframes imagene {
    			0% {background-image: url("imagenes/gruas/grua_2.jpg");background-size: cover;}
    			33% {background-image: url("imagenes/gruas/grua_4.jpg");background-size: cover;}
    			66% {background-image: url("imagenes/gruas/grua_6.jpg");background-size: cover;}
    			100% {background-image: url("imagenes/gruas/grua_8.jpg");background-size: cover;}
    		}
    		@keyframes imagen {
    			0% {background-image: url("imagenes/gruas/grua_1.jpg");background-size: cover;}
    			33% {background-image: url("imagenes/gruas/grua_3.jpg");background-size: cover;}
    			66% {background-image: url("imagenes/gruas/grua_5.jpg");background-size: cover;}
    			100% {background-image: url("imagenes/gruas/grua_7.jpg");background-size: cover;}
    		}
    		@keyframes imagene {
    			0% {background-image: url("imagenes/gruas/grua_2.jpg");background-size: cover;}
    			33% {background-image: url("imagenes/gruas/grua_4.jpg");background-size: cover;}
    			66% {background-image: url("imagenes/gruas/grua_6.jpg");background-size: cover;}
    			100% {background-image: url("imagenes/gruas/grua_8.jpg");background-size: cover;}
    		}
    Por si acaso coloque el código donde ejecuto estas animaciones:

    2º CSS:

    Código:
    /* Imagenes */
    			#imagenes {
    				width: 30%;
    				height: 450px;
    				float: right;
    				position: relative; right: 8.8px;
    			}
    			.imagen_1 {
    				width: 260px;
    				height: 210px;
    				margin: 0 auto;
    				position: relative; top: 5px;
    				background-image: url("imagenes/gruas/grua_1.jpg");
    				background-size: cover;
    				-webkit-animation-name: imagen;
    				-webkit-animation-duration: 24s;
    				-webkit-animation-iteration-count: infinite;
    				-moz-animation-name: imagen;
    				-moz-animation-duration: 24s;
    				-moz-animation-iteration-count: infinite;
    				-o-animation-name: imagen;
    				-o-animation-duration: 24s;
    				-o-animation-iteration-count: infinite;
    				animation-name: imagen;
    				animation-duration: 24s;
    				animation-iteration-count: infinite;
    			}
    			.imagen_2 {
    				width: 260px;
    				height: 210px;
    				margin: 0 auto;
    				position: relative; top: 10px;
    				background-image: url("imagenes/gruas/grua_2.jpg");
    				background-size: cover;
    				-webkit-animation-name: imagene;
    				-webkit-animation-duration: 24s;
    				-webkit-animation-iteration-count: infinite;
    				-moz-animation-name: imagene;
    				-moz-animation-duration: 24s;
    				-moz-animation-iteration-count: infinite;
    				-o-animation-name: imagene;
    				-o-animation-duration: 24s;
    				-o-animation-iteration-count: infinite;
    				animation-name: imagene;
    				animation-duration: 24s;
    				animat
    Última edición por alex222en; 24/03/2015 a las 17:25

  8. #8
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,077
    Poder de Reputación
    26
    Hmm, no tengo experiencia con las animaciones CSS, así que no te puedo ayudar.

    Sobre las etiquetas condicionales, eso es raro, pues no debería ocurrir. ¿Tienes el código html? Para ver por qué ocurre :P

  9. #9
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,332
    Poder de Reputación
    22
    Otra cosa, qué versión de IE utilizas para hacer tus pruebas? No todos tienen el mismo soporte (si ya la última versión de IE es mala, imagínate las primeras xD).

  10. #10
    Me va gustando esto... Habitante
    Fecha de Ingreso
    26 jul, 13
    Mensajes
    116
    Poder de Reputación
    12
    Cita Iniciado por Doodleo Ver Mensaje
    Otra cosa, qué versión de IE utilizas para hacer tus pruebas? No todos tienen el mismo soporte (si ya la última versión de IE es mala, imagínate las primeras xD).
    Buenas doodleo:

    Decir que la version que uso del IE es la version 10, pero desde la consola emulo las otras versiones de IE. Con respecto al código html decir que esta incrustado ariiba en uno de mis mensajes anteriores (eso si, sin los comentarios condicionales). Los comentarios se los quite justamente porque no me funcionaban; ademas de mirar códigos de comentarios condicionales en google, estuve mirando en este link (http://www.comocreartuweb.com/consul...os-navegadores) que pertenece al foro mismo, y despues de seguir todos los pasos seguia sin funcionarme. Ademas de eso uno de los enlaces dentro de ese hilo esta roto (creo que no tiene importancia porque era donde se explica porque a los programadores web no les gusta el IE). Si quieres que te pase la página que te estoy programando a traves del correo electronico lo veo mas facil dado que, en la consola de gerenciador de archivos subidos aqui en el foro no logro borrar los anteriores archivos y ya use todo el espacio que tenia disponible.

    Aqui abajo te dejo un ejemplo de como tenia introducido el comentario condicional (una de las varias maneras que intente y que creo ser la manera correcta):

    Código:
    <!DOCTYPE html>
    
    <head>
    
    <title></title>
    
    <!--[if IE]> <link rel="stylesheet" type="text/css" href="estilos-ie.css"> <![endif]-->
    
    </head>
    
    ....
    Ademas tambien lo intente colocando el comentario condicional del siguiente modo <!--[if expresion]> [endif]-->. Tambien intente colocando este mismo comentario en la hoja estilos, en la hoja estilos y html, solo en html, incluso se me ocurrio varias maneras locas de implementar lo a traves de javascript (del cual casi no tengo dominio pero con ayuda de google y w3school va mas o menos). Ahora mismo no estoy tan desesperado con esto puesto que la nueva página que estoy creando se ve casi igual en chrome como en IE.

    Te agradezco que intentes ayudarme.

  11. #11
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,077
    Poder de Reputación
    26
    Irónicamente, los comentarios condicionales no funcionan en IE 10 en modo estándar (<!DOCTYPE html> es el modo estándar), según dice este artículo (en inglés).

    Independiente de esto, no deberían integrarse los estilos que están comentados. ¿Puede que la página aún esté en la caché? Prueba presionando Control + F5 para recargar la página.

  12. #12
    Me va gustando esto... Habitante
    Fecha de Ingreso
    26 jul, 13
    Mensajes
    116
    Poder de Reputación
    12
    Voy a intentarlo y comentare, lo que mas me urge ahora de las dos preguntas seria mas la de la animacion, dado que la página se casi igual en todos los navegadores pero la animacion no me funciona en IE

  13. #13
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,332
    Poder de Reputación
    22
    Por ahí he leido que las animaciones en principio funcionan perfectamente en IE10, pero no el cambio de imagen de fondo como animación... Aunque no te puedo asegurar nada.

Temas Similares

  1. Elemento hijo que ocupe toda la pantall!
    Por JainJude en el foro Todo sobre Estilos CSS
    Respuestas: 0
    Último Mensaje: 29/07/2019, 15:32
  2. Elemento hijo que ocupe toda la pantalla
    Por Doodleo en el foro Todo sobre Estilos CSS
    Respuestas: 1
    Último Mensaje: 11/06/2014, 00:42
  3. Problema para rellenar el espacio sobrante en el div padre
    Por Elena2 en el foro Webs con Capas o DIVS
    Respuestas: 0
    Último Mensaje: 20/02/2011, 21:15
  4. GRACIAS A DIOS, NUESTRO PADRE ETERNO. CÓDIGO LOGRADO
    Por elescritorsolitario en el foro Cuarentena - Papelera
    Respuestas: 3
    Último Mensaje: 02/01/1970, 14:23

Etiquetas para este Tema

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •