Una de las características más interesantes del diseño web es que uno no debe preocuparse por conocer previamente la dimensión de los elementos que vamos agregando. Sin embargo, algunas veces, esa ventaja se vuelve un problema si no tenemos en cuenta que si el contenido es más grande que el contenedor puede desbordarse y ocupar espacios indeseados.
19 comentarios:
Siempre es grato leer tus artículos muy docentes, explicados con claridad y bien ilustrados. Gracias.
Gracias, Orlando, ojala sea útil.
Muy útil Jmiur :P
hola JMiur tu sabes un layout o plantilla porque yo ya tengo como el diseño que quiero y eso pero no se como subirlo o lo que haya que hacer
Hola JMiur, muy buena tu explicación, es muy común que pase eso es las cajas como los blockquotes, ya que cuando el texto es preformateado, algunas veces se sale el texto hacia la derecha si no alcanza el ancho del contenedor y eso es notorio en IE y me parece que en Chrome también, aunque no en FF; a mi me paso y precisamente lo solucioné con overflow:scroll; esto lo veo mucho sobre todo en blogs que muestran código y a veces en las columnas laterales, pero se puede arreglar como lo explicas.
Saludos Jmiur y que tengas un estupendo día.
Hola JMiur, otra vez por aquí intentando solucionar un problemilla que tengo. Cuando se carga la página principal de mi blog, aparece por un instante la imagen del footer en la cabecera...y luego se va a su sitio. Tu sabes porqué ocurre esto? Te dejo el link para que puedas ver si hay algún error de códigos. Muchas gracias.
http://fabiobook.blogspot.com/
Graciela: Ojalá lo sea :D
Mica; No entiendo. Si tienes un diseño armado como pagina web, deberás crear la plantilla porque Blogger no es una página web sino un sistema de blogs que requiere códigos específicos.
Karla: En los códigos, cuando se utiliza PRE por ejemplo, ocurre algo similar. Efectivamente, se ve en muchos sitios que muestran códigos y es espantoso :D
Una solución es esa que has utilizado, otra, apra esos casos,es utilizar la propiedad:
white-space: pre-wrap;
que hará algo similar a word-wrap, si el texto es largo, lo mistrará en diferentes líneas.
Fabio De Minicis: No he notado eso pero, es muy probable que ocurra porque la imágenes que se usan de fondo sean muy grandes y como las imágenes se cargan simultáneamente, haya alguna que aparezca primero y otra después pero no en orden; tal vez, si le das a content-wrapper o outer-wrapper una altura mínima, eso ayude a que los rectángulos se dimensionen antes. Le das altura mínima con:
min-height: valorpx;
Hola Jmur veras yo tengo una duda sobre las entradas, se puede establecer que cuando se vaya a una categoria(etiqueta) NO se muestren todas las entradas que hay en esa etiqueta sino solo las que se deseen? es decir si voy a "cuentos" y hay 30 entradas pero quiero que se vean de a 10 y los demas pasar a otra pagina como en la principal.
saludos.
Si. Fíjate en esta entrada
Jmur no he podido, encuentro esto:
a expr:href='data:label.url' rel='tag'>
lo pongo asi:
a expr:href='data:label.url + "?max-results=5"' rel='tag'>
o asi:
a expr:href='data:label.url"?max-results=5"' rel='tag'>
y ninguna de las dos formas me funciona.
No veo colocado eso en tu plantilla, probablemente, tienes un error de sintaxis. Para las etiquetas de los posts, el código es:
<a expr:href='data:label.url + "?max-results=5"' rel='tag'><data:label.name/></a>
y para el elemento Label de la sidebar:
<a expr:href='data:label.url + "?max-results=5"' rel='tag'><data:label.name/></a>
Ya esta, gracias JMur. aunque en el elemento label del sidebar el mismo codigo aparece mas o menos seguido dos veces, cambio los dos ;-)
Aparece varias veces porque en el gadget hay códigos distintos según sean las opciones que le hayas colocado así que debes cambiar todas.
gracias Jmiur, creo que ha quedado solucionado.
ola jmiur, como s epodria aplicar este elemento a una web en wordpress para evitar el desbordamiento en lso comentarios?? Hay alguna forma de solucionar ese problema?? salu2
Sí, hay que hacer lo mismo, en principio, agregar las propiedades:
word-wrap: break-word;
overflow-y: hidden;
pero, no sabría decirte a que elemento ya que depende del tema en uso que tengas.
pero se agrega en el css o en el html el css que tengo hay estas partes:
/* The Comments */
.comments {
}
.comments form {
}
.comments textarea {
width:90%;
height:156px;
background:#382F2A;
border:1px solid #403630;
color:#ddd;
padding:10px;
overflow:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
#commentform {
padding-left:23px;
}
#commentform input {
background:#382F2A;
border:1px solid #403630;
color:#ddd;
padding-left:10px;
}
.comments input#submit {
padding:0;
width:72px;
height:29px;
}
.comments h2 {
font-size:19px;
line-height:30px;
margin:24px 0 0 23px;
padding:0;
font-weight:normal;
}
.comments ol li p {
padding:0;
margin:10px 0;
color:#ddd;
}
.comments h4 {
font-size:19px;
line-height:32px;
margin:14px 10px 0px 10px;
padding:0px 0 0 10px;
font-weight:normal;
background-image: -moz-linear-gradient(100% 100% 90deg, rgba(32, 32, 32, 0), #6F584C);
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(32, 32, 32, 0)), to(#404951));
}
No se si será aki¿?
Hola Jmiur te queria comentar sibre esto mismo, si quiero que solo limite el alto o sea que solo se muestre la barra a la derecha como puedo hacerlo?
Desde ya muchas gracias
En ese caso, sería algo así como:
.miclase {
overflow-x: hidden;
overflow-y: scroll;
}
y la propiedad word-wrap deberia tener el valor break-word porque sino, se cortaría horizontalmente (es la propiedad por defecto).
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...