Foros del Web » Creando para Internet » CSS »

como evito este problema del div con css

Estas en el tema de como evito este problema del div con css en el foro de CSS en Foros del Web. ola gente miren tengo una web que estoy aciendo y la modifique con css los div y el problema es que me quedan asi miren: ...
  #1 (permalink)  
Antiguo 31/05/2009, 18:24
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Pregunta como evito este problema del div con css

ola gente miren tengo una web que estoy aciendo y la modifique con css los div y el problema es que me quedan asi miren:



cuando escribo sigue para adelante la letra como ago para que no siga y termine donde termina el div .
  #2 (permalink)  
Antiguo 31/05/2009, 18:54
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: como evito este problema del div con css

podrías poner un width: auto al div o un overflow: hidden al div, para que el texto no se muestre.
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 01/06/2009, 00:54
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: como evito este problema del div con css

Saludos!!

Te recomiendo que utilices las herramientas de HTML para lo que son. Si quieres poner un texto dentro de un div, te recomiendo que dentro de el div, abras un parrafo y que le des al parrafo los atributos que quieres, no al div, porque no es para eso. Te dejo un ejemplo:

Código HTML:
Ver original
  1. <div id="texto">
  2.   <p> bla bla bla bla bla bla bla <p>
  3. </div>

Código CSS:
Ver original
  1. #texto {
  2. width: 250px;
  3. height: 60px;
  4. margin: 0px;
  5. }
  6.  
  7. p {
  8. height: 240px;
  9. width: 50px;
  10. margin: 5px;
  11. }

Seguro funciona!

Hasta Luego!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #4 (permalink)  
Antiguo 01/06/2009, 04:38
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como evito este problema del div con css

Ese es el típico ejemplo de improbabilidad en la realidad del español escrito: (sólo se me ocurren dos situaciones que te lo puedan generar: o es un enlace o tu página es de una temática "supermegalacticalomastécnica" en compuestos químicos orgánicos escritos sin guiones ni separaciones). Poro más que una cuestión de css es de planteamiento del sitio.

Etiqueta correctamente como dice Caliz y prevé esos supuestos con el overflow como te recomienda Hades (y si realmente vas a utilizar palabras taaaan laaaaaaaaaaaaaaaaaagassssss se creativo y muéstralas enteras sólo al hacer over (por ejemplo)

Un salduo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 01/06/2009, 08:39
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Mensaje Respuesta: como evito este problema del div con css

en realidad no son palabras largar :P si no lo que pasa es que quiero agregar en esa parte los post que agrege el usuario. y me pasa ese problema :S..

ya entente con

Código:
overflow: hidden
pero me oculta el resto de la palabra y no respecta el div

bueno miren aki les dejo todo el css :D aver si me hacen el favor de ver que error tube:
Código:
body,html        {

        cursor: default;

        }



body {
        margin: 0px;
		background: #000000;
		background-image:url(../imagenes/fondo.gif);
        font: 11px Tahoma;
        color: #00ccff;
        }

#fondo {
        height: auto; 
        width: 980px;
        background: url('../imagenes/fondo.png');
		repeat: y;
        margin-left: auto;
        margin-right: auto;
        }
		
#contenido {
        height: auto; 
        width: 880px;
        background: #000000;
        margin-left: auto;
        margin-right: auto;
		
        }
#subcontenido {
	overflow: auto;
	height: auto;
	width: 850px;
	background: #000000;
	margin-left: auto;
	margin-right: auto;
	border: 2px solid #155969;
        }
#subcontenido-derecha {
	overflow: hidden;
	height: auto;
	width: 600px;
	margin: 5px;
	border: #007998;
	border-style: ridge;
	float: right;
	
        }
#subcontenido-izquierda {
	height: auto;
	width: 210px;
	margin: 5px;
	border: #007998;
	border-style: ridge;
	
        }
#logo {
        height: 134px; 
        width: 880px;
        background: url('../imagenes/logo.png');
		}
#menu {
        height: 25px; 
        width: 880px;
        background: url('../imagenes/menu.png');
		}
#pie {
		overflow: auto;
        height: 44px; 
        width: 980px;
        background: url('../imagenes/pie.png');
        margin-left: auto;
        margin-right: auto;
		}
#pieb {
	margin: 8px;
	height: 15px;
	width: 262px;
	margin-left: auto;
	margin-right: auto;
	float: right;
		}
el div cual esta en la imagen

es el #subcontenido-derecha
  #6 (permalink)  
Antiguo 01/06/2009, 08:48
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como evito este problema del div con css

Vale Denistrein, el problema está claro. Ahora dinos qué quieres que ocurra en esa situación:
¿que no se muestre el texto sobrante?
¿que crezca el div que lo contine?
¿que aparezca scroll?
.... ¿?
Dependiendo de ello variará la solución que te puedan ofrecer.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 01/06/2009, 09:32
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Respuesta: como evito este problema del div con css

quiero que cresca el div que lo conteniene al texto
ej:


