como evito este problema del div con css

[danistrein]

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 .

[hades87]

podrías poner un width: auto al div o un overflow: hidden al div, para que el texto no se muestre.

[Calizman]

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:

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

Código CSS:

#texto {
width: 250px;
height: 60px;
margin: 0px;
}
 
p {
height: 240px;
width: 50px;
margin: 5px;
}
 

Seguro funciona!

Hasta Luego!!

[kseso?]

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

[danistrein]

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

[kseso?]

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

[danistrein]

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 ¬¬

[Calizman]

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.

[danistrein]

Iniciado por CaLiZzZ

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

[Calizman]

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!!

[danistrein]

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

[Mikmoro]

Cada uno decide, desde luego.

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

[Calizman]

Iniciado por danistrein

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!!

[danistrein]

Iniciado por Mikmoro

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

[Calizman]

Iniciado por danistrein

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
}

[danistrein]

Iniciado por CaLiZzZ

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

[Mikmoro]

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.

[Mikmoro]

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:

<!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.

[danistrein]

Iniciado por Mikmoro

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

[Mikmoro]

Es que no había leído el hilo con detenimiento (ni tú tampoco )

[Calizman]

Iniciado por Mikmoro

Es que no había leído el hilo con detenimiento (ni tú tampoco )

Ni yo..

[Mikmoro]

vaya tropa

[kseso?]

Había alguien que no quería autocitarse y que ya ni sabía hacia donde apuntaban los tiros

[Calizman]

Iniciado por Mikmoro

vaya tropa

al menos solucion(aste)amos el problema no?

[danistrein]

Iniciado por CaLiZzZ

Ni yo..

Iniciado por Mikmoro

vaya tropa

jaja

[danistrein]

Iniciado por CaLiZzZ

al menos solucion(aste)amos el problema no?

jaja si

[hades87]

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

[danistrein]

Iniciado por hades87

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