Trivia: Conceptos CSS

[Mikmoro]

En teoría y en la práctica, Raulmmmm, porque ese código en IE7 hace el efecto que debe hacer, vamos, que funciona perfectamente. No sé a qué te refieres.

[DragonX]

En IE7 funciona a la perfección, el problema esta en IE6

[diegoy2k]

Perdon me equivoque!!!

[Raulmmmm]

Pues yo copio y pego este código:

Código HTML:

<style>
ul { list-style: none; }
ul li ul { display: none; }
ul li:hover ul { display: block;}
</style>
<ul>
<li>Servicios
<ul>
<li>Para hombres</li>
<li>Para mujeres</li>
<li>Para minusválidos</li>
</ul></li>
</ul> 

En el Probador de scripts en IE7 ¡y no me va!. ¿Es cosa de mi IE, que se ha vuelto loco, o de que vosotros lo probáis con otro código?

[Mikmoro]

No sé qué pasará, pero yo he copiado y pegado tu código, y sí funciona. Bueno, lo he pegado en un documento con un doctype strict. A ver si va a ser eso.

[Raulmmmm]

Muy bien Mikmoro. Tu turno. Era el DOCTYPE.

[Mikmoro]

Bien. Dadas dos cajas una dentro de otra:

<div id="contenedor">
<div id="interior"></div>
</div>

con estas propiedades:

#contenedor {width: 800px;
height: 400px;
margin: 0 auto;
background-color: blue;
}
#interior {width: 400px;
height: 200px;
background-color: red;
margin: 30px auto;
}

¿A qué distancia estará la caja contenedora (azul) del borde superior en los navegadores normales (FF, Opera, Safari, etc.)?

¿Y en Explorer?

[metacortex]

La respuesta es 0px. Siempre he pensado que se trata de un bug de rendering en los navegadores estándar. Al existir un margen superior en la capa hijo con respecto a la padre, éste debería reflejarse tal cual. En lugar de eso lo arrastra consigo.

Iniciado por Raulmmmm

Muy bien Mikmoro. Tu turno. Era el DOCTYPE.

Creo que tu planteamiento parecía más una equivocación tuya que otra cosa. La pregunta inicial proponía una situación HTML + CSS sin un DTD determinado. Si bien es cierto que el DTD transicional cambia el comportamiento, el error de interpretación principalmente lo tiene IE6 (en Strict y Transicional). Si vamos a colocar código como pregunta, deberíamos asegurarnos de que esté correctamente planteada y la solución sea concreta.

[Mikmoro]

Iniciado por metacortex

La respuesta es 0px. Siempre he pensado que se trata de un bug de rendering en los navegadores estándar. Al existir un margen superior en la capa hijo con respecto a la padre, éste debería reflejarse tal cual. En lugar de eso lo arrastra consigo.

La respuesta es acertada en la explicación y errónea en el dato (un lapsus, seguro). Según tu propia explicación, que es correcta, estará a 30px de la parte superior. Y en IE a 0px. Y sí, yo también he pensado siempre que es un error, que no acabo de entender.

Y en lo de la pregunta de Raulmmmm no sólo tienes razón, sino que al leerlo me he dado cuenta de que realmente tú ya habías respondido el primero de forma correcta.

Bueno, supongo que es igual. Tu turno, metacortex.

(cada vez jode más responder porque luego hay que pensar una pregunta, y se van acabando las ideas, je, je ,je)

[metacortex]

Iniciado por Mikmoro

La respuesta es acertada en la explicación y errónea en el dato (un lapsus, seguro). Según tu propia explicación, que es correcta, estará a 30px de la parte superior. Y en IE a 0px. Y sí, yo también he pensado siempre que es un error, que no acabo de entender.

Pues sí, fue un lapsus brutis el mío jeje, ya que respondí encuanto a la situación de la interna con respecto a la contenedora. Mis disculpas .

P: Retomando el mismo ejemplo de Mikmoro ¿Cuál es la forma MÁS ABREVIADA para solucionar el problema y hacer que la capa interna refleje los 30px de margen superior, a la vez que la contenedora retoma su ubicación original?

[metacortex]

Iniciado por Mikmoro

(cada vez jode más responder porque luego hay que pensar una pregunta, y se van acabando las ideas, je, je ,je)