asi que sea automaticamente se agrande el div ..

me acuerdo por que nunca tube este problema con mis otras web ..¬¬ siempre use tablas y casi nunca div ¬¬
  #8 (permalink)  
Antiguo 01/06/2009, 09:58
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: como evito este problema del div con css

Disculpa, pero no por ninguna parte lo que te he dicho que hagas, siendo esa la solucion. Asi que cuando lo pruebes, me avisas y te sigo ayudando si?

Por el momento, no tengo nada mas que hacer aqui.
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #9 (permalink)  
Antiguo 01/06/2009, 10:35
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Respuesta: como evito este problema del div con css

Cita:
Iniciado por CaLiZzZ Ver Mensaje
Disculpa, pero no por ninguna parte lo que te he dicho que hagas, siendo esa la solucion. Asi que cuando lo pruebes, me avisas y te sigo ayudando si?

Por el momento, no tengo nada mas que hacer aqui.
disculpa CaLiZzZ si funciona tu codigo pero el problema es que en la web que tengo tengo 3 div los cuales tiene diferentes tamaños y si pongo el codigo que me has pasado me funcionara para el div #submenu-derecha . pero para el #submenu-izquierda tiene otro tamaño no se si me entendes

lo que quiero yo es que sea ya automaticamente que reconosca los bordes y continue abajo , asi como sucede en las tablas...


a y muchas gracias
  #10 (permalink)  
Antiguo 01/06/2009, 10:42
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: como evito este problema del div con css

Jmm...

Y porque no lo haces de esta forma.

Tienes 3 divs diferentes ( les llamaremos #div1, #div2 y #div3 ) de esta forma:

<div id="div1">
<p> bla bla bla </p>
</div>

<div id="div2">
<p> bla bla bla </p>
</div>

<div id="div3">
<p> bla bla bla </p>
</div>

Ahora en tu CSS, haces algo como esto:

#div1 p {
bla bla bla
}

#div2 p {
bla bla bla
}

#div3 p {
bla bla bla
}

Asi solo afectas a la etiqueta <p> de cada div... Eso, o le podrias poner display: table; a cada div que quieras que crezca conforme al texto. No es lo recomendable porque (creo...) no funciona en todos los navegadores... Pero si quieres una solución mas rapida, posiblemente te ayude.

Hasta Luego!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #11 (permalink)  
Antiguo 01/06/2009, 11:08
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Respuesta: como evito este problema del div con css

bueno CaLiZzZ muchisimas gracias . eh pensado mejor usar tablas en vez de div mucho mas facil ... perdona por hacerte perder tiempo en buscarme una solucion

aa y me funciono de lujo el code que me pasaste pero igual pienso usar tablar
  #12 (permalink)  
Antiguo 01/06/2009, 11:12
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: como evito este problema del div con css

Cada uno decide, desde luego.

Sólo recuerda una cosa: la respuesta a tu próxima pregunta es: "por maquetar con tablas"
  #13 (permalink)  
Antiguo 01/06/2009, 11:19
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: como evito este problema del div con css

Cita:
Iniciado por danistrein Ver Mensaje
bueno CaLiZzZ muchisimas gracias . eh pensado mejor usar tablas en vez de div mucho mas facil ... perdona por hacerte perder tiempo en buscarme una solucion

aa y me funciono de lujo el code que me pasaste pero igual pienso usar tablar
Te sugiero algo: Porqué no solo maquetas ese pedazo con tablas, y lo demás lo sigues haciendo con divs? Creo que al final te saldria mejor asi. Pero es solo una sugerencia... como dice Mikimoro () Al final, la decision es de cada uno...

Hasta Luego!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #14 (permalink)  
Antiguo 01/06/2009, 11:20
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Respuesta: como evito este problema del div con css

Cita:
Iniciado por Mikmoro Ver Mensaje
Cada uno decide, desde luego.

Sólo recuerda una cosa: la respuesta a tu próxima pregunta es: "por maquetar con tablas"
jejejej

tengo un problemaaa!!!!!

el mismo problema que tengo con los div ahora los tengo con las tablas
noce que codigo del css estara mal alguien que me ayude :S
  #15 (permalink)  
Antiguo 01/06/2009, 11:22
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: como evito este problema del div con css

Cita:
Iniciado por danistrein Ver Mensaje
jejejej

tengo un problemaaa!!!!!

el mismo problema que tengo con los div ahora los tengo con las tablas
noce que codigo del css estara mal alguien que me ayude :S
Yo tengo la solucion a tu problema!!

<table>
<p> bla bla bla </p>
</table>

table p {
bla bla bla
}

__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #16 (permalink)  
Antiguo 01/06/2009, 11:26
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Respuesta: como evito este problema del div con css

Cita:
Iniciado por CaLiZzZ Ver Mensaje
Yo tengo la solucion a tu problema!!

<table>
<p> bla bla bla </p>
</table>

table p {
bla bla bla
}

