Foros del Web » Creando para Internet » CSS »

el div contenido se sale fuera del div cuadro

Estas en el tema de el div contenido se sale fuera del div cuadro en el foro de CSS en Foros del Web. por que me hace esto http://usuarios.lycos.es/tabla2006/articulos.php como lo soluciono?...
  #1 (permalink)  
Antiguo 30/04/2006, 15:32
 
Fecha de Ingreso: enero-2006
Mensajes: 140
Antigüedad: 11 años, 11 meses
Puntos: 0
el div contenido se sale fuera del div cuadro

por que me hace esto
http://usuarios.lycos.es/tabla2006/articulos.php
como lo soluciono?
  #2 (permalink)  
Antiguo 30/04/2006, 15:34
 
Fecha de Ingreso: enero-2006
Mensajes: 140
Antigüedad: 11 años, 11 meses
Puntos: 0
mirar como queda en firefox
  #3 (permalink)  
Antiguo 01/05/2006, 12:56
 
Fecha de Ingreso: noviembre-2004
Mensajes: 50
Antigüedad: 13 años
Puntos: 1
es cierto a mi me pasa exactamente lo mismo, y asi no vale la pena maquetar con divs..
__________________
Los estandares deben hacer a los navegadores, no los navegadores a los estandares...
  #4 (permalink)  
Antiguo 01/05/2006, 15:22
 
Fecha de Ingreso: junio-2002
Mensajes: 751
Antigüedad: 15 años, 6 meses
Puntos: 22
En la hoja de estilos css elimina "height:50em;" de "#cuadro" o ponle 100%

A ver si así va mejor...

----
En la hoja parece que usas:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

En ese caso sería más conveniente usar <br/> por <br>, <img src="" /> por <img>.
Las letras con acentos y otros símbolos especiales podrías cambiarlas por su representación como carácter especial (á >> &aacute; etc)

espero que te sea de ayuda

Salu2
  #5 (permalink)  
Antiguo 01/05/2006, 16:02
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
y pero ustedes son vivos, si le dicen a la capa que tiene que tener 50em de alto si usas un navegador inteligente como Firefox lo respeta, en cambio IE no entiende y agranda la capa contenedora. Si te basas en el modelo de bill gates para maquetar en capas te va a ir muy mal.
__________________
Internet Explorer SuckS
Download FireFox
  #6 (permalink)  
Antiguo 01/05/2006, 19:36
 
Fecha de Ingreso: enero-2006
Mensajes: 140
Antigüedad: 11 años, 11 meses
Puntos: 0
lo de 50em fue por probar, la original era 100% y pasaba exactamente lo mismo.
pues estoy muy cabreada con este tema , asi q estoy haciendo la web con tablas hasta q encuentre una solucion q parece q no la voy a encontrar.
Lo siento ciegos!! :( lo intente
  #7 (permalink)  
Antiguo 01/05/2006, 21:26
 
Fecha de Ingreso: noviembre-2004
Mensajes: 50
Antigüedad: 13 años
Puntos: 1
bueno, hay alguna solución estandar para que los float:left; por ejemplo no se salgan del contenedor! ???
__________________
Los estandares deben hacer a los navegadores, no los navegadores a los estandares...
  #8 (permalink)  
Antiguo 01/05/2006, 22:11
 
Fecha de Ingreso: noviembre-2004
Mensajes: 50
Antigüedad: 13 años
Puntos: 1
Encontre una solución, no se si les paresca bien: http://www.publicars.com.mx/divtest
__________________
Los estandares deben hacer a los navegadores, no los navegadores a los estandares...

Última edición por Blueeye; 01/05/2006 a las 22:19
  #9 (permalink)  
Antiguo 01/05/2006, 22:22
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
gingerk:

Tal como mencionaban antes... en navegadores como Firefox u Ópera (y cualquier otro que tenga un buen soporte de CSS) cuando a un elemento le das una determinada altura, ésta siempre se va a mantener fija, independiente de la cantidad de contenido que pongas dentro del elemento. Por el contrario, en Internet Explorer esta altura no queda fija, y aumenta a medida que aumenta el contenido. En ese sentido, en IE la propiedad height se comporta igual que la propiedad min-height, la cual es compatible con el resto de navegadores.

Desde ese punto de vista tienes 2 opciones:

1. No especificar ninguna altura para el DIV, y dejar que sea su propio contenido el que condicione su tamaño.

2. Si se te hace necesario especificar la altura del DIV, deberías jugar con height (para IE) y con min-height (para el resto de navegadores). Para eso tienes varios métodos:

Método 1.
Definir la altura del DIV mediante min-height. Y para Internet Explorer definir su altura mediante height y una expresion javascript (así IE sólo entenderá height y el resto de navegadores solo entenderá min-height.

Código:
#elDiv{
    min-height:100px;
    height:expression(100 + 'px');
    }
Nota: si quieres darle una altura de 100%, aparte de cambiar px por % en el código anterior, también debes definir para los elementos HTML y BODY una altura de 100% mediante la propiedad height (al parecer en este caso ya no se requiere min-height).

Código:
html, body{
    height:100%;
    }
#elDiv{
    min-height:100%;
    height:expression(100 + '%');
    }
