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. Me imagino que exclusivo de maquetación web....

  #271 (permalink)  
Antiguo 27/07/2008, 16:31
 
Fecha de Ingreso: marzo-2008
Mensajes: 166
Antigüedad: 9 años, 8 meses
Puntos: 5
Respuesta: Trivia: Conceptos CSS

Me imagino que exclusivo de maquetación web.
  #272 (permalink)  
Antiguo 27/07/2008, 18:11
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
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.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #273 (permalink)  
Antiguo 27/07/2008, 18:20
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

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

Cita:
Iniciado por derkenuke Ver Mensaje
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
  #274 (permalink)  
Antiguo 27/07/2008, 18:36
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
¿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.
__________________
Visita mi nueva web idplus.org
  #275 (permalink)  
Antiguo 27/07/2008, 22:58
 
Fecha de Ingreso: marzo-2008
Mensajes: 166
Antigüedad: 9 años, 8 meses
Puntos: 5
Respuesta: Trivia: Conceptos CSS

Cita:
Iniciado por metacortex Ver Mensaje
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.
  #276 (permalink)  
Antiguo 28/07/2008, 10:36
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

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?
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #277 (permalink)  
Antiguo 28/07/2008, 10:43
Avatar de faiverson  
Fecha de Ingreso: mayo-2005
Mensajes: 79
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: Trivia: Conceptos CSS

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...
__________________
Fabi... fighting versus the web
  #278 (permalink)  
Antiguo 28/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

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

Turno para ti.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #279 (permalink)  
Antiguo 28/07/2008, 13:00
Avatar de faiverson  
Fecha de Ingreso: mayo-2005
Mensajes: 79
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: Trivia: Conceptos CSS

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?
__________________
Fabi... fighting versus the web
  #280 (permalink)  
Antiguo 28/07/2008, 13:14
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Trivia: Conceptos CSS

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)
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #281 (permalink)  
Antiguo 28/07/2008, 13:16
Avatar de faiverson  
Fecha de Ingreso: mayo-2005
Mensajes: 79
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: Trivia: Conceptos CSS

Bien, era eso...

Continue kseso?
__________________
Fabi... fighting versus the web
  #282 (permalink)  
Antiguo 28/07/2008, 13:26
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Trivia: Conceptos CSS

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:
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #283 (permalink)  
Antiguo 28/07/2008, 13:35
Avatar de K-Yezaad  
Fecha de Ingreso: octubre-2005
Mensajes: 140
Antigüedad: 12 años, 1 mes
Puntos: 3
Respuesta: Trivia: Conceptos CSS

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.
  #284 (permalink)  
Antiguo 28/07/2008, 13:45
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Trivia: Conceptos CSS

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,
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #285 (permalink)  
Antiguo 28/07/2008, 13:57
Avatar de faiverson  
Fecha de Ingreso: mayo-2005
Mensajes: 79
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: Trivia: Conceptos CSS

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.
__________________
Fabi... fighting versus the web
  #286 (permalink)  
Antiguo 28/07/2008, 14:03
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Trivia: Conceptos CSS

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #287 (permalink)  
Antiguo 28/07/2008, 16:37
Avatar de K-Yezaad  
Fecha de Ingreso: octubre-2005
Mensajes: 140
Antigüedad: 12 años, 1 mes
Puntos: 3
Respuesta: Trivia: Conceptos CSS

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

Última edición por K-Yezaad; 28/07/2008 a las 16:39 Razón: Aclaración
  #288 (permalink)  
Antiguo 28/07/2008, 16:57
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 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?
__________________
Visita mi nueva web idplus.org
  #289 (permalink)  
Antiguo 28/07/2008, 17:38
Avatar de K-Yezaad  
Fecha de Ingreso: octubre-2005
Mensajes: 140
Antigüedad: 12 años, 1 mes
Puntos: 3
Respuesta: Trivia: Conceptos CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
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.
  #290 (permalink)  
Antiguo 28/07/2008, 19:09
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

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
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 29/07/2008 a las 02:27 Razón: Olvidaba un pequeño detalle
  #291 (permalink)  
Antiguo 28/07/2008, 19:44
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

Por eso es que propuse no meternos con código, para evitar estas cosas.
  #292 (permalink)  
Antiguo 28/07/2008, 21:05
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

Jajjaja, dónde nos hemos metido...
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #293 (permalink)  
Antiguo 29/07/2008, 05: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

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

HTML:
Cita:
<div id="contenedor">
<div class="columna_izquierda">...</div>
<div class="columna_derecha">...</div>
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;
}
__________________
Visita mi nueva web idplus.org
  #294 (permalink)  
Antiguo 29/07/2008, 11:02
Avatar de K-Yezaad  
Fecha de Ingreso: octubre-2005
Mensajes: 140
Antigüedad: 12 años, 1 mes
Puntos: 3
Respuesta: Trivia: Conceptos CSS

De hecho, creo que me pase, adelante Mikomoro, tu turno.
  #295 (permalink)  
Antiguo 29/07/2008, 11:26
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

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?
__________________
Visita mi nueva web idplus.org
  #296 (permalink)  
Antiguo 29/07/2008, 11:54
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

Creo que es la segunda porque el z-index no funciona sin poner el position: absolute.
  #297 (permalink)  
Antiguo 29/07/2008, 12:11
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 Raulmmmm Ver Mensaje
Creo que es la segunda porque el z-index no funciona sin poner el position: absolute.
O relative. CORRECTO.
Tu turno, Raulmmmm.
__________________
Visita mi nueva web idplus.org
  #298 (permalink)  
Antiguo 30/07/2008, 02:17
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

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> 
  #299 (permalink)  
Antiguo 30/07/2008, 13:10
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 Raulmmmm Ver Mensaje
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.
  #300 (permalink)  
Antiguo 30/07/2008, 14:41
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

Pero sólo "en teoría". Es fácil la respuesta, sólo hay que caer.
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.