Trivia: Conceptos CSS

[PosicionamientoSeo]

Llegué tarde,

Vamos a la próxima pregunta,
Saludos

[metacortex]

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!! .

[AlvaroG]

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.

[K-Yezaad]

Iniciado por alvlin

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.

[AlvaroG]

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

[Mikmoro]

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í.

[K-Yezaad]

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?

[hey_alan]

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)

[messer]

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;
}

[K-Yezaad]

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

El codigo de alan si me funciona en FF.

[metacortex]

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

Iniciado por K-Yezaad

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.

[K-Yezaad]

Adelante messer

[hey_alan]

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

[messer]

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??

[hey_alan]

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

[emiliodeg]

Iniciado por messer

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?

[AlvaroG]

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.

[messer]

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

Saludos!

[hey_alan]

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...

[Mikmoro]

hey_alan: refiriéndome a un mensaje anterior tuyo, inline-block sí funciona en IE6.

[derkenuke]

Iniciado por hey_alan

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

[hey_alan]

Correcto...

Tu turno ;)

[derkenuke]

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.

[DragonX]

#contenedor > p span{color:red}

creo...

[derkenuke]

Lo siento DragonX, pero eso colorearía todos los SPAN, y se deben colorear sólo los dos últimos.

[metacortex]

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 {

[DragonX]

Siempre se aprende algo nuevo...

[derkenuke]

Iniciado por metacortex

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.

[metacortex]

P: ¿La abreviación de hexadecimales (#ccc = #cccccc) es un procedimiento universal o sólo exclusivo del entorno de maquetación web?

[metacortex]

Vamos conteste alguien ¿será que lanzo otra más fácil?.