__________________
El conocimiento es libre: Movimiento por la Devolución
  #10 (permalink)  
Antiguo 02/05/2006, 06:56
 
Fecha de Ingreso: junio-2002
Mensajes: 751
Antigüedad: 15 años, 6 meses
Puntos: 22
Para los problemas con float y otros problemas con IE:
http://www.positioniseverything.net/explorer.html
  #11 (permalink)  
Antiguo 02/05/2006, 09:43
 
Fecha de Ingreso: enero-2006
Mensajes: 140
Antigüedad: 11 años, 11 meses
Puntos: 0
pues muchas gracias, lo probare.
un beso.
  #12 (permalink)  
Antiguo 08/05/2006, 12:28
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Cita:
Iniciado por SiR.CARAJ0DIDA
...si usas un navegador inteligente como Firefox...Si te basas en el modelo de bill gates para maquetar en capas te va a ir muy mal...
Solamente acotar que al margen de lo que pueda pensar cualquier persona con dos dedos de frente sobre una opinion 'muy' personal sin ningún apoyo o aclaración técnica, sí es cierto que el modelo que usa IE es bastante distinto al que propone el estándar, pero no sé si es mejor que el de FF, que tampoco estoy seguro de que respete las recomendaciones. -aunque como no estoy al tanto de lo que está aprobado y lo que no, tal vez habría que poner algún enlace al párrafo correspondiente en el sitio del W3C-

Cita:
Iniciado por frijolerou
...en navegadores como Firefox u Ópera (y cualquier otro que tenga un buen soporte de CSS) cuando a un elemento le das una determinada altura, ésta siempre se va a mantener fija, independiente de la cantidad de contenido que pongas dentro del elemento. Por el contrario, en Internet Explorer esta altura no queda fija, y aumenta a medida que aumenta el contenido...
Este tipo de mensajes me gustan mucho más.

Agrego un par de datos a tu respuesta, frijolerou. Para empezar, un enlace

CSS Min-Height Attribute Example

No hace falta usar expression como hack, se puede poner al final de las propiedades

Código:
#miDiv {min-height:100px; _height:100px; }
y el guión bajo sirve para que solamente lo vea el IExplorer, y el estar al final nos asegura que va a 'pisar' el valor anterior.

Me parece que la mejor forma de hacer ésto es

Código:
#miDiv {height:100px; overflow:scroll; /*auto*/}
Verán, las pruebas que recuerdo en FF me aceptaban la altura en una caja, pero el contenido se desbordaba cuando se pasaba de la medida . En el caso del IE, la caja se ajustaba al contenido, porque en una página web el contenido es siempre más importante que el diseño. Es cierto que hay sitios de 'web-artistas' donde "el diseño es el mensaje", pero lo más lógico es que prime el texto, las imágenes, los formularios; y recordemos que si no le damos a todo una medida absoluta y evitamos que el usuario la cambie, se supone que no podemos controlar cómo se verá nuestro sitio en cada navegador ... por lo tanto no sabemos si nuestro contenido va a caber realmente en su caja.

Lo que debe recomendar el estándar es que el contenido no se desborde, y ofrezca algún método -como las barras de desplazamiento- si no cabe.

Por supuesto que hay muchos casos en que las barras no son prácticas y habrá que inventar otra cosa, pero mientras tanto : o las usamos o adaptamos a los navegadores para que funcionen como el IE.
  #13 (permalink)  
Antiguo 14/08/2008, 22:58
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
Puntos: 15
Sonrisa Respuesta: el div contenido se sale fuera del div cuadro

Bueno, no ley mucho... pero mira si esto te sirve de algo
.................................................. .......................................
Código:
<!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" lang="es-es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding: 0;}
html, body {height: 100%;overflow: hidden;}
#presence{z-index:99;position:absolute;bottom:0px;right:0px;}

#envoltorio {overflow: auto;height: 96%;}

#presence{color:#111111;font-size:11px;height:25px;padding:0;margin-right:15px;}
#presence.full{margin-right:0;width:100%; background:#ccc;}
.full #presence_bar{float:right;}

div#CentradaLL {
margin: 7% auto 0 auto;
min-width:680px;
width:80%;
min-height:700px;
height:auto!important;
height:700px;
background:#666666;
padding:0;
}
div#contenedorD {
background:#fff; border:1px solid;
}
div#statusb { top:100%; width:100%; height:22px; left:0px;
background:#D7D4C5; position:absolute; z-index:100; margin-top:-22px;
padding:0;
float:right;
}
</style>
</head>
<body class="chat_body">
<div id="envoltorio">
<div id="CentradaLL">
<div id="contenedorD">Hola..</div>
</div>
</div>

<div id="presence" class="full">Barra</div>
</body>
</html>
  #14 (permalink)  
Antiguo 15/08/2008, 02:21
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Respuesta: el div contenido se sale fuera del div cuadro

El mensaje original es de hace más de 2 años. Por favor, no reviváis temas tan antiguos.

Saludos,
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.
Tema Cerrado




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