Trivia: Conceptos CSS

GastoNike · #**271** (**permalink**) 27/07/2008, 15:31

Me imagino que exclusivo de maquetación web.

derkenuke · #**272** (**permalink**) 27/07/2008, 17:11

Cita:

Iniciado por metacortex

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

Yo no he entendido del todo la pregunta. ¿Te refieres si las abreviaciones se dan en todos los demás ámbitos en los que se trate el color? Si es así la respuesta es falsa, porque por ejemplo en el photoshop los colores no se pueden abreviar, y que yo sepa sólo los he visto abreviados en una hoja de estilos (ni siquiera para el atributo color de la antigua etiqueta font en html)

Saludos.

metacortex · #**273** (**permalink**) 27/07/2008, 17:20

Eso es correcto. La abreviación de hexadecimales es un procedimiento exclusivo de la maquetación web.

Cita:

Iniciado por derkenuke

Yo no he entendido del todo la pregunta. ¿Te refieres si las abreviaciones se dan en todos los demás ámbitos en los que se trate el color?

¿Existe alguna otra forma de interpretar la pregunta? ;)

Turno para derkenuke

Mikmoro · #**274** (**permalink**) 27/07/2008, 17:36

Cita:

Iniciado por metacortex

¿Existe alguna otra forma de interpretar la pregunta? ;)

Bueno, imagino que la duda viene de que el hexadecimal no sólo se usa para el color en la informática.

GastoNike · #**275** (**permalink**) 27/07/2008, 21:58

Cita:

Iniciado por metacortex

Eso es correcto. La abreviación de hexadecimales es un procedimiento exclusivo de la maquetación web.

¿Existe alguna otra forma de interpretar la pregunta? ;)

Turno para derkenuke

:S Pensé que yo la había contestado. Pero ekis, lanza la pregunta derkenuke.

derkenuke · #**276** (**permalink**) 28/07/2008, 09:36

Tenemos este HTML:

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>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	@import "estilo2.css";
	#capa { background-color: olive; }
</style>
</head>

<body>

<div id="capa" style="background: green;">aa</div>


</body>
</html>

Y la hoja de estilos estilo.css tiene este contenido:

Código:

#capa { background-color: red !important; }

La hoja de estilos importada estilo2.css tiene este contenido:

Código:

#capa { background-color: blue; }

¿Prevalece el !important para todas las demás instrucciones, luego se ve roja la capa? ¿Se sobrescribe la propiedad backgorund-color al último valor?

faiverson · #**277** (**permalink**) 28/07/2008, 09:43

Sin probar nada del codigo, supongo que deberia prevalecer el important ya que su uso es justamente para decirle que si hay varios no tenga los otros en cuenta...

derkenuke · #**278** (**permalink**) 28/07/2008, 09:58

Exacto faiverson, prevalece el important sobre cualquier instrucción de cualquier tipo.

Turno para ti.

faiverson · #**279** (**permalink**) 28/07/2008, 12:00

Las propiedades Display y Visibility sirven para ocultar un elemento. Pues bien, cual es la gran diferencia entra estas dos? Cuando deberiamos usar Display y cuando Visibility?

kseso? · #**280** (**permalink**) 28/07/2008, 12:14

Las dos ocultan el elemento.
Con Display: none; el resto de elementos se comportan como si este no existiese y con
Visibility: hidden; su posición se respeta aunque no se muestre (vamos, que no se ve pero sí 'ocupa' espacio)

faiverson · #**281** (**permalink**) 28/07/2008, 12:16

Bien, era eso...

Continue kseso?

kseso? · #**282** (**permalink**) 28/07/2008, 12:26

Pues ya era hora que quitase el 0 de mi marcador.
Vamos allá:
Cliente:
"A ver, señor diseñador, me gusta mucho cómo me ha dejado la página, PERO solo una cosita. Esa raya que me pone en los enlaces rojos me gusta, PERO apenas se ve, tan delgadita ella y también roja, así que déjeme el enlace con las letras rojas PERO la rayita que se vea AZUL y más gorda"
Diseñador:

Vosotros, maestros:

Cliente:

K-Yezaad · #**283** (**permalink**) 28/07/2008, 12:35

Cita:

"A ver, señor diseñador, me gusta mucho cómo me ha dejado la página, PERO solo una cosita. Esa raya que me pone en los enlaces rojos me gusta, PERO apenas se ve, tan delgadita ella y también roja, así que déjeme el enlace con las letras rojas PERO la rayita que se vea AZUL y más gorda"

Código:

a{
color:#f00;
text-decoration:none;
border-bottom: 5px solid #00f;
}

Despues de eso asesino al cliente por hacerle semejante daño a mis ojos. Pero cobro primero.

kseso? · #**284** (**permalink**) 28/07/2008, 12:45

Jeje, que detrás de ese vendrán más, y en la trena no hay 'manga ancha'
Excepto que #f00 no es #ff0000, por mí vale,

faiverson · #**285** (**permalink**) 28/07/2008, 12:57

Esta mal la correccion. #f00 SI ES #ff0000. La abreviacion de seis en tres, toma un caracter como dos: o sea f->ff 0->00 y 0->00
Por ende... #f00 y #ff0000 es igual.

kseso? · #**286** (**permalink**) 28/07/2008, 13:03

Hola faiverson, pues acabo de descubrir un bug en PSPad, ya que me dice:
#f00= R:15 G:0 B:0
#ff0000= R:255 G:0 B:0
Siempre se aprende algo nuevo

