JMiur [E]

En la Introducción al uso de las imágenes en Blogger, había mostrado como, utilizando la propiedad float, se las podía alinear con respecto al texto. Más adelante, al hablar de Bordes, se vió que las imágenes y los textos también podían superponerse. Ahora, es tiempo de mostrar otras formas de posicionar los elementos dentro de una página web.

Estas son las propiedades que nos permiten manipular los tamaños y posición de los elementos.
position: static | relative | absolute
Determina la forma en que se ubica un elemento. Usando static se ubica en un lugar fijo (es el valor por defecto), con relative se puede ubicarlo en función de las propiedades de desplazamiento (left, top, bottom, right) y con absolute puede ser ubicado en cualquier lugar de la página.
bottom: auto | tamaño | porcentaje
left: auto | tamaño | porcentaje
right: auto | tamaño | porcentaje
top: auto | tamaño | porcentaje
Establece la distancia desde el borde inferior, izquierdo, derecho o superior de un elemento con un elemento contenedor. Si position está establecida como static, estas propiedades no tienen efecto.
width: tamaño | porcentaje | auto
height: tamaño | porcentaje | auto
A cada elemento se le puede dar un ancho, y una altura especificados como una longitud, un porcentaje o como auto (que es el valor inicial).

En estos ejemplos, el contenedor es el cuadrado blanco, y en todos los casos se establece left:20px y top:20px

staticrelativeabsolute
La imagen se mostraría a 20 pixeles del ángulo superior izquierda de la página. Es imposible saber en que parte de la página se muestra este post.
En el primer caso position:static hace que se ignoren todas las demás, la imagen se muestra en forma normal. En el segundo caso, la posición es relativa tomando como coordenada 0,0 el ángulo superior izquierdo del contenedor.

Cuando la posición es absoluta, el elemento se ubica en una coordenada exacta de la página. Las plantillas de Blogger utilizan este método para crear los layouts, esto es, dividen la página en sectores, asignándoles tamaños y posiciones absolutas (el header, las columnas laterales, etc.)

Definir la posición de un elemento combinado con el uso de fondos, permite ampliar las posibilidades. En estos ejemplos la estructura del código es la misma y sólo cambian los valores:
<img src="URL_imagen" />
<div style="position: ... ;left:valor; top:valor;">....... cualquier texto .......</div>
staticrelative top: -50pxrelative top: -100px
NORMAL
AL MEDIO
BIEN ARRIBA
Hay que recordar que los elementos son rectángulos. Supongamos que tenemos algo así:
<div ....... [ 1 ] ....... >
<div ....... [ 2 ] ....... >
<img ....... [ 3 ] ....... />
<p> ....... [ 4 ] ....... </p>
</div>
</div>
La posición es relativa con respecto al elemento contenedor inmediato. Si este contiene elementos, todos se mueven con él. En este ejemplo, el DIV [ 1 ] es un rectángulo de color blanco de 200x150, el DIV [ 2 ] es un rectángulo de color azul de de 150x130. Dentro de este último hay dos elementos, IMG [ 3 ] que tiene 120x89 y el párrafo P [ 4 ]. En todos los casos, vamos a agregar position:relative; left:20px; top:20px

NORMAL

[2] RELATIVO

[3] RELATIVO

[4] RELATIVO


El primer caso es el resultado por defecto, no hay posicionamiento, cada elemento es estático. En el segundo caso, al posicionar en forma relativa el elemento [ 2 ], este y todo su contenido (la imagen y el párrafo), se desplazan. En el tercer caso, sólo se desplaza la imagen [ 3 ]. En el cuarto caso, se desplaza el párrafo [ 4 ] que casi se sale del bloque azul y queda oculto.

Hay una propiedad que permite controlar qué se va a hacer cuando un elemento sobrepasa el área de su contenedor:
overflow: visible | hidden | scroll | auto
overflow-x: visible | hidden | scroll | auto
overflow-y: visible | hidden | scroll | auto
El valor visible es el valor por defecto, el contenido no es cortado si sobrepasa los límites. Con hidden el contenido es cortado y con scroll el contenido es cortado y se muestran barras de desplazamiento.

Vamos a agregar la propiedad overflow en el DIV [ 2 ] (el azul):

hiddenscroll

[4] RELATIVO

[4] RELATIVO


Lamentablemente, overflow es una propiedad que en Internet Explorer no funciona correctamente (aparentemente la versión 7 ha corregido el problema), por lo tanto, en ese navegador, hidden no tendrá ningun efecto.

16 comentarios:

Emilio  

Todo esto que explicas, ¿vale igual para blogger beta?
La posición de las imagenes, y la funcion de "leer mas" para no tener toda la noticia completa en el post, no me funciono con la versión nueva de blogger.

Gracias!

Responder
JMiur  

Si, en realidad es al revés, todo está probado y mostrado en Blogger Beta. Este blog es Beta.

Lo de leer más también lo uso en este blog. En una técnica muy difundida. Si no te funciona, primero revisa lo que has escrito. Si no encuentras el error, comunícate por mail y vemos la forma de solucionarlo.

