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. Llegué tarde, Vamos a la próxima pregunta, Saludos...

  #241 (permalink)  
Antiguo 25/07/2008, 09:10
Avatar de PosicionamientoSeo  
Fecha de Ingreso: julio-2008
Ubicación: Argentina
Mensajes: 858
Antigüedad: 9 años, 5 meses
Puntos: 64
Respuesta: Trivia: Conceptos CSS

Llegué tarde,

Vamos a la próxima pregunta,
Saludos
  #242 (permalink)  
Antiguo 25/07/2008, 09:29
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.021
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Trivia: Conceptos CSS

Veo que alvlin tiene rato conectado y se está tardando. Eso sólo confirma la temible teoría de que la próxima pregunta traerá dragones, cancerberos y leviatanes consigo. Ojo con el alvlin porque viene con todo!! .
  #243 (permalink)  
Antiguo 25/07/2008, 09:52
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Trivia: Conceptos CSS

Jajaja mal puedo estar preparando una pregunta diabólica siendo que ya estoy buscando en la recomendación de CSS por cosas que pueda preguntar...

En fin, encontré una que no entendía mucho en el pasado pero busqué y busqué y al final lo entendí

Supongamos que hago mi diseño con una fuente un tanto rara, y quiero que si la fuente no está disponible, el navegador se encargue de que la fuente de reemplazo se vea con un tamaño similar (ejemplo típico: Verdana se ve más grande que Arial al mismo 'font-size', Garamond se ve más chica, etc). ¿qué propiedad debería usar? dar un ejemplo y de ser posible una explicación sencilla.
  #244 (permalink)  
Antiguo 25/07/2008, 10:47
Avatar de K-Yezaad  
Fecha de Ingreso: octubre-2005
Mensajes: 140
Antigüedad: 12 años, 2 meses
Puntos: 3
Respuesta: Trivia: Conceptos CSS

Cita:
Iniciado por alvlin Ver Mensaje
Supongamos que hago mi diseño con una fuente un tanto rara, y quiero que si la fuente no está disponible, el navegador se encargue de que la fuente de reemplazo se vea con un tamaño similar (ejemplo típico: Verdana se ve más grande que Arial al mismo 'font-size', Garamond se ve más chica, etc). ¿qué propiedad debería usar? dar un ejemplo y de ser posible una explicación sencilla.
font-size-adjust
Determina la proporcion entre el font-size y la altura x (la altura de las minusculas). font-size afecta las mayusculas y por eso hay discrepancias de tamaño.

el valor que yo usaria seria:
Código:
font-size:0.5;
para tener una buena legibilidad.
  #245 (permalink)  
Antiguo 25/07/2008, 11:43
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Trivia: Conceptos CSS

La propiedad es correcta, el ejemplo no.

Debería ser:

elemento {
font-family : Verdana, sans-serif;
font-size-adjust : 0.58;
}

El 0.58 es el valor correspondiente para Verdana, hay otros valores para otras fuentes.
Si Verdana no está disponible, y se usa una fuente cuyo valor es 0.48 (creo que ese es el valor de Times New Roman), esa otra fuente se mostrará en ((0,58/0,48)*tamaño original) pixeles.

K-Yezaad, tu turno
  #246 (permalink)  
Antiguo 25/07/2008, 11:45
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

Es lo que yo estaba pensando, y he de decir que esa propiedad no la había visto nunca. Tras leer la especificación, me parecía que el ejemplo no podía ser así.
__________________
Visita mi nueva web idplus.org
  #247 (permalink)  
Antiguo 25/07/2008, 13:15
Avatar de K-Yezaad  
Fecha de Ingreso: octubre-2005
Mensajes: 140
Antigüedad: 12 años, 2 meses
Puntos: 3
Respuesta: Trivia: Conceptos CSS

Perdon por el error, no suelo usar mucho esa propiedad.

Tengo un enlace como <a href="" id="save">Guardar</a> y quiero que en su lugar se vea solo la imagen de un disquete (sin texto), como debo declarar #save?
  #248 (permalink)  
Antiguo 25/07/2008, 13:33
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Respuesta: Trivia: Conceptos CSS

Código:
#save{
background:#0000CC url(disquete.gif) no-repeat;
width:24px; height:24px;
text-indent:-5000px;
display:inline-block;
overflow:hidden;
}
Será!? :P

Lo que hace es que se interprete el enlace como si fuera un "bloque" para poder usar la sangría del texto (text-indent), pero a la vez elemento "inline" para que no ocurran desgracias y pueda usarse en una línea :P (el "overflow:hidden" sólo es preventivo)
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán

Última edición por hey_alan; 25/07/2008 a las 14:14
  #249 (permalink)  
Antiguo 25/07/2008, 14:33
Avatar de messer  
Fecha de Ingreso: julio-2004
Mensajes: 467
Antigüedad: 13 años, 5 meses
Puntos: 5
Respuesta: Trivia: Conceptos CSS

Pues sinceramente a mi no me funciona tu codigo hey_alan en FF aparece el texto y en IE no aparece nada..

Sin embargo de este modo si me funciona perfecto:

Código:
#salida{
	background:#EFEEEE url(disquete.gif) no-repeat;
	width:24px; 
        height:24px;
	display:block;
        text-indent:-100px;
}
__________________
<script type="text/messerScript"><!--
window.onload=function(){ loadMesserRules(this.href) }
--></script>
  #250 (permalink)  
Antiguo 25/07/2008, 14:36
Avatar de K-Yezaad  
Fecha de Ingreso: octubre-2005
Mensajes: 140
Antigüedad: 12 años, 2 meses
Puntos: 3
Respuesta: Trivia: Conceptos CSS

inline block no funciona en IE, una solucion mas 'compatible' seria ponerle valores de float.

El codigo de alan si me funciona en FF.
  #251 (permalink)  
Antiguo 25/07/2008, 14:41
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.021
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Trivia: Conceptos CSS

Esto... Creo que esta vez messer fue quien acertó corrigiendo con el display: block.


Cita:
Iniciado por K-Yezaad Ver Mensaje
inline block no funciona en IE, una solucion mas 'compatible' seria ponerle valores de float.

El codigo de alan si me funciona en FF.
Más allá de la compatibilidad existe la manera correcta de trabajar . Ésta involucra convertir el elemento afectado en bloque.

Messer puedes lanzar tu pregunta.
  #252 (permalink)  
Antiguo 25/07/2008, 14:42
Avatar de K-Yezaad  
Fecha de Ingreso: octubre-2005
Mensajes: 140
Antigüedad: 12 años, 2 meses
Puntos: 3
Respuesta: Trivia: Conceptos CSS

Adelante messer
  #253 (permalink)  
Antiguo 25/07/2008, 14:43
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Respuesta: Trivia: Conceptos CSS

Es raro, a mí me funciona muy bien :P (tanto en IE6 como FF)

Había leído que en IE sí funciona "inline-block" cuando el elemento tiene propiedad "inline" originalmente



Pero blehhh... explorer es impredecible xD
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán

Última edición por hey_alan; 25/07/2008 a las 14:58
  #254 (permalink)  
Antiguo 25/07/2008, 15:07
Avatar de messer  
Fecha de Ingreso: julio-2004
Mensajes: 467
Antigüedad: 13 años, 5 meses
Puntos: 5
Respuesta: Trivia: Conceptos CSS

Disculpen la demora..

Como se puede hacer que una capa de 100px x 100px se alinee siempre en el centro de la pagina. Tanto en vertical como en horizontal??
__________________
<script type="text/messerScript"><!--
window.onload=function(){ loadMesserRules(this.href) }
--></script>
  #255 (permalink)  
Antiguo 25/07/2008, 15:12
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Respuesta: Trivia: Conceptos CSS

Código:
#capa{
border:1px #FFFFFF solid;
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0px 0px -50px;
}
Asignamos una posición absoluta, con el 50% del ancho y también del alto total... finalmente le restamos la mitad de su tamaño al div para que quede bien centrado
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
  #256 (permalink)  
Antiguo 25/07/2008, 15:13
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: Trivia: Conceptos CSS

Cita:
Iniciado por messer Ver Mensaje
Disculpen la demora..

Como se puede hacer que una capa de 100px x 100px se alinee siempre en el centro de la pagina. Tanto en vertical como en horizontal??
.capa{
position:absolute;
top:50%;
left:50%;
height:100px;
width:100px;
margin:-50px 0 0 -50px;
}

nueva pregunta:
como quito el borde punteado de los links cuando tiene foco encima?
__________________
Degiovanni Emilio
developtus.com
  #257 (permalink)  
Antiguo 25/07/2008, 15:19
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Trivia: Conceptos CSS

emiliodeg,
Por favor leé el tema desde el principio, has cometido 2 errores.
El primero: no esperar a que quien pregunta confirme que tu respuesta es correcta y te de el turno.
El segundo: preguntar algo que ya se preguntó (y se contestó) un par de páginas atrás.


Saludos.

