Foros del Web » Creando para Internet » CSS »

Capas con width que lo superan según contenido.

Estas en el tema de Capas con width que lo superan según contenido. en el foro de CSS en Foros del Web. Hola. Tengo un problema con capas con "position:relative;" y un width determinado (500px). Son la misma clase (class="capa1"). Al parecer superan ligeramente los 500px según ...
  #1 (permalink)  
Antiguo 04/06/2009, 06:17
 
Fecha de Ingreso: mayo-2007
Mensajes: 256
Antigüedad: 10 años, 7 meses
Puntos: 3
Capas con width que lo superan según contenido.

Hola. Tengo un problema con capas con "position:relative;" y un width determinado (500px). Son la misma clase (class="capa1"). Al parecer superan ligeramente los 500px según el contenido (<p>parrafos</p>) de manera que cuando estan unas encima de otras, separadas por un salto de linea, según el contenido que tengan, una se ve mas ancha que otra (unos 4px). Dichas capas tambien tienen aplicado un padding de 12 excepto el top que es de 32. En IE.
A ver si alguien puede echarme un cable.
  #2 (permalink)  
Antiguo 04/06/2009, 07:47
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Capas con width que lo superan según contenido.

¿Podrías poner el código como lo tienes o un enlace a una página de ejemplo? Así será más fácil reproducir el problema y saber cómo se puede solucionar.

Saludos.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 04/06/2009, 08:51
 
Fecha de Ingreso: mayo-2007
Mensajes: 256
Antigüedad: 10 años, 7 meses
Puntos: 3
Respuesta: Capas con width que lo superan según contenido.

Cita:
Iniciado por David el Grande Ver Mensaje
¿Podrías poner el código como lo tienes o un enlace a una página de ejemplo? Así será más fácil reproducir el problema y saber cómo se puede solucionar.

Saludos.
http://kimoweb.webcindario.com/web/zonapruebas/

El tamaño de caja es, creo, el que tiene la seccion "pedidos y formas de envio" y actividades. Sin embargo las demás aparecen deformadas por su contenido. En el caso del formulario no me importa demasiado, puedo cambiarlo. El problema es por ejemplo en el index y "quienes somos" que solo teniendo parrafos se deforma la caja haciendose algo mas grande a pesar de que como decia tienen un ancho dado. Si, por ejemplo le cambio el ancho de 500 a 400px en "quienes somos" podemos ver que la segunda caja tambien aparece mas pequeña que la primera (aunque tampoco sé por qué no pasa con 500 px)

El estilo es este;

.box{
background-color:ffffff;
border-style:solid;
border-color:#000000;
border-width:2px;
font-size:11px;
font-weight:bold;
font-style:italic;
padding-top:32px;
padding-left:12px;
padding-right:12px;
padding-bottom:12px;
position:relative;
width:500px;
max-width:400px;
z-index:100;
}
  #4 (permalink)  
Antiguo 04/06/2009, 12:35
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Capas con width que lo superan según contenido.

no entiendo muy bien lo dices, te refieres a esto?

__________________
WFC
codigo82
  #5 (permalink)  
Antiguo 04/06/2009, 14:42
 
Fecha de Ingreso: mayo-2007
Mensajes: 256
Antigüedad: 10 años, 7 meses
Puntos: 3
Respuesta: Capas con width que lo superan según contenido.

Cita:
Iniciado por willyfc Ver Mensaje
no entiendo muy bien lo dices, te refieres a esto?

No, no era eso. De hecho he corregido lo que hacia que saliera eso. Como ya dije hablaba de como se veia en Internet Explorer. De todas formas en Firefox segurias viendo que la capa rosa que presumiblemente es el contenedor de las otras se ve pequeña respecto a ellas cuando ambas deberian medir de ancho 500 px.
En concreto el problema en IE es que si vas cambiando de seccion ves como el ancho de la caja blanca varia ligeramente, unos pocos pixeles, cuando todas tienen la misma clase y deberian tener 500 pixeles de ancho asi como la capa donde estan metidas que mide iguyalmente 500 px. Creo que varía según el contenido y no entiendo por qué.

Acabo de corregir la sección "quienes somos" reduciendo el texto de la segunda caja de modo que ahi ahora se ve a que me refiero; la diferencia de ancho con la primera caja. (En IE)
  #6 (permalink)  
Antiguo 04/06/2009, 14:49
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Capas con width que lo superan según contenido.

Modifica:
Cita:
#mainbox {/*global.css (línea 68)*/
background-color:pink; /*mejor usa notación hexadecimal */
left:135px;
position:absolute;
top:15px;
width:500px;
overflow: auto;
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 05/06/2009, 05:00
 
