Como sobreescribir reglas?

[severicks]

como puedo sobreescribir reglas para que se apliquen segun lo que soporte un navegador, por ejemplo en zengarden www . csszengarden.com/?cssfile=/057/057.css&page=0 incluso muestra un mensage solo con css si el navegador no soporta ciertas reglas escritas en el archivo.css y si la soporta solo sobreescribe la regla para no mostrar nada.

por ejemplo tengo estas reglas q me funcionan perfecto en firefox pero en IE8 o menor simplemente me desaparece el tag h1

Código:

div#header h1{
	position:absolute;
	top: 32px;
	font-weight:normal;
	font:Georgia, "Times New Roman", Times, serif;
	letter-spacing:.3em;
	text-shadow:#CCC 4px 3px 2px;
	font-size: 0.9em;
	padding:0;
	color:#999;
	text-indent:23em;
}
h1.logo, div#header h1.logo{
	position:inherit;
	font:Georgia, "Times New Roman", Times, serif #;
	color:#666;
	letter-spacing:.1em;
	font-weight:500; 
	font-style:oblique; 
	font-size:2em; 
	text-indent:inherit;
	padding:0;
	}

por mas q intento no puedo sobreescribir esas dos reglas para que los h1 se muestren IE8

[mayid]

font:Georgia, "Times New Roman", Times, serif #;

Estas super seguro de estas lineas? Cuando declaras la fuente, a veces usas comillas, a veces no, e incluso aparece un caracter de almohadilla.

Mismo, creo que la manera correcta es font-family, y no solo "font".

Si lo que estas buscando es un condicional CSS para detectar Internet Explorer, existen. Y podes buscarlos asi en google: "condicionales css para IE".

[severicks]

lo que quiero lograr es el mismo efecto q en esta pagina www . csszengarden.com/?cssfile=/057/057.css&page=0 q solamente con css muestra diferentes diseños para diferentes navegadores segun las reglas de css q estos puedan interpretar. solamente con css sin tocar el html ni nada de javascript.

no te fijes en si si el codigo esta mal escrito, sino q como puedo sobreescribir esas reglas

[CidDeMizar]

Hola compañero.
Por lo que sé, en CSS Zen Garden no hay una página que coge distintos CSS, sino que, en realidad, son varias páginas que cogen varios CSS. Me explico. Haces una página con el contenido que quieras, sin aplicarle ningún CSS. Después, te puedes crear distintas hojas CSS externas que hagan referencia a los distintos id y clases que hayas usado en tu página de contenidos. Una vez hecho esto, en la página de contenidos, vinculas la hoja CSS que desees. De esta forma, en función de la hoja CSS que vincules, tu página de contenidos tendrá un aspecto diferente.

Una forma de hacer esto dinámico, podría ser usando ASP o PHP, mediante los cuales sí que podrías asignar dinámicamente una hoja de estilos diferente a la misma página de forma dinámica.

En CSS Zen Garden lo que tienen es, básicamente, la misma página repetida por cada uno de los estilos CSS creados y cada una de esas páginas con un include a cada hoja CSS distinta.

[severicks]

Estas totalmente equibocado CidDeMizar zengarden es precisamente todo lo contrario de lo q acabas de decir, la idea es cambiar totalmente la apariencia de la pagina modificando solamente el archivo css sin tocar ni una sola letra del codigo html de la pagina, si no me crees lee lo q dice en todas las paginas de zengarden. No me refiero al sitio zengarden sino al css de las paginas q estan en zengarden como csszengarden.com/?cssfile=/057/057.css&page=0 si la vez en ie6 aparece un mensage y el menu es diferente a q lo veas en firefox3.5

Solo con css hacen q el diseño se muestre de manera diferente no reconociendo el navegador q las esta leyendo, sino sobreescribiendo las reglas, es decir, si un navegador no soporta una regla q tenga p{position:absolute,} este simplemente va a ignorar esa regla asi q se asigna otra regla para 'p' q sobreescriba la anterior para estilizar ese tag.