K-Yezaad · #**287** (**permalink**) 28/07/2008, 15:37

OK creo que sigo yo...
Tenemos dos divs con texto de diferentes extensiones, como logro que queden como dos columnas de esta manera?

No se vale altura fija. El layout tiene que poder adaptarse a cualquier longitud de texto.
EDIT: Ignoren el tamaño de letra cambiante de la izquierda. Pegue el texto con un tamaño muy grande y a mitad de la correción decidí que me gustaba como se veia :P

Mikmoro · #**288** (**permalink**) 28/07/2008, 15:57

Es una pregunta compleja en cuanto a que, como la respuesta es compleja, la pregunta debería ser muy detallada, es decir, por ejemplo: ¿ambas al crecer hacen crecer a la otra? ¿para todos los navegadores o sólo para los que entiende CSS correctamente?

K-Yezaad · #**289** (**permalink**) 28/07/2008, 16:38

Cita:

Iniciado por Mikmoro

Es una pregunta compleja en cuanto a que, como la respuesta es compleja, la pregunta debería ser muy detallada, es decir, por ejemplo: ¿ambas al crecer hacen crecer a la otra? ¿para todos los navegadores o sólo para los que entiende CSS correctamente?

Perdon por la falta de detalles, en efecto, ambos divs deben mantenerse del mismo tamaño al crecer uno u otro.

Debido a que hacer esto en IE seria un poco complicado (aunque si se puede) si jala en Firefox o en Opera con eso basta. Creidto extra si jala en Firefox e IE.

Mikmoro · #**290** (**permalink**) 28/07/2008, 18:09

Como imagino que hablabas del famoso hack de los 3000px, he estado buscando otra forma de hacerlo. Esta funciona en FF, Opera, Safari e IE7. Estoy bucando la manera de compatibilizarlo con IE6

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Trivial</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#caja_d {position: relative;
width: 850px;
margin: 20px auto;
color:#fff;
background-color: #82b04d;
overflow: auto;
}
#caja_i {position: absolute;
top:0;
bottom: 0;
left:0;
width: 340px;
background-color: #4c9ab1;
border-right: solid 30px #fff;
}
.columna_izquierda {width: 300px;
float: left;
padding: 20px;
position: relative;
}
.columna_derecha {width: 440px;
margin-left: 370px;
padding: 20px;
position: relative;
}
</style>
</head>
<body>
<div id="caja_d">
<div id="caja_i"></div>

<div class="columna_izquierda">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

<div class="columna_derecha">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

</div>
</body>
</html>

Para ser una pregunta del trivial es un poco bestia

metacortex · #**291** (**permalink**) 28/07/2008, 18:44

Por eso es que propuse no meternos con código, para evitar estas cosas.

derkenuke · #**292** (**permalink**) 28/07/2008, 20:05

Jajjaja, dónde nos hemos metido...

Mikmoro · #**293** (**permalink**) 29/07/2008, 04:04

Por cierto, que si no ha funcionar en IE, es mucho más sencillo:

HTML:

Cita:

CSS:

Cita:

#contenedor {display: table;
width: 850px;
margin: 0 auto;
color: #fff;
}
.columna_izquierda {display: table-cell;
width: 300px;
padding: 20px;
border-right: solid 20px #fff;
background-color: #4c9ab1;
}
.columna_derecha {display: table-cell;
width: 420px;
padding: 20px;
background-color: #82b04d;
}

K-Yezaad · #**294** (**permalink**) 29/07/2008, 10:02

De hecho, creo que me pase, adelante Mikomoro, tu turno.

Mikmoro · #**295** (**permalink**) 29/07/2008, 10:26

Una facilita para los menos experimentados:

Si tenemos dos cajas normales:

<div id="caja1"></div>
<div id="caja2"></div>

con estos selectores con z-index;

Cita:

#caja1 {width: 200px;height: 200px;background-color: red; z-index: 100;}
#caja2 {width: 200px;height: 200px;background-color: blue; z-index: 1;position: absolute;top: 20px; left: 20px;}

¿Cuál de las dos cajas se verá en primer plano?

Raulmmmm · #**296** (**permalink**) 29/07/2008, 10:54

Creo que es la segunda porque el z-index no funciona sin poner el position: absolute.

Mikmoro · #**297** (**permalink**) 29/07/2008, 11:11

Cita:

Iniciado por Raulmmmm

Creo que es la segunda porque el z-index no funciona sin poner el position: absolute.

O relative. CORRECTO.
Tu turno, Raulmmmm.

Raulmmmm · #**298** (**permalink**) 30/07/2008, 01:17

Bueno una que te hace pensar un poco pero es fácil:
¿Por qué este código no funciona en IE7?

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>

metacortex · #**299** (**permalink**) 30/07/2008, 12:10

Cita:

Iniciado por Raulmmmm

Bueno una que te hace pensar un poco pero es fácil:
¿Por qué este código no funciona en IE7?

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 teoría debería funcionar perfectamente en IE7. Donde no funcionaría es en IE6 debido a que éste hace caso omiso de -en este caso- li:hover como tal. IE6 sólo procesa este pseudoselector cuando se refieren a un enlace, bien sea li a:hover o a.clase:hover.

Raulmmmm · #**300** (**permalink**) 30/07/2008, 13:41

Pero sólo "en teoría". Es fácil la respuesta, sólo hay que caer.