Jejeje sí. Pronto las preguntas serán de lo más rebuscadas y extrañas... A ver hasta dónde nos lleva el tren.

[Mikmoro]

¿Nadie?

(¿será que nadie quiere ya tener que preguntar? je, je, je)

[derkenuke]

Con un display: table para el DIV #interior creo que lo solucionamos. ¿no?

Y sí, a mi también me da pereza encontrar un tema nuevo para preguntar....

[messer]

La forma correcta de solucionarlo es colocando 'overflow:auto' a la capa contenedora. Probe la solucion de derkenuke y simplemente desaparece la capa 'interior'. Tienen razon es algo complicado formular buenas preguntas, supongo que cada quien va preguntando segun las experiencias que ha tenido, en ese caso deberian preguntar los principiantes .

[derkenuke]

Hola:

Yo lo probé así:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<title>Página nueva</title>
<style type="text/css">
#contenedor {width: 800px;
height: 400px;
margin: 0 auto;
background-color: blue;
}
#interior {
display: table;
width: 400px;
height: 200px;
background-color: red;
margin: 30px auto;
}
</style>
</head>

<body>

<div id="contenedor">
<div id="interior"></div>
</div>


</body>
</html> 

Se me ve igual en IE6 y en FF3. Aunque también me funciona si coloco display: table en #contenedor. Con overflow:auto a #contenedor también me ha funcionado


Saludos.

[messer]

Tienes razon, ahora si me funciona, ha de haber sido por el DOCTYPE o algo asi..

[metacortex]

Correcto derkenuke lanza tu pregunta.

Iniciado por messer

Tienes razon, ahora si me funciona, ha de haber sido por el DOCTYPE o algo asi..

Funciona con cualquier DTD en ambos navegadores ;)

Iniciado por messer

La forma correcta de solucionarlo es colocando 'overflow:auto' a la capa contenedora. Probe la solucion de derkenuke y simplemente desaparece la capa 'interior'. Tienen razon es algo complicado formular buenas preguntas, supongo que cada quien va preguntando segun las experiencias que ha tenido, en ese caso deberian preguntar los principiantes .

Messer, no importa el nivel de las preguntas mientras estén correctamente planteadas y sigan la regla única .

[Mikmoro]

Aunque yo diría que, para evitar posibles complicaciones futuras con el contenido que pudieran tener ambas cajas, la manera más sencilla y adecuada es esta:

#contenedor {width: 800px;
height: 400px;
margin: 0 auto;
background-color: blue;
}
#interior {
position: relative;
top: 30px;
margin: 0 auto;
width: 400px;
height: 200px;
background-color: red;
}

Tu turno, derkenuke, porque al fin y al cabo la respuesta es correcta.

[messer]

Mmmm bueno, sucede que copie y pegue el codigo en un 'Bloc de notas' guarde el .htm y se dio la situacion que anteriormente planteaba, en cuanto a las preguntas, pues digo lo de los principiantes porque cuando uno esta aprendiendo pues tiene mas dudas que nunca (no es que yo sea un guru).

En todo caso nunca esta demas tener mas de una opcion con la que se pueda resolver un asunto. Saludos!!

[derkenuke]

Bueno, una de listas. Tenemos este simple HTML:

Código HTML:

<ol id="lista">
	<li>uno</li>
	<li>dos</li>
	<li>tres</li>
	<li>cuatro</li>
	<li>nueve</li>
	<li>diez</li>
</ol> 

Y queremos que los números de la lista no tengan el orden predeterminado. Al lado de cada nombre tendrá que salir el número correspondiente. La lista debe quedar así:

Código:

   1. uno
   2. dos
   3. tres
   4. cuatro
   9. nueve
   10. diez

Sin tocar el código HTML, ¿Con qué CSS lograríamos esto?

[derkenuke]

Jajja, creo que se nos va muriendo el hilo...

Una pistilla: Sólo hay que tener otro contador para el nueve y el diez...

[PedroRodas]

creo que lo hariamos asi:

Código HTML:

<ol id="lista">
	<li>uno</li>
	<li>dos</li>
	<li>tres</li>
	<li>cuatro</li>
</ol>
<ol start="9" >
        <li>nueve</li>
	<li>diez</li>
</ol> 