La cuestion es q no logro sobreescribir esa regla, aun q asigne otra regla mas abajo en la cascada el navegador sigue ignorando la regla para 'p' y simplemente no muestra el tag.

[pitufoweb]

Hola.

También necesitamos ver tu código HTML.


Saludos
Bye

[severicks]

Por ejemplo este banner hecho con css

Código HTML:

div#one{
	background:url(images/branding.png) no-repeat;
	margin: 0;
	margin-bottom: 15px;
	padding: 0;
	width: 100%;
	height: 165px;
	position: relative;
}
h2{
	z-index: 3;
	background: url(images/branding_h1.png) no-repeat;
	position: relative;
	left: -3%;
	top: -0.5%;
	width: 100%;
	height: 178px;
	margin: 0;
	margin-bottom:
	padding: 0;
}
div#one h2 a{
	display: block;
	width: 379px;
	height : 178px;
	text-indent: -9999px;
	overflow: hidden;
}
div#one blockquote{	z-index: 2;
	clear:both;
	position: relative;
	left: 42%;
	top: -78%;
	width: 199px;
	height: 103px;
	margin: 0;
	padding:0;
	background: url(images/branding_blockquote.png) no-repeat;
	text-indent: -999999px;
}
div#one p{
	z-index:1;
	display: block;
	clear:both;
	position:relative;
	right: -70%;
	top: -217%;
	width: 340px;
	height: 291px;
	margin: 0;
	paddind: 0;
	background: url(images/branding_p.png) no-repeat;	
}

div#one p a{
	display: block;
	width: 340px;
	height : 291px;
	text-indent: -9999px;
	overflow: hidden;
}

Código HTML:

<div id="one">
    	<h2>
        	<a href="images/branding_p.png"> Este es es titulo del branding
            </a>
        </h2>
    	<blockquote> dont worry about a thing, cuz every little thing is wona be alrigth</blockquote>
    	<p> <a href="exercise files/PC Exercise Files/Chapter_07/07_02/images/fir_1.png"> una demostracion de nosque</a></p>
    </div> 

En IE6 no muestra los tags <blockquote> ni<p>, ahora bien, no me digan q haga una sola imagen y la ponga como banner q eso ya lo se hacer, eso es solo un ejemplo. El problema es para otras partes en q juntar todo en una imagen no es una opcion insito el ejemplo es esta pagina http://www.csszengarden.com/?cssfile...057.css&page=0 q solo con css muestra diferentes versiones de la misma pagina segun las propiedades de css q el navegador pueda interpretar

[severicks]

nadie sabe como hacerlo? un ejemplo mejor simpre de zen garden esta pagina si la ven en un navegador reciente como ff3 veran un diseño con un scroll al medio y un menu en css pero si la ven en ie6 por ejemplo veran un diseño totalmente diferente. como se logra eso solamente con css? sin usar java, php ni ningun otro scripting lenguage

[Mikmoro]

Sölo tienes que mirar la hoja de estilo para averiguarlo:
http://www.csszengarden.com/062/062.css

[severicks]

ese es el punto, yo aun estoy aprendiendo, mi nivel aun es basico y aun q vea el codigo css no comprendo como es q funciona, lo he intentado haciendo reglas simples pero nunca logro q se apliquen diferentes reglas para ie6 sin tener q usar javascript.

por eso pregunto si alguien me puede explicar como es q funciona

[Mikmoro]

Pues es complicado y sencillo a la vez: en primer lugar usa unas reglas normales en una hoja de estilo, como:

#container { position: relative; margin: 0 ... etc.

y luego usa unas reglas que IE6 no entiende, como:

body[id=css-zen-garden] #container { position: relative; margin: 0 0 0 0; etc.

De manera que IE6 usarás las primeras reglas y el resto de navegadores las segundas.

¿Por qué IE no las entiende? eso sí es ya más largo y complicado de explicar, y deberás documentarte un poco sobre relgas CSS2 e IE6, ya que es todo un mundo como para decir en dos patadas.