Foros del Web » Creando para Internet » CSS »

Trivia: Conceptos CSS

Estas en el tema de Trivia: Conceptos CSS en el foro de CSS en Foros del Web. 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é ...

  #301 (permalink)  
Antiguo 30/07/2008, 16:00
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Trivia: Conceptos CSS

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.
__________________
Visita mi nueva web idplus.org
  #302 (permalink)  
Antiguo 30/07/2008, 19:56
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Trivia: Conceptos CSS

En IE7 funciona a la perfección, el problema esta en IE6
  #303 (permalink)  
Antiguo 30/07/2008, 21:53
Avatar de diegoy2k  
Fecha de Ingreso: julio-2006
Ubicación: Algun Lugar
Mensajes: 68
Antigüedad: 11 años, 4 meses
Puntos: 0
Conceptos CSS

Perdon me equivoque!!!
  #304 (permalink)  
Antiguo 31/07/2008, 02:34
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Respuesta: Trivia: Conceptos CSS

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?
  #305 (permalink)  
Antiguo 31/07/2008, 02:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Trivia: Conceptos CSS

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.
__________________
Visita mi nueva web idplus.org
  #306 (permalink)  
Antiguo 31/07/2008, 03:33
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Respuesta: Trivia: Conceptos CSS

Muy bien Mikmoro. Tu turno. Era el DOCTYPE.
  #307 (permalink)  
Antiguo 31/07/2008, 05:05
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Trivia: Conceptos CSS

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?
__________________
Visita mi nueva web idplus.org
  #308 (permalink)  
Antiguo 31/07/2008, 05:33
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Trivia: Conceptos CSS

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.

Cita:
Iniciado por Raulmmmm Ver Mensaje
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.
  #309 (permalink)  
Antiguo 31/07/2008, 06:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Trivia: Conceptos CSS

Cita:
Iniciado por metacortex Ver Mensaje
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)
__________________
Visita mi nueva web idplus.org
  #310 (permalink)  
Antiguo 31/07/2008, 06:28
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Trivia: Conceptos CSS

Cita:
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?
  #311 (permalink)  
Antiguo 31/07/2008, 10:36
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Trivia: Conceptos CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
(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.
  #312 (permalink)  
Antiguo 01/08/2008, 02:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Trivia: Conceptos CSS

¿Nadie?

(¿será que nadie quiere ya tener que preguntar? je, je, je)
__________________
Visita mi nueva web idplus.org
  #313 (permalink)  
Antiguo 01/08/2008, 07:32
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Respuesta: Trivia: Conceptos CSS

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....
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #314 (permalink)  
Antiguo 01/08/2008, 08:25
Avatar de messer  
Fecha de Ingreso: julio-2004
Mensajes: 467
Antigüedad: 13 años, 4 meses
Puntos: 5
Respuesta: Trivia: Conceptos CSS

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 .
__________________
<script type="text/messerScript"><!--
window.onload=function(){ loadMesserRules(this.href) }
--></script>
  #315 (permalink)  
Antiguo 01/08/2008, 08:47
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Respuesta: Trivia: Conceptos CSS

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.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #316 (permalink)  
Antiguo 01/08/2008, 08:56
Avatar de messer  
Fecha de Ingreso: julio-2004
Mensajes: 467
Antigüedad: 13 años, 4 meses
Puntos: 5
Respuesta: Trivia: Conceptos CSS

Tienes razon, ahora si me funciona, ha de haber sido por el DOCTYPE o algo asi..
__________________
<script type="text/messerScript"><!--
window.onload=function(){ loadMesserRules(this.href) }
--></script>
  #317 (permalink)  
Antiguo 01/08/2008, 09:07
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Trivia: Conceptos CSS

Correcto derkenuke lanza tu pregunta.
Cita:
Iniciado por messer Ver Mensaje
Tienes razon, ahora si me funciona, ha de haber sido por el DOCTYPE o algo asi..
Funciona con cualquier DTD en ambos navegadores ;)

Cita:
Iniciado por messer Ver Mensaje
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 .
  #318 (permalink)  
Antiguo 01/08/2008, 09:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Trivia: Conceptos CSS

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:

Cita:
#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.
__________________
Visita mi nueva web idplus.org
  #319 (permalink)  
Antiguo 01/08/2008, 09:16
Avatar de messer  
Fecha de Ingreso: julio-2004
Mensajes: 467
Antigüedad: 13 años, 4 meses
Puntos: 5
Respuesta: Trivia: Conceptos CSS

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!!
__________________
<script type="text/messerScript"><!--
window.onload=function(){ loadMesserRules(this.href) }
--></script>
  #320 (permalink)  
Antiguo 01/08/2008, 09:28
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Respuesta: Trivia: Conceptos CSS

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?
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #321 (permalink)  
Antiguo 02/08/2008, 09:23
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Respuesta: Trivia: Conceptos CSS

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

Una pistilla: Sólo hay que tener otro contador para el nueve y el diez...
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #322 (permalink)  
Antiguo 02/08/2008, 10:48
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 12 años
Puntos: 0
Respuesta: Trivia: Conceptos CSS

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.
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
  #323 (permalink)  
Antiguo 02/08/2008, 11:04
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Trivia: Conceptos CSS

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.
  #324 (permalink)  
Antiguo 02/08/2008, 11:06
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Trivia: Conceptos CSS

me ganaron por unos pocos minutos, y encima creo que era start, no type como puse yo...
  #325 (permalink)  
Antiguo 02/08/2008, 11:44
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Respuesta: Trivia: Conceptos CSS

No, lo siento PedroRodas, pero en la cuestión estaba estrictamente definido que el HTML era inamovible:
Cita:
Iniciado por derkenuke Ver Mensaje
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.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #326 (permalink)  
Antiguo 02/08/2008, 13:50
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 10 años, 6 meses
Puntos: 9
Respuesta: Trivia: Conceptos CSS

Al final, el trivial consistirá en ir analizando las movidas de los códigos
  #327 (permalink)  
Antiguo 02/08/2008, 15:39
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Trivia: Conceptos CSS

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-resetitem/* Resetear a 1 por defecto */
}

li 
  
displayblock/* Ocultar la numeración original */
}

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

li+li+li+li+li {
  
counter-resetitem 8/* Incrementar la referencia + 8 = 9 */
}

li+li+li+li+li+li {
  
counter-resetitem 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.
  #328 (permalink)  
Antiguo 02/08/2008, 22:56
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Respuesta: Trivia: Conceptos CSS

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
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #329 (permalink)  
Antiguo 04/08/2008, 06:06
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Trivia: Conceptos CSS

Cita:
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?.
  #330 (permalink)  
Antiguo 04/08/2008, 14:07
Avatar de messer  
Fecha de Ingreso: julio-2004
Mensajes: 467
Antigüedad: 13 años, 4 meses
Puntos: 5
Respuesta: Trivia: Conceptos CSS

Al ojo% deberia ser #CCCCCC si no me equivoco.
__________________
<script type="text/messerScript"><!--
window.onload=function(){ loadMesserRules(this.href) }
--></script>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 7 personas




La zona horaria es GMT -6. Ahora son las 22:56.