Trivia: Conceptos CSS

[kseso?]

perdón, equivoqué los colores
img {padding: 5px #000;
border:5px solid #fff;}

[DragonX]

img {
outline:5px solid #fff;
border:5px solid #000;
}

[Daniel Ulczyk]

@kseso? con padding, verdaderamente, cuando definís medidas; no podés definir color de
fondo.
@DragonX con tu ejemplo, no obtengo lo que pido.

[K-Yezaad]

Código:

img{
background-color: #fff;
padding:5px;
border:5px solid #000;
}

outline es de CSS3, no?

[Nathan_1979]

Iniciado por K-Yezaad

Código:

img{
background-color: #fff;
padding:5px;
border:5px solid #000;
}

outline es de CSS3, no?

http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines

[Daniel Ulczyk]

Respuesta correcta K-Yezaad, tu turno.

Por cierto, la propiedad outline es de CSS2.

La carita NO, es por CSS ¿no es cierto?
Porque la respuesta que estaba esperando es:

Código:

img {
    border:5px solid #000000;
    padding:5px;
    background:#FFFFFF;
    }

[Nathan_1979]

La carita viene a cuento a la pregunta si OUTLINE es de CSS3,

Y claro está que no.
Dejé un enlace y todo.
Salu2

[Daniel Ulczyk]

No había visto el enlace.

[K-Yezaad]

Mi turno:

Tengo un div dentro de otro (div 'b' dentro de div 'a', para no confundirnos). 'b' tiene este CSS

Código:

#b{
position:absolute;
top:0; left:0;
}

¿como hago para que 'b' aparezca SIEMPRE dentro de 'a'? Para ejemplificar mejor mi punto, ponganle un margin de 100px a body.

[Nathan_1979]

Asignarle al div a la propiedad: position:relative;

Edito:Probado y funciona jeje

[K-Yezaad]

Correcto Nathan_1979, sigues de preguntar

[Nathan_1979]

K-Yezaad

Esta pregunta os gustará

A que se debe este resultado?
Cómo se resuelve este pequeño problema?

[DragonX]

sinceramente no entiendo tu pregunta

[K-Yezaad]

Iniciado por DragonX

sinceramente no entiendo tu pregunta

Se refiere a porque ocurrio el problema de esta imagen, no?

Y como se resuelve.

[Nathan_1979]

Hmm que raro,
Lo que tiene un borde verde "dasheado" en una imagen la barra marron en un

<div>

Mejor ahora?

Los colores son los bordes para que se aprecien.

[DragonX]

voy a esperar la solución porque sigo sin entender......son casi las 6 de la tarde de un jueves, no me pidan que piense!!!!!!

[Mikmoro]

Se debe a que la imagen está flotada a la izquierda, por lo que su caja contenedora no crece para albergarla. Pero vaya manera de plantear la pregunta. Con la primera he pensado: ¿problema? ¿qué problema?

Se soluciona con:

div {overflow: auto;}

Hay que procurar ser más claros al preguntar.

Mikel.

[derkenuke]

Sí, la pregunta no estaba nada clara, pero me he imaginado lo que pasaba.

Con overflow:auto Firefox traga, pero IE6 no, sigue viendose igual a la imagen. No sabía eso, gracias Mikel


Saludos

[Mikmoro]

Iniciado por derkenuke

Sí, la pregunta no estaba nada clara, pero me he imaginado lo que pasaba.

Con overflow:auto Firefox traga, pero IE6 no, sigue viendose igual a la imagen. No sabía eso, gracias Mikel


Saludos

En varias preguntas y respuestas ha pasado lo mismo, e imagino que estamos hablando de CSS standard, no de los problemas de IE con CSS. Si no, las de los hermanos adyacentes, las psedo-clases, los atributos y demás tampoco serían válidas.

Mikel.

[K-Yezaad]

Iniciado por derkenuke

Sí, la pregunta no estaba nada clara, pero me he imaginado lo que pasaba.

Con overflow:auto Firefox traga, pero IE6 no, sigue viendose igual a la imagen. No sabía eso, gracias Mikel


Saludos

En IE6 creo que se puede resolver poniendo dentro del div <br style="clear:both"> al final del contenido del div.

[Mikmoro]

Iniciado por K-Yezaad

En IE6 creo que se puede resolver poniendo dentro del div <br style="clear:both"> al final del contenido del div.

Así es, o eso mismo hecho de otra manera, pero al fin y al cabo se trata de dar un corte al final del div.

[DragonX]

Iniciado por Mikmoro

Se debe a que la imagen está flotada a la izquierda, por lo que su caja contenedora no crece para albergarla. Pero vaya manera de plantear la pregunta. Con la primera he pensado: ¿problema? ¿qué problema?

Se soluciona con:

div {overflow: auto;}

Hay que procurar ser más claros al preguntar.

Mikel.

.... yo lo soluciono con overflow:hidden

[K-Yezaad]

A ver creo que sigue Mikormo de preguntar

[metacortex]

Yo tampoco entendí nada , sólo me basaré en la interpretación de Mikel:

Iniciado por Mikmoro

Se debe a que la imagen está flotada a la izquierda, por lo que su caja contenedora no crece para albergarla.

Lo del clear:both me pareció la forma correcta de proceder (lo que no me quedó muy claro fue lo del overflow:auto) Otra posible solución -y dependiendo de la circunstancia- sería definirle una altura fija a esa capa contenedora, pero con tan escasos datos en la pregunta poco se puede hacer.

[emiliodeg]

bueno no se quien dejo la ultima pregunta, no la encontre, asi q dejo una

<div>texto a</div>
<div>texto b</div>
<div>texto c</div>
<div>texto d</div>

div {float:right}

como aparecerian los textos?

[Mikmoro]

Siguiendo el ritmo del juego, estoy esperando que quien lanzó la pregunta dé mi respuesta por buena y me dé el turno.

Lo del overflow, meta, es lo siguiente: si una caja no tiene tamaño de alto, y dentro tiene otra flotada, al darle overflow a la primera ésta crece para albergar a la que tiene en su interior. Si tuviera alto definido no sería así, pero al no tenerlo (porque la caja que según dijo tenía boirdes y estos aparecían pegados entre sí, y si hubiera tenido alto definido se vería), overflow le obliga a crecer.

Esta es otra de esas pregunas que tienen más de una respuesta válida (que deberíamos intentar evitar).

Esperamos tu confirmación, Nathan_1979, para lanzar la siguiente.

Mientras tanto respondo a la de emiliodeg, pero por favor no te saltes el turno o será un desbarajuste.

texto dtexto ctexto btexto a

Mikel.

[metacortex]

Gracias por la explicación .

Creo que ya se han dado varias respuestas válidas, así que cuando quieras Mikel.

[Mikmoro]

De acuerdo.

Si tenemos una caja con un enlace dentro:

<div class="caja"><a href="#">Enlace</a></div>

y la caja tiene este selector:

.caja {width:100px;
height:40px;
background-color:red;
font-size: 16px;
}

Teniendo esto para el enlace;

a {text-decoration: none;}

¿Qué propiedad añadiríamos al enlace para centrarlo verticalmente dentro de la caja? (sólo una, y procurad dar la explicación).

Mikel.

[AlvaroG]

me suena de un tema reciente

line-height : 40px;

Jeje, edito porque faltó la explicación.

Line-height (altura de la línea) es el espacio que queda, justamente, para la línea. Es similar al "interlineado" de los procesadores de texto.
Al darle el mismo valor que la altura de la caja, el texto se queda centrado.

[Mikmoro]

¡¡¡CORRECTO!!!

Tu turno, Alvlin.

Mikel.