CaLiZzZ no quiero usar css con <p>. quiero buscar una forma de blokear el DIV para que las palabras no salgan del DIV
  #17 (permalink)  
Antiguo 01/06/2009, 11:35
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: como evito este problema del div con css

Bueno, ahora en serio, veamos si podemos ayudarte.

¿Qué es exactamente lo que vas a meter en ese div? ¿son realmente palabras sin espacios como muestras o son los comentarios de los usuarios, como comentas después?

En cualquiera de los dos casos, por el HTML y el CSS actuales que estás usando, a ver dónde está el error.
  #18 (permalink)  
Antiguo 01/06/2009, 11:39
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: como evito este problema del div con css

danistrein: lo que creo que no has entendido antes de la intervención de kseso? es que el problema lo tienes exactamente porque estás usando palabras sin espacios, y es ahí donde el navegador no sabe dónde cortar la frase y por tanto no se puede inventar el salto de línea.

En realidad, si lo que metes es un texto normal y corriente, con el código que tienes el texto saltará de línea y agrandará la caja hacia abajo tal y como tú quieres.

Mira que ejemplo más simple:
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" xml:lang="es-es" lang="es-es">
<head>
<style type="text/css">
.caja {width: 340px; border: 1px solid #f00;padding: 10px;}
</style>
</head>
<body>
<div class="caja">
<p>Esto es un texto de prueba para ver si se corta y amplia a dos líneas o las que sean necesarias. Esto es un texto de prueba para ver si se corta y amplia a dos líneas o las que sean necesarias. Esto es un texto de prueba para ver si se corta y amplia a dos líneas o las que sean necesarias. Esto es un texto de prueba para ver si se corta y amplia a dos líneas o las que sean necesarias.</p>
</div>
</body>
</html>
Copia y pega para verlo en el navegador.
  #19 (permalink)  
Antiguo 01/06/2009, 11:48
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Respuesta: como evito este problema del div con css

Cita:
Iniciado por Mikmoro Ver Mensaje
danistrein: lo que creo que no has entendido antes de la intervención de kseso? es que el problema lo tienes exactamente porque estás usando palabras sin espacios, y es ahí donde el navegador no sabe dónde cortar la frase y por tanto no se puede inventar el salto de línea.

En realidad, si lo que metes es un texto normal y corriente, con el código que tienes el texto saltará de línea y agrandará la caja hacia abajo tal y como tú quieres.

Mira que ejemplo más simple:

Copia y pega para verlo en el navegador.
nooo te lo puedo creer mas de 3hs y media tratando de encontrar una solucion y era que esta bien todo solo que sin espacio no lo reconoce xD
jajajaj bue muchas gracias si no me avisavas yo de ignorante segia buscando una solucion
  #20 (permalink)  
Antiguo 01/06/2009, 11:50
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: como evito este problema del div con css

Es que no había leído el hilo con detenimiento (ni tú tampoco )
  #21 (permalink)  
Antiguo 01/06/2009, 11:56
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: como evito este problema del div con css

Cita:
Iniciado por Mikmoro Ver Mensaje
Es que no había leído el hilo con detenimiento (ni tú tampoco )
Ni yo..
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #22 (permalink)  
Antiguo 01/06/2009, 12:00
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: como evito este problema del div con css

vaya tropa
  #23 (permalink)  
Antiguo 01/06/2009, 12:07
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como evito este problema del div con css

Había alguien que no quería autocitarse y que ya ni sabía hacia donde apuntaban los tiros
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #24 (permalink)  
Antiguo 01/06/2009, 12:08
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: como evito este problema del div con css

Cita:
Iniciado por Mikmoro Ver Mensaje
vaya tropa
al menos solucion(aste)amos el problema no?
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #25 (permalink)  
Antiguo 01/06/2009, 12:08
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Respuesta: como evito este problema del div con css

Cita:
Iniciado por CaLiZzZ Ver Mensaje
Ni yo..
Cita:
Iniciado por Mikmoro Ver Mensaje
vaya tropa
jaja
  #26 (permalink)  
Antiguo 01/06/2009, 12:09
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Respuesta: como evito este problema del div con css

Cita:
Iniciado por CaLiZzZ Ver Mensaje
al menos solucion(aste)amos el problema no?
jaja si
  #27 (permalink)  
Antiguo 01/06/2009, 12:22
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: como evito este problema del div con css

Mira que lo miré varias veces y nunca pensé que sería por el sin espacios o lo pensé y no lo dije, 4 o 5 personas para decir que faltaban espacios xD
__________________
No diseñes usando tablas.
  #28 (permalink)  
Antiguo 01/06/2009, 12:24
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Respuesta: como evito este problema del div con css

Cita:
Iniciado por hades87 Ver Mensaje
Mira que lo miré varias veces y nunca pensé que sería por el sin espacios o lo pensé y no lo dije, 4 o 5 personas para decir que faltaban espacios xD
jaja si tan simple el problema y se tardo tanto en descubrir la solucion
si no fuera por Mikmoro segiriamos buscando la solucion
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 04:36.