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 hace 14 años  

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

Responder
JMiur hace 14 años  

Gracias, Orlando, ojala sea útil.

Responder
Unknown hace 14 años  

Muy útil Jmiur

Responder
Unknown hace 14 años  

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 hace 14 años  

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 hace 14 años  

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 hace 14 años  

Graciela: Ojalá lo sea

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
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 hace 14 años  

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 hace 14 años  

Si. Fíjate en esta entrada

Responder
Anónimo hace 14 años  

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 hace 14 años  

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 hace 14 años  

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 hace 14 años  

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 hace 14 años  

gracias Jmiur, creo que ha quedado solucionado.

Responder
Anónimo hace 13 años  

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 hace 13 años  

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 hace 13 años  

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 hace 13 años  

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 hace 13 años  

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