Es un hack garantizado :-)

Responder
Identidad Creativa  

Hola! realmente te felicito por la labor que desarrollaste en tu blog, ¡impresionante!, digno de admiración. Yo estoy armando el mío que es mucho más simple dado a que mis fines son otros, pero ya que estás en el tema concreto te pregunto lo siguiente: si visitas mi blog pon atención en la parte donde se encuentra el logo de mi agencia con el texto abajo, ambas cosas están alineadas a la izquierda y el tema es que esto solo particularmente necesitaría que esté centrado indistitamente del resto de la columna. He intentado cambiarlo pero fue mis esfuerzos en vano, dado a que la ventana de edición que muestra blogger para cargar imágen y texto no te da la posibilidad de ver HTML como si lo hace si cargas texto en otro elemento. Desde ya espero que no te moleste mi consulta y que me puedas dar una orientación al respecto. Desde ya muchas gracias y espero tu respuesta, y critica sobre mi blog. Muchas gracias!

Responder
JMiur  

Entiendo tu problema. el elemento Imagen de Blogger es, a mi juicio, un elemento absolutamente inútil porque no tienes opciones para configurarlo.

La solución es utilizar otro elemento. Inserta un elemento HTML y pon el código allí. Hay muchas variantes posibles, por ejemplo:

<div style="text-align:center;">
<img src="....." />
<p> el texto </p>
</div>

Responder
Identidad Creativa  

Muchas gracias jmiur, el tema es que particularmente esta parte es donde me vuelvo loco para llevar a cabo el cambio, ya que dentro de la página HTML no consigo identifcar en que parte tendría que insertar el código que me indicás, cuando tuve que hacer otras modificaciones no tuve problema, pero puntualmente con esta me está dando batalla. Si no te molesta indicarme en que lugar tengo que insertarlo te agradecerá inifinitamente. Desde ya a tus órdenes. Saludos!

Responder
JMiur  

En la parte izquierda de tu blog, está la sidebar. Allí has puesto diferentes elementos. Los agregaste desde la primera solapa de la plantilla: Agregar elementos.

Lo que vas a hacer es poner otro haciendo click en Agregar un nuevo elemento y en la ventana que se abre, seleccionás el tipo de elemento HTML/JavaScript.

Ahora se verá un editor muy similar al que usás para hacer posts. Ese editor tiene dos modos, uno muestra los textos formateados y el otro muestra el código. Exactamente igual que el editor de posts pero, con menos opciones.

Allí es donde debés ingresar el código. Luego, lo guardás. Aparecerá arriba de todo de la sidebar. Si todo está bien, tendrás dos iguales. Así que eliminás el segundo haciendo click en Editar y luego en Eliminar.

Decime si la explicación es clara. Se hace difícil "contarlo", sino, buscaré la forma de mostrarte el procedimiento de otra manera.

Responder
Identidad Creativa  

Perfecto! el código, me sirció y fue más que clara la explicación, ahora lo siguiente: ¿de que manera puedo dejar centrado el logo y el texto que quede alineado a la izquierda? ¿qué es lo que tendría que agregarle al código que me sugeriste? Desde ya muchas gracias y espero no serte molesto. Saludos!

Responder
JMiur  

Fijate que en el código ue pusiste, el texto está dentro de una etiqueta <p>

<p> texto </p>

Podés alinearlo agregándole estilo:

<p style="text-align: left;"> texto </p>

text-align es la propiedad CSS y puede tener estos valores:
left right center justify

Casi cualquier etiqueta puede alinearse de este modo.

Responder
Identidad Creativa  

Muchísimas gracias! realmente el que sabe sabe y al que sabe se le hace caso. Felicitaciones nuevamente por la ayuda y por la buena disposición.

Responder
JMiur  

Me alegro que todo se haya resuelto :)

Responder
Anónimo  

Yo!! necesito ayuda :D!!, tus emos se remplazan!! y yo he intentado de casi todo para que se me puedan remplazar y no me va :(

Responder
Anónimo  

hola, perdona que te de latita, pero he notado que tus caritas : ( se remplazan por :( y no he podido lograr eso en mi blog... me podrias ayudar ? :$ por fisss...

Responder
JMiur  

El script que utilizo está explciado en este post.

Responder
Joan Irazu  

ME SIRVIO DE MUCHO, NOMAS QUE AUN NO LE ENCUNETRO LA LOGICA CON LA RESOLUCIÓN DE PANTALLA QUE TIENE UNA PC.

Responder
Alberto  

Hola Jmiur,

Disculpa si esta explicado pero no lo localizo, pero hay algun valor que asignar a los parametros 'top, buttom o left' para un objeto, sea en la resolucion de pantalla que sea, siempre quede centrado?

Gracias de antemano

Responder
JMiur  

Con CSS eso no es posible ya que ese tipo de datos (resolución de la pantalla) no es un algo que pueda saberse a menos que se utilice JavaScript o algún otro lenguaje.

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