Fecha de Ingreso: mayo-2007
Mensajes: 256
Antigüedad: 10 años, 7 meses
Puntos: 3
Respuesta: Capas con width que lo superan según contenido.

Efectivamente eso corrige que la capa rosa tenga el mismo tamaño en Firefox pero como decía el problema que intento corregir es el que aparece (sigue apareciendo) en IE.
Para la capa rosa no use hexadecimal porque esa capa va sin color, solo se lo di para ver como se comportaba la capa.
  #8 (permalink)  
Antiguo 05/06/2009, 19:04
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Capas con width que lo superan según contenido.

Hola harvey

Ese problema se presenta por la peculiar (!!) forma de interpretar el padding que tiene iexplorer.

Con dos pequeños cambios en global.css te queda todo arreglado:

Código:
/*arreglos: sustituye estos dos estilos*/

#mainbox {
	background-color: #fff;
	position: absolute;
	top: 15px;
	left: 135px;
	overflow: auto;
	border: 2px solid #000;
}
.box {
	background-color: #fff;
	font-size: 11px;
	font-weight: bold;
	font-style: italic;
	margin: 12px;
	margin-top: 32px;
	width: 500px;
}
Como verás he cambiado el padding por márgenes, siendo el resultado visual el mismo y quedan arreglados los desajustes en todas las páginas en iexplorer (y en los otros navegadores también funcionan bien).

Es importante que sepas que estás editando en modo quirks (no sujeto a ningún estandard) y que sería bueno que le colocaras un doctype adecuado. En este caso es casi seguro que tendrás que retocar cosas para que todo te vuelva a cuadrar.

Míralo, y comenta.

Saludos
  #9 (permalink)  
Antiguo 06/06/2009, 04:27
 
Fecha de Ingreso: mayo-2007
Mensajes: 256
Antigüedad: 10 años, 7 meses
Puntos: 3
Respuesta: Capas con width que lo superan según contenido.

Cita:
Iniciado por ssclamp Ver Mensaje
Hola harvey

Ese problema se presenta por la peculiar (!!) forma de interpretar el padding que tiene iexplorer.

Con dos pequeños cambios en global.css te queda todo arreglado:

Código:
/*arreglos: sustituye estos dos estilos*/

#mainbox {
	background-color: #fff;
	position: absolute;
	top: 15px;
	left: 135px;
	overflow: auto;
	border: 2px solid #000;
}
.box {
	background-color: #fff;
	font-size: 11px;
	font-weight: bold;
	font-style: italic;
	margin: 12px;
	margin-top: 32px;
	width: 500px;
}
Como verás he cambiado el padding por márgenes, siendo el resultado visual el mismo y quedan arreglados los desajustes en todas las páginas en iexplorer (y en los otros navegadores también funcionan bien).

Es importante que sepas que estás editando en modo quirks (no sujeto a ningún estandard) y que sería bueno que le colocaras un doctype adecuado. En este caso es casi seguro que tendrás que retocar cosas para que todo te vuelva a cuadrar.

Míralo, y comenta.

Saludos
Verás hace un par de dias me di cuenta que no tenia el doctype asi que lo puse y rehice la web paralelamente aunque mantuve en una carpeta esta. Y es que aunque conocía el tema de la interpretación distinta por parte de los navegadores del padding no acababa de acertar que era exactamente lo que estaba haciendo. De hecho sigo sin entender porqué varía si la forma en que IE interpreta el padding NO afecta al ancho de la caja que viene dado por width. Y tenia curiosidad por saber por qué se estaba dando el error.

En la que estaba desarrollando paralelamente, esta vez con su doctype, me encontre que IE interpretaba el padding y el border de la misma manera que lo hacía Firefox. Así que estupendo, ahora en ambos navegadores (y Google Chrome) se veian igual... Pero no me gusta nada la forma en que la W3C plantea la interpretación de border y padding respecto al width.

Buscando en Internet encontré box-sizing que permite decidir como se tiene que portar el navegador al respecto y lo hace a la manera clásica de IE con box-sizing:border-box pero no funcionaba en ninguno de los navegadores que probé (IE, Firefox y Chrome) lo que me llevó a hacer la consulta que tengo hecha en otro post.

http://www.forosdelweb.com/f53/uso-b...er-box-706751/

Voy a seguir planteando ese tema en el otro post. Gracias por tu ayuda.
Gracias a los demás tambien.
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




La zona horaria es GMT -6. Ahora son las 18:48.