Foros del Web » Creando para Internet » CSS »

body * {overflow: hidden }

Estas en el tema de body * {overflow: hidden } en el foro de CSS en Foros del Web. Estoy maquetando una página y se me ocurrió colocar: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original body * {   overflow : hidden ; } Mi ...
  #1 (permalink)  
Antiguo 07/05/2010, 15:26
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
body * {overflow: hidden }

Estoy maquetando una página y se me ocurrió colocar:

Código CSS:
Ver original
  1. body * {
  2.   overflow: hidden;
  3. }
Mi pueblo, el estilo hace milagros, incluyendo algunos aspectos de ie6. En síntesis se obtiene aún más control sobre los elementos (pero bastante más control).

En realidad esto es lo que tengo en la primera línea de la hoja:

Código CSS:
Ver original
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5.  
  6. body * {
  7.   overflow: hidden;
  8. }
Cuando vayan a maquetar pruébenlo, aunque sea por curiosidad. Luego me comentan qué tal les fue.

Si acaso existen puntos en contra, aún no me he tropezado con éstos en lo poco que llevo aplicando el método, pero hasta ahora todo va excelente.

Última edición por metacortex; 07/05/2010 a las 17:01 Razón: Cambiar ese selector html *
  #2 (permalink)  
Antiguo 07/05/2010, 15:53
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: body * {overflow: hidden }

