JMiur [E]

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:

Orlando Francisco Menéndez  

Siempre es grato leer tus artículos muy docentes, explicados con claridad y bien ilustrados. Gracias.

Responder
JMiur  

Gracias, Orlando, ojala sea útil.

Responder
Unknown  

Muy útil Jmiur :P

Responder
Unknown  

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

Responder
Karla Castañeda  

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.

Responder
Unknown  

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/

Responder
JMiur  

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;

Responder
Anónimo  

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.

Responder
JMiur  

Si. Fíjate en esta entrada

Responder
Anónimo  

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.

Responder
JMiur  

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 + &quot;?max-results=5&quot;' rel='tag'><data:label.name/></a>

y para el elemento Label de la sidebar:

<a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag'><data:label.name/></a>

Responder
Anónimo  

Ya esta, gracias JMur. aunque en el elemento label del sidebar el mismo codigo aparece mas o menos seguido dos veces, cambio los dos ;-)

Responder
JMiur  

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.

Responder
Unknown  

gracias Jmiur, creo que ha quedado solucionado.

Responder
Anónimo  

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

Responder
JMiur  

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.

Responder
Anónimo  

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¿?

Responder
Sermartin  

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

Responder
JMiur  

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

Responder

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

 
CERRAR