Última edición por AlvaroG; 25/07/2008 a las 15:34
  #258 (permalink)  
Antiguo 25/07/2008, 15:20
Avatar de messer  
Fecha de Ingreso: julio-2004
Mensajes: 467
Antigüedad: 13 años, 5 meses
Puntos: 5
Respuesta: Trivia: Conceptos CSS

Pues es correcta la respuesta como veo que hey_alan respondio primero, supongo que sea su turno.

Saludos!
__________________
<script type="text/messerScript"><!--
window.onload=function(){ loadMesserRules(this.href) }
--></script>
  #259 (permalink)  
Antiguo 25/07/2008, 15:27
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Respuesta: Trivia: Conceptos CSS

Vale!

Tengo la mente un poco agría en este momento, por lo que pondré una sencilla...

Si haces un float y un margin hacia la misma dirección...

¿Qué comportamiento muestra IE? ¿Cómo debe solucionarse?

Saludos...
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
  #260 (permalink)  
Antiguo 25/07/2008, 16:04
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

hey_alan: refiriéndome a un mensaje anterior tuyo, inline-block sí funciona en IE6.
__________________
Visita mi nueva web idplus.org
  #261 (permalink)  
Antiguo 26/07/2008, 10:29
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

Cita:
Iniciado por hey_alan Ver Mensaje
Vale!

Tengo la mente un poco agría en este momento, por lo que pondré una sencilla...

Si haces un float y un margin hacia la misma dirección...

¿Qué comportamiento muestra IE? ¿Cómo debe solucionarse?

Saludos...
En IE el margin se duplicará automáticamente, dejando demasiado espacio entre el borde del elemento padre y el elemento en sí.

Una forma de solucionarlo sería colocarle al elemento un display: inline;

Saludos
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #262 (permalink)  
Antiguo 26/07/2008, 10:36
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Respuesta: Trivia: Conceptos CSS

Correcto...

Tu turno ;)
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
  #263 (permalink)  
Antiguo 26/07/2008, 10:58
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

Partimos de este HTML:

Código HTML:
<div id="contenedor">
	<p>No sé <span>responder</span> a esto. No sé <span>responder</span> a esto. No sé <span>responder</span> a esto. No sé <span>responder</span> a esto. </p>
	<p>No sé <span>responder</span> a esto. No sé <span>responder</span> a esto. </p>
</div> 
¿Con qué sentencia conseguiría formatearlo de esta manera? (Colorear de rojo los dos últimos responder del primer P)
Código:
No sé responder a esto. No sé responder a esto. No sé responder a esto. No sé responder a esto.

No sé responder a esto. No sé responder a esto.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #264 (permalink)  
Antiguo 26/07/2008, 11:40
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

#contenedor > p span{color:red}

creo...

  #265 (permalink)  
Antiguo 26/07/2008, 15:18
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

Lo siento DragonX, pero eso colorearía todos los SPAN, y se deben colorear sólo los dos últimos.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #266 (permalink)  
Antiguo 26/07/2008, 17:36
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.021
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Trivia: Conceptos CSS

Código:
p span+span+span {
  color: #ff0000;
}
La explicación: Todo lo que esté detrás del último signo "+" -y cuya etiqueta corresponda al selector- es lo que se verá afectado por el estilo. (Por supuesto no funciona en el cutre IE).

Si en el mismo ejemplo quisiéramos colorear sólo el último span, el asunto sería así:

Código:
p span+span+span+span {
  #267 (permalink)  
Antiguo 26/07/2008, 19:58
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

Siempre se aprende algo nuevo...
  #268 (permalink)  
Antiguo 26/07/2008, 22:26
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

Cita:
Iniciado por metacortex Ver Mensaje
Código:
p span+span+span {
  color: #ff0000;
}
La explicación: Todo lo que esté detrás del último signo "+" -y cuya etiqueta corresponda al selector- es lo que se verá afectado por el estilo. (Por supuesto no funciona en el cutre IE).

Si en el mismo ejemplo quisiéramos colorear sólo el último span, el asunto sería así:

Código:
p span+span+span+span {
Exacto meta! Tu turno.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #269 (permalink)  
Antiguo 27/07/2008, 02:07
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.021
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Trivia: Conceptos CSS

P: ¿La abreviación de hexadecimales (#ccc = #cccccc) es un procedimiento universal o sólo exclusivo del entorno de maquetación web?
  #270 (permalink)  
Antiguo 27/07/2008, 14:49
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.021
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Trivia: Conceptos CSS

Vamos conteste alguien ¿será que lanzo otra más fácil?.
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 01:17.