emmm.... es un poco atrevido...
ya que en x circunstancias nos podrian resultar un poco complicadas..
por ejemplo... en posiciones abosolutas con left, top, etc... negativos...
o el scroll en los textarea.
seria interesante investigar a que elemento aplica el haslayout...
aparte de forzar las dimensiones a los elementos (y tener cuidado con los elementos en linea que heredan line-height con height:auto y limpiar los floats claro....
como un *{height:1%;} o un *{position:relative;} o mejor el *{zoom:1;} (pero este ultimo invalida) tambien nos sacan del apuro pero aveces pueden salirse un poco de control las cosas...
Igual no se pierde nada con probar... gracias por el aporte!!!
  #3 (permalink)  
Antiguo 07/05/2010, 15:55
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: body * {overflow: hidden }

Básicamente es agregar una propiedad más de reset, pero en verdad que ayuda mucho, no se por que nadie más lo ha puesto. Lo que uno descubre trabajando

Yo encuentro algo, pero es por la forma en que reseteas, el usar el asterisco carga más al procesador, lo mejor sería hacer algo así, que puede ser modificado dependiendo de las necesidades del sitio.

Código CSS:
Ver original
  1. html, body, div, span, table, caption,  
  2. tbody, tfoot, thead, tr, th, td, del, dfn,
  3. em, font, img, small, strike, strong,
  4. h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,  
  5. acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,  
  6. fieldset, form, label, legend {
  7.     border: 0;
  8.     margin: 0;
  9.     padding: 0;
  10.     overflow: hidden;
  11.     position: relative; /*agregando para corregir algunos fallos en IE6*/
  12.     }

Aún se debería agregar algunas más para minimizar más las diferencias pero con este ya tienes una buena parte.

PD: Deberíamos hacer nuestro propio reset de Foros del Web

Saludos
__________________
Grupo Telegram Docker en Español
  #4 (permalink)  
Antiguo 07/05/2010, 16:05
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: body * {overflow: hidden }

Lo que entiendo, no es que cargue más el procesador (puede ser), es que hay elementos que no requieren los estilos indicadas y el * asigna a todos los elementos el estilo que estoy indicando. Lo mejor es especificar que corresponde a que elemento, ejemplo lean este articulo específicamente este comentario.
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #5 (permalink)  
Antiguo 07/05/2010, 16:08
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: body * {overflow: hidden }

bueno en el reset que pones, almenos no suelo usarlo ya que no siempre se utilizar todas esas etiquetas pero bueno....
Código:
html, body, div, span, table, caption,  
tbody, tfoot, thead, tr, th, td, del, dfn, 
em, font, img, small, strike, strong, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,  
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend { 
    border: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative; /*agregando para corregir algunos fallos en IE6*/
    }
alli quitarias el scroll de la pagina por eso puso
Código:
body * {
  overflow: hidden;
}
para que no pase eso...

Cita:
PD: Deberíamos hacer nuestro propio reset de Foros del Web
+1

-------------------------------------------------
abimaelrc
vamos si es una carga de procesador, pero muy minima es como color:white; envez de #FFF; una y otra vez claro que agota un poco pero no es para tanto...
y al usar un selector universal pues multiplica esto una y otra vez jeje... aun que por comodidad prefiero usarlo de esa manera.

Última edición por alexk; 07/05/2010 a las 16:13 Razón: comentar lo dicho antes de mi post
  #6 (permalink)  
Antiguo 07/05/2010, 16:17
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: body * {overflow: hidden }

Cita:
Iniciado por abimaelrc Ver Mensaje
Lo que entiendo, no es que cargue más el procesador (puede ser), es que hay elementos que no requieren los estilos indicadas y el * asigna a todos los elementos el estilo que estoy indicando.
Claro, además de aplicar estilos innecesarios, la carga aumenta.

Cita:
Iniciado por alexk Ver Mensaje
bueno en el reset que pones, almenos no suelo usarlo ya que no siempre se utilizar todas esas etiquetas pero bueno....
Bueno, cualquier reset que utilices deberías adaptarlo dependiendo de las necesidades de tu sitio, por ejemplo en mi sitio tengo así (además de otras cosas):

Código CSS:
Ver original
  1. html, body, div, span, h1, h2, h3, p, pre, a, em, img,
  2. small, strike, strong, ul, li, form, label, legend {
  3.     margin: 0;
  4.     padding: 0;
  5.     border: 0;
  6.     outline: 0;
  7.     font-size: 14px;
  8.     background: transparent;
  9.     line-height: 1;
  10. }

Lo tengo así por que ese sitio en especifico no necesitaba más, pero claro siempre cambia.
__________________
Grupo Telegram Docker en Español
  #7 (permalink)  
Antiguo 07/05/2010, 16:22
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: body * {overflow: hidden }

@alexk, estoy de acuerdo, por eso indique puede ser, ya que siempre se va a cargar el procesador. Pero entiendo que el propósito principal es especificar que estilos corresponde a que elementos, más que por la carga. Pero repito tienes razón que aunque sea un micro-segundo debe aumentarse
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #8 (permalink)  
Antiguo 07/05/2010, 16:31
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: body * {overflow: hidden }

Cita:
Bueno, cualquier reset que utilices deberías adaptarlo dependiendo de las necesidades de tu sitio, por ejemplo en mi sitio tengo así (además de otras cosas):
pues si, en mi caso.. suelo usar una especie de "mini-framework"

Código CSS:
Ver original
  1. *{background:transparent;font:inherit;margin:0;padding:0;vertical-align:baseline;}
  2. :focus{outline:0;}
  3. a img, .inp_txt, .inp_btn{border:0;}
  4. .inp_txt{line-height:normal;}
  5. .inp_btn, a span{cursor:pointer;}
  6. ul li{list-style:none;}
  7. .f_left{float:left;width:auto;}
  8. .f_right{float:right;width:auto;}
  9. .p_relative{position:relative;}
  10. .p_absolute{position:absolute;}
  11. .d_block{display:block;}
  12. .d_inline, .f_left, .f_right{display:inline;}
  13. .d_inline-b{display:inline-block;}
  14. .d_none{display:none;}
  15. .italic{font-style:italic;}
  16. strong, .bold{font-weight:700;}
  17. .txt_cen{text-align:center;}
  18. .txt_lef{text-align:left;}
  19. .txt_rig{text-align:right;}
  20. .txt_may{text-transform:uppercase;}
  21. a{text-decoration:none;}
  22. h1, h2, h3, h4, h5, h6{font-weight:400;}
  23. .ovw{overflow:hidden;}
  24. .clr{clear:both;}
  25. .divcen{margin:0 auto;}
  26. table{border-collapse:collapse;border-spacing:0;}
  27. .w960px{width:960px;}
  28. .w100{width:100%;}
  29. .mgbot10px{margin-bottom:10px;}.
  30. .white, .white a{color:#FFF;}
  31. body, a, .black{color:#000;}
  32. .fsz14px{font-size:14px;}
claro que va creciendo o cambiando segun el proyecto... pero normalmente este es el estandar... y me funciona de maravilla... y claro todo empezo con
Código CSS:
Ver original
  1. * { margin: 0; padding: 0;}
jeje... pero bueno... de gustos... los colores... nadie lo hace igual... es lo bonito del CSS... no hay una regla establecida...
  #9 (permalink)  
Antiguo 07/05/2010, 16:37
(Desactivado)
 
Fecha de Ingreso: mayo-2010
Mensajes: 36
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: body * {overflow: hidden }

una pregunta amigos ... esto es un "RESET"

Código CSS:
Ver original
  1. *{background:transparent;font:inherit;margin:0;padding:0;vertical-align:baseline;}
  2.       :focus{outline:0;}
  3.       a img, .inp_txt, .inp_btn{border:0;}
  4.       .inp_txt{line-height:normal;}
  5.       .inp_btn, a span{cursor:pointer;}
  6.       ul li{list-style:none;}
  7.       .f_left{float:left;width:auto;}
  8.       .f_right{float:right;width:auto;}
  9.       .p_relative{position:relative;}
  10.       .p_absolute{position:absolute;}
  11.       .d_block{display:block;}
  12.       .d_inline, .f_left, .f_right{display:inline;}
  13.       .d_inline-b{display:inline-block;}
  14.       .d_none{display:none;}
  15.       .italic{font-style:italic;}
  16.       strong, .bold{font-weight:700;}
  17.       .txt_cen{text-align:center;}
  18.       .txt_lef{text-align:left;}
  19.       .txt_rig{text-align:right;}
  20.       .txt_may{text-transform:uppercase;}
  21.       a{text-decoration:none;}
  22.       h1, h2, h3, h4, h5, h6{font-weight:400;}
  23.       .ovw{overflow:hidden;}
  24.       .clr{clear:both;}
  25.       .divcen{margin:0 auto;}
  26.       table{border-collapse:collapse;border-spacing:0;}
  27.       .w960px{width:960px;}
  28.       .w100{width:100%;}
  29.       .mgbot10px{margin-bottom:10px;}.
  30.       .white, .white a{color:#FFF;}
  31.       body, a, .black{color:#000;}
  32.       .fsz14px{font-size:14px;}
  #10 (permalink)  
Antiguo 07/05/2010, 16:41
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: body * {overflow: hidden }

A migo, viendo tus mensajes (en este tema y el otro), parece que no tienes ni idea de CSS, lo mejor es que empieces con eso: www.librosweb.es

Y como dijo el compañero Alexk, se trata de un miniframework.
__________________
Grupo Telegram Docker en Español
  #11 (permalink)  
Antiguo 07/05/2010, 16:47
(Desactivado)
 
Fecha de Ingreso: mayo-2010
Mensajes: 36
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: body * {overflow: hidden }

@Carlangueitor se nota que sabes mas que yo.. me das una mano con mi problema... :(
  #12 (permalink)  
Antiguo 07/05/2010, 16:59
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: body * {overflow: hidden }

amx_kill
se paciente... que hacerle la pelota a todo FW no conseguiras ayuda... si aun no te responden es que o no han visto el mensaje o no les apetece... ya que no es una obligacion perdona por decirlo asi pero es lo que hay... no ensuciemos el bonito hilo que hay aqui que promete...
  #13 (permalink)  
Antiguo 07/05/2010, 17:02
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: body * {overflow: hidden }

Cita:
Iniciado por abimaelrc Ver Mensaje
Lo que entiendo, no es que cargue más el procesador (puede ser), es que hay elementos que no requieren los estilos indicadas y el * asigna a todos los elementos el estilo que estoy indicando. Lo mejor es especificar que corresponde a que elemento, ejemplo lean este articulo específicamente este comentario.
Completamente de acuerdo.
  #14 (permalink)  
Antiguo 07/05/2010, 17:08
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: body * {overflow: hidden }

Añado, sería bueno que FDW indique su propio reset. Ya como han indicado anteriormente CSS no tiene una regla/ley establecida.

Edito:
Pero antes de añadirlo, que se defina cuál debe ser el que se sugiere. Bueno pero eso se debe hacer en otro hilo
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos

Última edición por abimaelrc; 07/05/2010 a las 17:19
  #15 (permalink)  
Antiguo 08/05/2010, 12:08
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: body * {overflow: hidden }

Cita:
Iniciado por alexk Ver Mensaje
emmm.... es un poco atrevido...
ya que en x circunstancias nos podrian resultar un poco complicadas..
por ejemplo... en posiciones abosolutas con left, top, etc... negativos...
o el scroll en los textarea.
seria interesante investigar a que elemento aplica el haslayout...
aparte de forzar las dimensiones a los elementos (y tener cuidado con los elementos en linea que heredan line-height con height:auto y limpiar los floats claro....
como un *{height:1%;} o un *{position:relative;} o mejor el *{zoom:1;} (pero este ultimo invalida) tambien nos sacan del apuro pero aveces pueden salirse un poco de control las cosas...
Igual no se pierde nada con probar... gracias por el aporte!!!
Te entiendo, y desde dicho enfoque quizás debamos verlo de esta manera: ¿Qué tipo de overflow conviene tener de forma predeterminada en X proyecto que estemos desarrollando?. Porque eso precisamente hace la propuesta inicial: imponer el hidden como overflow predeterminado y -en consecuencia- cambiar radicalmente el comportamiento de todos los elementos. A esta hora ya tengo un día maquetando y me ha ido de perlas .

Y bueno, cada vez estoy más convencido de que es mejor agregar overflow: visible, auto o scroll cuando sea necesario a casos individuales, mientras mantengo el hidden como propiedad global. De hecho hasta ahora pienso que es menos trabajoso (considerando los beneficios que reporta el hidden por defecto). Quizás convenga algo como esto:


Código CSS:
Ver original
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5.  
  6. body * {
  7.   overflow: hidden;
  8. }
  9.  
  10. pre {
  11.   overflow: auto; /* Con esto se acomodan todos los pre */
  12. }
  13.  
  14. .visible {
  15.   overflow: visible;
  16. }
De esta forma contamos con overflow:visible para ciertos elementos. Por ejemplo, si queremos que la capa .cosa tenga esta propiedad colocamos:

Código HTML:
Ver original
  1. <ul class="cosa visible">
  2. ...
Lo bueno es que esto es compatible con todos los navegadores .
  #16 (permalink)  
Antiguo 08/05/2010, 12:28
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: body * {overflow: hidden }

exacto... de hecho ayer... empeze con otro proyecto y aplique el truco y especifique como mencionas, y ya ta agregado al "mini-framework" jeje...

Código CSS:
Ver original
  1. body *{overflow:hidden;}
  2. .ovw_a{overflow:auto;}


Última edición por alexk; 08/05/2010 a las 12:28 Razón: edito... ups jeje

Etiquetas: body, hidden, overflow
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 4 personas




La zona horaria es GMT -6. Ahora son las 02:20.