Luego eliminamos el espacio con margin y padding a 0, creo.

saludos.

[Jamati]

Se puede poner algo así como <ol type="1">
y luego, en el otro contenedor como dijiste, hacemos otro <ol type="9">

más o menos estoy en lo correcto ?, o nada que ver?

jaja por favor me avisan así me doy cuenta si tengo que irme y no dar mas opinión en este foro de grandes conocedores del CSS.

[Jamati]

me ganaron por unos pocos minutos, y encima creo que era start, no type como puse yo...

[derkenuke]

No, lo siento PedroRodas, pero en la cuestión estaba estrictamente definido que el HTML era inamovible:

Iniciado por derkenuke

Sin tocar el código HTML, ¿Con qué CSS lograríamos esto?

Esa lista, con ese ID, esos elementos LI y no se pueden agregar atributos class ni id's ni de otro tipo. Únicamente con CSS se puede hacer.

¿Tan dificil lo he puesto? Lo dudo, pero si veo que no hay respuestas iré soltando más pistas, creo que es interesante (nunca he utilizado el CSS de la respuesta para nada, pero existe).


Saludos.

[Nathan_1979]

Al final, el trivial consistirá en ir analizando las movidas de los códigos

[metacortex]

No sé si la solución es buena o chapucera pero aquí va. En los comentarios /* */ coloqué lo que logré entender de los resultados obtenidos, ya que nunca lo había intentado antes:

Código PHP:

  ol {
  counter-reset: item; /* Resetear a 1 por defecto */
}

li { 
  display: block; /* Ocultar la numeración original */
}

li:before {
  counter-increment: item; /* Incrementar según la referencia ol */
  content: counter(item) ". "; /* Agregar el punto ( . ) después del número */
}

li+li+li+li+li {
  counter-reset: item 8; /* Incrementar la referencia + 8 = 9 */
}

li+li+li+li+li+li {
  counter-reset: item 9; /* Incrementar la referencia + 9 = 10 */
} 
   

Ante tal situación es necesario mencionar que hacer esto con puro CSS no es la manera correcta de proceder. La alteración de la numeración de listas no es un asunto de presentación sino de estructura. Se entiende que el reto era lograrlo con CSS, pero creo que es bueno haber hecho esa acotación.

[derkenuke]

Sí meta, así se consigue hacer lo que se proponía. Otra manera sería colocando dos contadores, item y segundo. segundo empezaría a contar desde 9 (8+1) y podría valer para los dos últimos elementos:

Código:

* > #lista {
	list-style-type: none;
	counter-reset: item segundo 8;
}
#lista li:before {
	content: counter(item) ". ";
	counter-increment: item;
}
#lista li+li+li+li+li:before {
	content: counter(segundo) ". ";
	counter-increment: segundo;
}

Pero como la respuesta es correcta, tu turno.

No sé si me quedó claro si es un asunto de presentación o estructura. A mi juicio es presentación porque podemos numerar cualquier elemento, como los H1 para los títulos. Pero en fin, no creo que sea el tema a tratar.

Continuemos

[metacortex]

Iniciado por derkenuke

No sé si me quedó claro si es un asunto de presentación o estructura. A mi juicio es presentación porque podemos numerar cualquier elemento, como los H1 para los títulos. Pero en fin, no creo que sea el tema a tratar.

Al contrario; resulta bueno que el tema haya surgido. En lo personal nunca había aplicado este procedimiento antes, y debo decir que me costó mucho comprenderlo. En el caso de las listas ordenadas ciertamentes es posible numerarlas a voluntad, pero una vez desactivado el CSS no serán "2.2, 3.2, 6.2..." sino "1, 2, 3...". Por esa razón opino que esa parte debería pertenecer a la estructura del contenido. Igualmente es viable controlar esta parte mediante HTML, tal como lo explicó PedroRodas más arriba. La idea es que el contenido permanezca accesible en todas sus partes sin depender de otras tecnologías. Si construyes un índice basado en CSS, éste quedará anulado si éste se desactiva.

Ahora la pregunta:

P: Siendo #000000 el negro absoluto y #ffffff el blanco absoluto ¿cuál sería el 50% de gris exacto siguiendo esta lógica?.

[messer]

Al ojo% deberia ser #CCCCCC si no me equivoco.