Muchas veces me han preguntado cómo aumentar el ancho disponible del blog. Es que las plantillas por defecto están pensadas para resoluciones de 800 pixeles de ancho y hoy por hoy, tal como puede verse en cualquier estadística, ese es un valor demasiado escaso; menos del 5% de los visitantes tienen resoluciones inferiores a 1024 así que ese será el número mágico sobre el cual deberíamos trabajar ya que es el tipo de resolución más utilizada.
Al igual que cada hogar es un mundo, cada plantilla también lo es por lo que se hace muy difícil dar una solución que las contemple a todas. Se me ocurre que lo mejor es tratar de aprender qué es lo que Blogger hace y como es el esquema gráfico de un blog y para eso, no podemos empezar con lo más complejo sino con lo más simple que es la plantilla Mínima.
Pero no se confundan. Lo de Mínima no es un calificativo, sólo es un nombre y a mi juicio, es la mejor codificada y es el modelo que deberíamos usar para crear cualquier otra, no sé si es perfecta pero se acerca bastante y con ese esquema, entendiendo cómo modificarla, jamás tendremos problemas con los navegadores y sus caprichos ¿Exagero? Tal vez un poco pero confieso que es el modelo que utilizo para cualquier blog incluyendo WordPress.
Si queremos empezar a rediseñar la plantilla tenemos dos opciones: o nos encomendamos a la buena voluntad de alguien o aprendemos. Yo, prefiero lo segundo así que empiezo creando un blog, seleccionando la plantilla Mínima de Blogger y dejando la Configuración por defecto. Agrego entonces uno o más posts con muchos "Lorem ipsum dolor sit amet ..." y ya estoy listo para comenzar.
Pero no se confundan. Lo de Mínima no es un calificativo, sólo es un nombre y a mi juicio, es la mejor codificada y es el modelo que deberíamos usar para crear cualquier otra, no sé si es perfecta pero se acerca bastante y con ese esquema, entendiendo cómo modificarla, jamás tendremos problemas con los navegadores y sus caprichos ¿Exagero? Tal vez un poco pero confieso que es el modelo que utilizo para cualquier blog incluyendo WordPress.
Si queremos empezar a rediseñar la plantilla tenemos dos opciones: o nos encomendamos a la buena voluntad de alguien o aprendemos. Yo, prefiero lo segundo así que empiezo creando un blog, seleccionando la plantilla Mínima de Blogger y dejando la Configuración por defecto. Agrego entonces uno o más posts con muchos "Lorem ipsum dolor sit amet ..." y ya estoy listo para comenzar.
Desde Diseño | Elementos de la página voy a añadir y organizar los elementos que aparecen por defecto (Archivos, Seguidores, Perfil); esto sólo es maquillaje personal así que si no queremos, podemos dejarlos tal como están.
De todas maneras, hagamos o no hagamos esos cambios, no es mala idea detenerse un poco en esa pantalla de Blogger porque allí podremos ver el esquema gráfico del blog que es la base para entender cómo cambiarlo.
Nuestro blog no es otra cosa que una serie de rectángulos independientes que se van creando desde afuera hacia a dentro, desde el más grande hasta el más chico, uno dentro de otro. Lo que vemos en la pantalla del monitor es el rectángulo más grande, el que contiene a todos los otros y es el que está definido entre las etiquetas <body> y </body> así que las propiedades generales de nuestro sitio quedan establecidas allí.
De todas maneras, hagamos o no hagamos esos cambios, no es mala idea detenerse un poco en esa pantalla de Blogger porque allí podremos ver el esquema gráfico del blog que es la base para entender cómo cambiarlo.
Nuestro blog no es otra cosa que una serie de rectángulos independientes que se van creando desde afuera hacia a dentro, desde el más grande hasta el más chico, uno dentro de otro. Lo que vemos en la pantalla del monitor es el rectángulo más grande, el que contiene a todos los otros y es el que está definido entre las etiquetas <body> y </body> así que las propiedades generales de nuestro sitio quedan establecidas allí.
Dentro de ese gran rectángulo, hay otro llamado outer-wrapper que es más pequeño ya que lo separamos de los bordes de la ventana y que tiene una característica fundamental, tiene definido el ancho (width) que es, justamente, el ancho real de nuestro sitio y lo más común es que esté centrado con respecto a la ventana. Dentro de este hay otro más llamado wrap2 que normalmente no tiene propiedades y por lo tanto, es exactamente igual que el anterior ¿Para qué dos? Sería largo de explicar pero, simplificando, esa es la mejor forma de evitar problemas de compatibilidad con los navegadores.
Y siguen los rectángulos. Siempre, de afuera hacia adentro lo que quiere decir que el externo contendrá uno o más y por lo tanto, el contenido tendrá un ancho menor o igual al contenedor pero nunca será más grande. Y aquí vale una aclaración: para evitar problemas, el ancho no sólo es el valor de width, el ancho que debemos considerar debe incluir los bordes y los márgenes.
ancho real = width + border + margin + padding
Así que en el rectángulo outer-wrapper vamos a encontrar otros tres rectángulos más, todos del mismo ancho, uno debajo del otro: header-wrapper es el encabezado del blog, content-wrapper es el contenido (posts+sidebar) y footer-wrapper el pie de página del sitio.
Nuevamente, dentro de cada uno de esos rectángulos habrá otros y dentro de esos otros habrá otros más y así seguiremos hasta el último que será una imagen, un texto o cualquier otra cosa pero, faltaría ver el que nos importa que es el rectángulo central, el llamado content-wrapper porque es con el cual nos manejaremos.
Ese bloque rectangular tiene, por defecto, cuatro rectángulos más. El superior se llama crosscol-wrapper y y por ahora no nos interesa porque es invisible; a los efectos de las pruebas, podemos eliminarlo. El último también es invisible y muy importante, dice:
Y siguen los rectángulos. Siempre, de afuera hacia adentro lo que quiere decir que el externo contendrá uno o más y por lo tanto, el contenido tendrá un ancho menor o igual al contenedor pero nunca será más grande. Y aquí vale una aclaración: para evitar problemas, el ancho no sólo es el valor de width, el ancho que debemos considerar debe incluir los bordes y los márgenes.
ancho real = width + border + margin + padding
Así que en el rectángulo outer-wrapper vamos a encontrar otros tres rectángulos más, todos del mismo ancho, uno debajo del otro: header-wrapper es el encabezado del blog, content-wrapper es el contenido (posts+sidebar) y footer-wrapper el pie de página del sitio.
Nuevamente, dentro de cada uno de esos rectángulos habrá otros y dentro de esos otros habrá otros más y así seguiremos hasta el último que será una imagen, un texto o cualquier otra cosa pero, faltaría ver el que nos importa que es el rectángulo central, el llamado content-wrapper porque es con el cual nos manejaremos.
Ese bloque rectangular tiene, por defecto, cuatro rectángulos más. El superior se llama crosscol-wrapper y y por ahora no nos interesa porque es invisible; a los efectos de las pruebas, podemos eliminarlo. El último también es invisible y muy importante, dice:
<div class="clear"></div>
Los dos del medio son el punto clave del diseño: main-wrapper es el rectángulo que contiene las entradas y sidebar-wrapper el que contiene los elementos de la sidebar. Ambos tienen una particularidad: flotan, y eso es lo que nos permite colocarlos uno al lado del otro ¿Por qué? porque la suma de sus anchos es inferior al ancho del contenedor.
¿No les ha pasado cosas como "ayyyyy la sidebar se fue al fondo"? Esa es la explicación.
¿No les ha pasado cosas como "ayyyyy la sidebar se fue al fondo"? Esa es la explicación.
Y ahora sí, basta de palabrería, hacemos click en Edición de HTML para empezar a jugar.
En la plantilla, el estilo CSS es todo eso que está entre <b:skin> y </b:skin>. Allí, haremos una primera modificación para que todo esté claro y siga el mismo criterio. Por alguna extraña razón, las definiciones del footer no son razonables así que las cambiaremos. Buscamos:
En la plantilla, el estilo CSS es todo eso que está entre <b:skin> y </b:skin>. Allí, haremos una primera modificación para que todo esté claro y siga el mismo criterio. Por alguna extraña razón, las definiciones del footer no son razonables así que las cambiaremos. Buscamos:
#footer {
clear: both;
margin: 0 auto;
padding-top: 15px;
line-height: 1.6em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
width: 660px;
}
y lo cambiamos por esto:
#footer-wrapper {
clear: both;
margin: 0 auto;
width: 660px;
}
#footer {
letter-spacing: .1em;
line-height: 1.6em;
padding-top: 15px;
text-align: center;
text-transform: uppercase;
}
También agregaremos esto para que todos los bloques queden definidos:
#content-wrapper {
position: relative;
width: 100%;
}
Y ocultaremos la navbar porque me molesta:
#navbar {
display: none;
height: 0;
visibility: hidden;
}
Esta es la plantilla por defecto y en el ejemplo, pude hacerse click sobre los enlaces de la entrada para colorizar los diferentes rectángulos e identificarlos: [VER EJEMPLO]
Ahora, vamos a cambiar el ancho del blog y lo que vamos a mirar es el valor que está definido en outer-wrapper:
Ahora, vamos a cambiar el ancho del blog y lo que vamos a mirar es el valor que está definido en outer-wrapper:
#outer-wrapper {
width: 660px;
margin: 0 auto;
padding: 10px;
text-align: $startSide;
font: $bodyfont;
}Cambiaremos entonces el valor de la propiedad width; le voy a dar 980 pixeles porque si bien el ancho de la pantalla es de 1024, debemos descontarle los márgenes, en este caso dice padding:10px; así que sería:
10 - 1024 - 10 = 1004
Pero aún así sería demasiado ya que hay una barra de desplazamiento vertical que debemos descontar y esa barra varía de tamaño según sea el navegador. Por si fuera poco, Internet Explorer se ejecuta en una ventana que tiene un borde lo que disminuye aún más el espacio disponible. En principio, en IE el ancho máximo sería de 983 pixeles y en Firefox de 991 pixeles así que tomo un número redondo y resuelvo las pequeñas diferencias.
¿Qué pasaría si lo hiciera más ancho? Nada grave, apareceria entonces una barra de desplazamiento horizontal.
Así que si he decidido que mi blog tenga 980 pixeles de ancho y ahora tiene 660 pixeles, le estaré agregando 320 pixeles que voy a colocar como valor en los tres rectángulos principales:
10 - 1024 - 10 = 1004
Pero aún así sería demasiado ya que hay una barra de desplazamiento vertical que debemos descontar y esa barra varía de tamaño según sea el navegador. Por si fuera poco, Internet Explorer se ejecuta en una ventana que tiene un borde lo que disminuye aún más el espacio disponible. En principio, en IE el ancho máximo sería de 983 pixeles y en Firefox de 991 pixeles así que tomo un número redondo y resuelvo las pequeñas diferencias.
¿Qué pasaría si lo hiciera más ancho? Nada grave, apareceria entonces una barra de desplazamiento horizontal.
Así que si he decidido que mi blog tenga 980 pixeles de ancho y ahora tiene 660 pixeles, le estaré agregando 320 pixeles que voy a colocar como valor en los tres rectángulos principales:
#outer-wrapper {
.......
width: 980px; /* cambio 660 por 980 */
}
#header-wrapper {
.......
width: 980px; /* cambio 660 por 980 */
}
#footer-wrapper {
.......
width: 980px; /* cambio 660 por 980 */
}Por último, debería resolver cómo distribuiré esos 320 pixeles extras entre el rectangulo de entradas y el de la sidebar. En este caso le agregaré 150 a las entradas y el resto, a la sidebar así que también cambio esos valores en el CSS:
#main-wrapper {
.......
width: 560px; /* 410 + 150 = 560 */
}
#sidebar-wrapper {
.......
width: 390px; /* 220 + 170 = 390 */
}Con eso, tengo completada la tarea y como no he cambiado márgenes ni ninguna otra propiedad, el resultado será la misma estructura pero, se distribuirá de mejor manera en la ventana del monitor [VER EJEMPLO]
¿Podemos seguir cambiando cosas? Sí: esto continuará ...
¿Podemos seguir cambiando cosas? Sí: esto continuará ...
121 comentarios:
Imposible que alguien no estienda esto: está explicado a la perfección. Qué bien me hubiera venido hace un año, pero hubo que aprender a los golpes.
(y todavía no funciona la vista previa?! que lo parió...)
Saludos.
permite que sea el primero en decirte, con perdon de la expresion, que eres el puto amo en esto ;-)
Un saludo
JMiur, por favor, ¿cuál es la diferencia hay entre footer y footer-wrapper? Porque yo tengo la mínima (requetetoqueteada) y sólo tengo el footer, a secas. Si lo modifico como acá, se me va todo al jorac....
Saludos.
Vaya pedazo de explicación!! Está todo clarísimo JMiur, ya te dije que sos un GENIO no?? :D
A mi esto por ahora no me va, yo tengo que reducir no agrandar ja ja Pero no pierdo las ilusiones...;)
Te quería preguntar, yo creo que lo vi acá, pero no me acuerdo donde ni el nombre de la entrada para buscarlo, es lo de hacer que salga la imagen en la fecha aunque hagamos dos post el mismo día, no se si me explico, no solo la imagen, sino que salga la fecha igual aunque haya dos post el mismo día, se entiende o me enrosque mal?? :S
A ver si aclaro... o oscurezco, que la fecha salga en cada post, aunque sea la misma, me parece que ahí está mejor :)
una explicación de un maestro para los que como yo estoy tratando de aprender, excelente J!!!...saludos!!!
Me pidieron que hiciera una entrada sobre este tema y la haré.
Pero caballero... cada día pone usted el listón más alto una cosa es explicar y otra ser el mejor explicando :)
Me encantó el ejemplo.
Este es, sin duda alguna, el inicio de un tutorial como tantos otros que tiene carácter de "clases magistrales", explicado con tanta claridad que nadie podría resistirse a llevarlo a la práctica.
Mil gracias por enseñarnos a diario!!!
Saludos.
Genial!!!!, este post pasa a la 'sección de indispensables', realmente muy bueno.
:( lastima que lo hayas sacado cuando ya cambie el ancho de mi plantilla, imagínate que fácil lo haces ver.
Gracias Master!!!!
Excelente explicación... muy buena recomendación... Nos va a servir muchísimo...
Gracias por los comentarios. Apabullantes de verdad. Esto dl ancho es algo bastante más facil de hacer que de explicar :D
Anahí:
En realidad, no hay diferencias. Sólo son los nombres de los DIVs o sea de los rectángulos. Si no hay uno definido en tu plantilla no importa a menos que en algún momento veas algún problema cuando agregas algo. Lo que dice el post respecto a agregarlo es sólo para que queden todos definidos con el mismo criterio pero no variará nada en la plantilla. Si quieres modificar el ancho, usa el dato de footer que allí debe estar definido width.
k_nelita:
Algo de eso puede verse acá. No es sencillo de entender y tiene varaiaciones dependiendo de la plantilla. Si estás usando el script del calendario, hay que modificarlo un poquito y agregar algo en la plantilla; encontrar dónde colcoar ese agregado es lo que puede ser engorroso. Fijate y cualqueir cosa me avisás.
Excelente, simplemente excelente! tu explicación perfecta y el ejemplo es de lo mejor! tan claro todo... :(( yo ... que lo tuve que aprender dándome la cabeza contra el monitor!! :D
Felicitaciones JMiur, maestro!
Un abrazo
Gracias por tu generosidad, estoy empezando con mi blog y creo que tendré que venir a éste con frecuencia.
Saludos,
Hola JMiur.
Uyyy, me ha ayudado bastante esto, ya tengo lista mi plantilla y puesta en mi blog!!!.
Me ha quedado, por no decir otra cosa, excelentemente fantastica, hehehe!.
Saludos y gracias por todo!!!!.
Estoy buscando el script que te comentaba el otro día... es una librería js. con ventana modal.
Lo buscaba en Google y llegué aquí ¿lo recuerdas? es que olvidé cono se llama :(
Saludos a todos y suerte, Nónimo; bienvenido :D
Gem@:
Si es donde dejateste un comentario hace unos días, se trata de PopBox. AQUÍ.
Llego un poco tarde y seguro que esto se le escapará a la mayoría, pero creo que tiene mucho que ver con el tema en general:
http://mandelrot.com/2007/02/sidebar-de-ancho-fijo-en-diseo-flexible.html
Hola Jmiur, luego de ver con calma esta explicación por fin se quitó el scroll y se ve al tamaño de la pantalla. De acuerdo a lo que vi mi error era por poner el fondo en el body y se extendía, además con esta corrección de ancho tengo la sensación que se regenera mejor y sin trabas :)
¿Cómo puedo controlar que la imagen del footer que no está en las columnas no quede tan separado de la parte donde dice diseño tanto plantilla tanto que está pero en el lado html de la plantilla no en elementos,para que no se extienda tanto? uf! espero haber sido clara jejej :D
Ah... :( sigo teniendo problemas con las flechas de los archivos, antes que se cargue el cbox funciona pero cuando se carga no funcionan las flechas sin recargar
Gracias por tus enseñanzas :)
besos ronroneados
Te felicito por la explicación Mandelrot, es muy buena. Aunque me da la sensación que lo que aquí se ha tratado aparte de ampliar la plantilla ha sido aprender a conocerla y familiarizarse con ella.
Con la frase final " esto continuará .." entiendo que se profundizará más en el tema.
Es verdad Gem@, por eso decía que tiene que ver con "el tema en general" del ancho de la plantilla; y como me lo han preguntado un millón de veces he pensado que sería útil... :-D
Pau:
Me he perdido un poco en la explicación; no entiendo bien si hablas de la página online o de si hablas de lo que ves en Diseño | Elementos de la página.
Mandelrot:
Todo es bienvenido así que cualquier aporte es apreciado :)
Gem@:
Sí. La idea es seguir y apunta más a lo general que a lo particular. Veremos hasta donde se llega :D
Parecerá el típico comentario de Spammer, pero es que me has dejado sin palabras... Para los Cateto-analfabetos como yo, este post es simplemente MA- GIS- TRAL.
Gracias!
Escribiendo la explicación, recordé que me dijiste que le pusiera las propiedades en edición de html en este caso el elemento #html4 dejando así la imagen como background, así corrigió el margen que le sobraba cuando la ponía como elemento de página tipo img style="... y para poder ocultarla en las páginas de entradas dejé solo un . :)
Gracias por tu pronta respuesta, me respondí con tu ayuda anterior y con la respuesta que me dejaste ahora prrrr :)
Aprovecho y te pregunto, en autor tengo una imagen y para los lectores otra, que tipo de condición o b:if tengo que poner para que cuando alguien escriba diga "x maulló" y cuando yo lo haga diga "x ronroneo" o si le quiero agregar una imagen que no sea la de autor, otros o anónimo
uf! me puse preguntona jejeje :D
Espero que tengas un lindo día.
besos ronroneados
Me ha encantado la explicación, es fantástica. Estoy deseando que publiques el continuará....
Gracias, un abrazo
boloo:
Saludos y gracias por el comentario.
Pau:
Si te fijas en un post de Rosa, ella explica como hacerlo AQUÍ. Creo entender que la única diferencia sería que, en lugar usar imágenes, usarías un texto.
Silvia:
En eso estamos :D
Ya lo tengo aplicado puse unos gatitos, lo aprendí contigo aquí :D cuando agregué varias cosas en el blog directo gracias a "y libranos del google page" solo pensé que se podía agregar otra condición para poner los textos :)
Gracias!
besos ronroneados
Realmente muy bueno!!
Yo personalmente soy aun un novato y me lo he pasado estudiando plantillas en sí, pero nunca terminé de entender como lo hacía Blogger con sus plantillas.
Ahora mismo voy a hacer la prueba con un nuevo blog que estoy creando y le voy a dar el diseño que siempre quise.
Un gran saludo y felicitaciones!!
El mejor tutorial que jamás he visto!
Oh, capitán, mi capitán!
Me alegro que el enlace fucnionar, Pau. Las condiciones sirven para cualquier cosa, no hay limitaciones.
Gunner: Me alegro que te sirviera y hacerlo así como quieres, es lo mejor para terminar de entender. No es tan complejo como parece.
No tengo novia:
Gracias por el comentario ... ¿Walt Whitman? :D
muy bueno el tuto!! lo malo es que no tengo mucho tiempo para poder hacer mis propias plantillas pero bueno de a pocos se aprende nop XD ...
muy bueno el tutorial !!
grax por el tuto, oyes, estoy siguiendolo porke me interesa modificar mi blog, ya empezé desde cero, asi ke pss espero me salga bien todo, XD
ya entiendo mejor el HTML, ya ke antez no sabia nada, ajja
oyes kuantos tutoriales son en total, y será ke se puede poner imagenes de fondos en kada seccion, por ejemplo en entradas un tipo en otro otro, etc...
saludos y eres el mejor en esto!!
Sm4C:
En realidad, la idea no es diseñar una plantilla propia sino tratar de entenderla para que todo sea mas sencillo a la hora de modificarla. Todo se aprende de a poco, sobre todo, equivocandose :D
Azuel Firguilera:
Me alegro que te sirviera ¿Cuántos son? No tengo la menor idea, por ahora hay cuatro o cinco publicados. Eso de los fondos con imágenes es uno de los que tengo pendientes, espero tener tiempo para hacerlo a la brevedad.
Gracias por los tutoriales, ya voy entendiendo algo
que me parecia mas dificil que hablar chino.
Un saludo desde Valencia...
Saludos, Antonio; me alegro que te sirvan y el chino se vuelva un poco más comprensible :D
te amo :D
Hola Jmiur, me encanta tu tutorial es muy claro y aprendí bastante gracias a vos.
Pero no entiendo que pasa? Creé un blog desde cero completamente, para no errarle con las modificaciones pero no sé que estaré haciendo mal, porque en la parte de donde se ve el esquema del blog en diseño, la cabecera y el footer se ven cortados, no en el blog sino en el esquema solamente y cuando le bajo los valores de widht se acomodan por ejemplo si pongo al área outer-wapper, al header wrapper y al footer el valor recomendado 980 y al side 390 tal como dijiste me pasa eso de que en el esquema se vean cortados el footer y la header y probe bajando a 960 footer y cabecera respectivamente y ahí se ve bien en el esquema, al parecer me estan sobrando 20 de algo pero no sé dónde? es que soy muy novata y por ahí le sobra un margin en otra parte y no me doy cuenta. este es el blog de prueba que creé si podés le das una vuelta es este http://blogdesde0.blogspot.com/
desde ya mil gracias por todo.
Insomnya:
Lo más importante es que el blog se vea bien cuando lo navegas. En ese sentido, no modifiques la plantilla para que se vea bien en la ventana Elementos de la página ya que esa ventana, sólo es una herramienta interna de Blogger que sirve para editar los elementos pero no tiene relación con la forma en que se ve el blog. Entonces, lo que hay que hacer es que esa herramienta sea util pero nada más.
Si el blog lo ves bien, si las medidas y la distribución te parecen adecuadas, no las cambies para hacer que en la ventana donde se muestra el esquema se vea bien, eso, lo trataremos de corregir de otra manera.
No es sencillo porque esa ventana está mal hecha y es difícil de controlar, hay que probar y encontrar un esquema que sea aceptable y nada más.
Si agregas estas definiciones justo antes de ]]<>/b:skin>, se acomodará bastante. Puedes probar con otras medidas hasta encontrar la que te resulte cómoda. Insisto, recuerda que sólo es un esquema y que no afecta al blog en si mismo:
body#layout #outer-wrapper {margin:0 auto;width:750px;}
body#layout #header-wrapper {margin:0;width:600px;}
body#layout #main-wrapper {padding:5px 0;width:400px;}
body#layout #sidebar-wrapper {padding:5px 0;width:120px;}
body#layout #footer-wrapper {margin:0;width:600px;}
Espero que los códigos sean legibles, cualquier cosa, me mandas un mail y te lo envio por correo.
Listo Gmiur muchas gracias. Ya arreglé lo del esquema, deje los valores como recomendás 980 980 980 560 y 390 en lo que hace a la estructura real del blog al navegarlo y en eso de body layout puse 960 en cabecera y footer respectivamente y 560 y 390 como era. Ahora el esquema se ve perfecto. con lo cual supongo que ya no tendré problemas. Una preguntita más ¿eso de body layout afecta solo al esquema y no al blog 'real'? Es que tengo otro blog con el mismo problema y en unas de esas le agrego esto y asunto arreglado.
Muchas gracias por todo Gmiur.
Exacto. Esas propiedades sólo afectan al la página interna de Blogger y no modifican en absoluto el blog. Es igual para cualquier otro blog si es que los DIVs tienen los mismos nombres.
Puedes colocarlo, quitarlo, cambiarlo y el blog no se modificará en lo absoluto.
Gracias Jmiur !!! super contenta porque al fin voy entendiendo de qué se trata este mundo de códigos que me parecían un misterio inabordable. ahora sí me pongo a solucionar los miles de problemas que tengo en mi blog principal debido a las incontables veces que le he metido mano al código de mi plantilla sin saber bien de que se trataba y de puro ansiosa claro.
Gracias!! Un saludo
Esto es una pasada! Cómo no te busqué antes de modificar mi plantilla??? Me volví loca!
Ahora estoy haciendo un blog de pruebas con la mínima y lo que a mi me costó como 3 o 4 horas tú lo explicas de forma tan facil que quién no lo entendería! no sabía siquiera lo que significaba cada término.
Es una maravilla de tutorial.
Mil gracias. Ya era hora de empezar a entender un poco después de tanto tiempo de trastear y meter la pata :D:D
Veo que diste con la entrada Maite, si con esta explicación no te resulta apaga y vámonos :)
Me alegro que te sirviera, Maite. No es complicado, te confieso que cuando lo hice por primera vez hace ya mucho tiempo, también me volví loco :D
Menos mal que me dijiste que pasase por aqui Gema :D
Genial JMiur, en un día tengo casi toda la plantilla terminada trucos incluidos gracias a vosotros :D
excelentemnte bien gracias mano soy nuevo en esto y me fue d lujo gracias por la ayuda :D
Hola JMuir, una preguntilla, seguro que super fácil pero no consigo ver por qué me sale mal.
Tengo la plantilla, me mide en total 850px pero sin fondos.
Ahora voy a ponerlos y resulta que cuando quiero poner la foto un poco más grande que el contenido para hacer como que todo está dentro de un folio la foto no se me centra respecto al blog no me la centra sino que me sale desde el margen izquierdo hacia la derecha, y claro, sobran unos pixeles.
No se si me explico bien, si quieres te envío una foto para que veas lo mal que me sale?? :D:D
Tendría que haber empezado por fondos y seguir por contenidos, me temo...
Maite:
Tendría que verlo online para responder con exactitud pero, supongo que estás usando la propeidad background para colocar la imagen.
Si es así, por defecto, la posición de la imagen es arriba/izquierda pero, puede modificarse. Por ejemplo:
background: transparent url(laImagen) no-repeat 50% top;
La centrará horizontalemente. Esos dos valores finales indican la posición (50% top)
Por defecto son left top. Pueden ser palabras (left right tiop bottom) porcentajes o valores expresados en pixeles.
¿Algo de esto ayuda?
Pues creía haberlo entendido hasta que me he puesto a hacerlo...
Tenía un $startSide top; así que la imagen se cortaba por la dcha, al quitarlo se ha centrado pero al ocuparme el ancho del blog y la imagen ser más grande se cortaba la dcha e izqda así que le he dado la anchura de la foto y entonces ha salido entera pero desplazada hacia la izda. Parece ser que el 50% o el left no me hacen nada.
la imagen mide 960 y el blog 850.
La dire es esta, no la de mi perfil.
http://metiendolapatapruebas.blogspot.com/
(te doy acceso ahora mismo)
Si te das una vueltilla te lo agradecería un montón !!!!
Pero explicamelo, por favor, porque tengo que entenderlo, esa no es la cabecera que irá definitivamente.
Muchas gracias !!!!!
Maite:
Lo estoy viendo en tu blog de pruebas. Ahora dice esto:
background:#E0E0E0 url(http://........./headerbgwy4.jpg) no-repeat scroll left top;
Si cambio la posición verás algo diferente. Por ejemplo, exageremos:
background:#E0E0E0 url(http://........./headerbgwy4.jpg) no-repeat scroll 80% top;
A medida que aumento el valor de la posición horizontal, voy viendo algo más de lo que estaba oculto a la derecha (se mueve hacia la izquierda).
El problema a resolver es este, la imagen mide 960 pixeles de ancho y el DIV del header 850 pixeles así que siempre sobrará algo. Con las posiciones, lo que hacemos es definir que mostraremos y qué ocultaremos de eso que sobra pero, lo ideal sería tener una imagen que se ajustara al tamaño o sea, que fuera un poco menos ancha o, ampliar el ancho total del blog.
donde tú ves scroll left top yo estoy leyendo $startSide top !!
bueno, no importa, el caso es que creo que te he entendido, voy a hacer la cabecera más pequeña, y lo más seguro que modifique medidas, debí haber empezado primero por las imágenes me temo !!!
Gracias por pasarte por allí !!! :D espero venir para decirte que lo he conseguido :D
PRUEBA SUPERADA!
y más rápido de lo que yo esperaba! si es que con las explicaciones que das todo resulta fácil!
GRACIAS! :D:D
Ya llevaba horas con ésto y no había manera, eres mi héroe jajaja
:( :( se me ha ocurrido abrirlo en el firefox y está el blog a la izquierda del todo! :(
llevo como 1 hora haciendo pruebas y no hay manera de centrarlo.
en el explorer se centra muy bien, como puedo arreglarlo????
Bien. No te preocupes. La solución es sencilla.
En #outer-wrapper, ahora dice:
margin: 0;
cámbialo por:
margin: 0 auto;
y de esa manera, estará centrado en ambos navegadores.
Fiuuuu genial! qué alivio! :D
Hola JM, ayer estaba aburrida así que me puse a hacer esto en blog de pruebas, pero claro vos das las explicaciones para la Mínima, y a mi se me ocurrió agrandar la otra que es modificada y bastante engorrosa por cierto, por ejemplo no tiene #footer-wrapper, solo footer.
Es todo imagenes, así que me tomé el trabajo de agrandarlas a todas, con la consiguiente pérdida de definición, pero bueno eso sería lo de menos, lo que no me gusta es que la sidebar queda demasiado ancha de acuerdo a las medidas que vos das.
La cabecera del costado derecho de la pantalla no se porqué sale algo raro, y el footer obviamente no pude modificarlo porque no lo encuentro, querés mirarlo y me decís que te parece?
Bueno, quieras o no quieras aca va el enlace Pruebas
Alli hay varias cosas. Algunas son fácilmente arreglables otras no.
El tamaño de ambas partes, blog y sidebar se controlan con:
#main-wrapper {
.....
width:550px;
}
#sidebar-wrapper {
.....
width:390px;
}
Para achicar la sidebar se reduce el valor de width y se le suma a main.
Lo que ves en el header, a la derecha es porque la imagen de fondo tiene 962 pixeles de ancho y el header 970 pixeles de ancho así que hay un pedazo que no tiene imagen, por eso ves esa rayita vertical.
Lo el footer-wrapper es indiferente, en la plantilla, existe como DIV pero no tiene propiedades y todas están en ese otro llamado footer. Esa parte en intrascendente.
Ahora bien. La parte importante es que la plantilla tiene un concepto erróneo. Si te fijas, aparecen 4 divs:
<div id="outer-wrapper">
<div id="wrap2">
<div id="outerwrapperbottom-wrap1">
<div id="outerwrapperbottom-wrap2">
Y ACA ESTÁ EL HEADER
ACA MAIN + SIDEBAR
ACA FOOTER
</div>
</div>
</div>
</div>
Hay 4 rectángulos, uno adentro del otro. Eso no tiene mucho sentido. La lógica sería esta:
<div id="outer-wrapper">
<div id="wrap2">
ACA ESTÁ EL HEADER
<div id="outerwrapperbottom-wrap1">
<div id="outerwrapperbottom-wrap2">
ACA MAIN + SIDEBAR
</div>
</div>
ACA FOOTER
</div>
</div>
Siguiendo ese esquema, todo se acomoda com más facilidad.
A ver si puedo meterle mano a esto... lo de la cabecera... si le pongo al header 962 igual que el tamaño de la imagen, se corrige o tengo que agrandar la imagen?
Después te sigo preguntando, mientras voy viendo si puedo hacer algo de esto, nada fácil por cierto :S
Voy a ver si doy con el número que tendría que ponerle a la sidebar y al main... y lo demás...
Si, si, ya está cambiando la medida del header por la misma de la imagen queda perfecto.
Me sigo contestando sola viste?
Pero no te hagas iluciones, tengo y tendré mas preguntas... :D
Para cambiarle las medidas a la sidebar tengo que achicar las imagenes, eso me va a complicar muucho la vida, así que de momento voy a dejarla así.
Voy a ver lo mas complicado eso de los divs y te cuento... retornaré ;)
Acá estoy otra vez "hablando" sola, no pude con el asunto de los div, esa plantilla es chino, vos ves cosas que yo no, esa estructura que decís o es muuuuy larga y no se donde termina, el footer no lo veo en ningún lado (estoy hablando desde dentro de la plantilla con artilugios expandidos ehh), de cualquier forma desde donde dice: div id='outer-wrapper'para abajo hay mil cosas, el main la sidebar y montón de cosas mas, pero el footer, salvo coment footer, no hay otra cosa, pero igual con muchas cosas mezcladas, no se hacer eso... :(
Otro tema... el otro footer, o sea la parte de abajo que se ve en el blog, abajo de todo de la página, hay una especie de imagen que no coincide con las medidas de la plantilla, eso donde está?? :o
A las respuestas que ya contestaste:
SI. cambiar el tamaño del header está bien Tal vez, sería bueno cmbair todos los otros valores es decir si dice 970 poner 962, en outer-wrapper en fotter, etc, así queda "parejito".
SI. cambiar el ancho de la sidebar es engorroso porque hay que cambiar las imágenes. En general, lo recomendables es dejar siempre las imágenes para el final y poner colores de fondo hasta tener todo ajustado.
A las respuestas que no contestaste:
Para ver la distribución, lo mejor es no expandir los artilugios; cada sección se mostrará sólo con un par de líneas y es más sencillo ver donde empiezan y donde terminan. También pueden "moverse" sin problemas. con los artilugios expandidos es casi imposible verlo porque es demasiado largo y es fácil equivocarse.
El footer, ahora n otiene contenido pero si un tamaño y una imagen de fondo que es la que ves abajo de todo (como una raya oscura). Eso, está en el CSS:
#footer {
background: ........;
..............
}
Si querés que no se vea esa imagen, elimina background. Si querés que desaparezca el footer y que no ocupe espacio hasta que lo quieras usar, eliminá también padding-top:10px y height:36px.
Ahí voy a la carga de nuevo, si claro que cambié todas las medidas, soy medio torpe pero no tanto, quedó parejito, parejito, no lo viste?? :D
Ahora voy a ver lo de la distribución, claro era sin expandir... con razón yo veía tantas cosas, era larguísimo eso...
Y veré también lo de css del footer, en un rato te cuento...
Mirá vos lo que era lo del footer... resulta que esa imagen la del footer yo la había agrandado, pero como no pensé que hablabamos del mismo footer-wrapper no le cambié la medida ahí, y estaba chiquita, (esa era la imagen fea que veía)le puse 962 como todo lo demás y se arregló :D
Lo de los div no hubo caso, cada cosa que cambio me tira error de xml, después me voy a fijar como los tengo en Te Propongo, me parece que la vez pasada los cambiamos...
Agrandé la resolución a 1024 x no se cuanto, para verlo y se ve bien, salvo que con mi monitor de 800 las letritas yo ni con lupa claro, era solo para ver como lo verían los demás, vos seguro tenés una resolución mayor, querrías darle una mirada y decirme tu sincera opinión?? ;)
Prueba
Vos ves en la sidebar como una parte de color mas oscuro hacia la derecha de arriba hasta abajo, como si estuviera partida o remendadada? Eso sería la impresión visual ehh... será por la imagen?
Igual estoy jugando un poco, porque hasta después del concurso no puedo cambiarla, también quiero ver de hacer unas imagenes decentes, no lo que hice con Paint (no te rías) que es lo único que se (trabajar es mucho decir no?) usar...
Se ve bien. Lo miro con una resolución de 1024.
Es una plantilla compleja así que mover y ordenar no es fácil, por eso salen esos errores.
Lo de la sidebar y ese tipo de detalles es un tema de imñagenes, al ampliarlas pierden resolución, ciertas partes se ven esfumadas y ese es el efecto visual que ves.
Ahh bueno me quedo mas tranquila si vos lo ves bien está genial ja jaa
Si, tengo que cambiar esas imagenes, imaginate que eran gif, las modifiqué a jpg y después las agrandé, como no se van a estropear?
Se re pixelaron... :D
Ya veré de conseguir alguien que me las haga como debe ser ja jaaa
Gracias ;)
Mirá, como me resultaba muy ancha la sidebar y no quería poner dos por lo de las imagenes, traté, o estoy tratando de poner dos cosas en el ancho, por ej. dos imagenes una al lado de la otra, eso me queda bien, pero al tratar de hacerlo con algún código no se como hacer para que me quede uno al lado del otro, quedan debajo, aunque le puse left a uno y right al otro, nada, con las imagenes no hizo falta le puse el centro donde empezaba una y el centro de cierre al terminar la otra y quedó bien.
Como puedo hacer?, Es para aprovechar el espacio...
Quise decir center... :S
Hola!!! Tengo una duda..... podría mantener el sidebar wraper estático, es decir que cada vez que se habra un link nuevo independiente en el blog por ejemplo un "leer mas" , se actualize todo excepto el sidebar wraper.... tengo un reproductor de musica y cada vez que entrar a un post en particular, la reproducción se repite... :) en fin muchas gracias!
k_nelita:
Si se trata de la primera parte "Mis Blogs y Enlázame", com olas imágenes son todas de diferente tamaño, la mejor forma de organizarlas es colcoarlas en una tabla ya que sini, será muy complicado de alinear. Hablo de este blog.
BtheBlog:
No parece que sea una solución sencilla de conseguir en Blogger. Creo que alguna vez vi una plantilla que funcionaba de esa manera pero me parece que tenía una serie de scripts muy complejos. Nunca más vi algo semejante.
Si era ese blog, puse eso de ejmplo, las imagenes de la segunda fila mas o menos quedan, pero lo del principio no, ya se que es de distinto tamaño, pero no eran precisamente imagenes lo que queía poner, eran los últimos articulos, y no se todo lo demas pero en dos filas como si fueran dos sidebares...
Entonces me puse a tratar de hacerle realmente dos sidebares, imposible!
Ahora lo estoy intentando de puro caprichosa en una minima recién bajada y tampoco puedo, me queda todo debajo del main, ya me estoy poniendo nerviosaaaaa, hace como mas de dos horas que estoy con esto...
Como sería lo de las tablas que decís? No para imagenes solamente sino para todos lo cachivaches que tengo en la sidebar de Te Propongo
Quiero mudar ya el blog a la plantilla grande, pero me sobra mucha sidebar, si me va a quedar todo encolumnado...
Habría que ver detalles pero, una tabla sería esto:
<table style="margin:0 auto;border:none;width:100%" cellspacing="5" cellpadding="0">
<tr>
<td align="center" valign="middle"> LA IMAGEN </td>
<td align="center" valign="middle"> LA IMAGEN </td>
</tr>
<tr>
<td align="center" valign="middle"> LA IMAGEN </td>
<td align="center" valign="middle"> LA IMAGEN </td>
</tr>
</table>
Ahá... pero si no son solo imagenes? Son muchas cosas... estoy estudiando esto de las dos columnas del mismo lado, me parece que me había saltado un paso del tuto anterior por eso no me salía, pero igual no lo entiendo bien, porque donde das el código que hay que poner sobre la sidebar area entre medio hay (...) eso no se pone en la plantilla, por eso no entiendo...
Igual gracias, voy a ver si sigo estudiando cualquier cosa sigo molestando ja ja :D
No, claro, los puntos suspensivos no se ponen, lo único que se muestra allí es cuales son las diferencias o cuales son los combios a hacer, el resto queda igual.
Alinear horizontal y verticalemente contenido de diferente tamaño, solo se consigue por tres métodos: una tabla, divs contenedores que floten o por casualidad :D
JMiur ya habia posteado esta pregunta pero no hallo en donde esta... puedo mantener el sidebarwrapper estatico que no se actualize cada vez que se actualize la pagina?
Recuerdo la pregunta y la respuesta, en principio es no o por lo menos, no he visto nunca nada similar. No sería sencillo de hacer en Blogger.
bueno primero agradezco el tutorial ps bienj sencillo que se ve pero me ha resultado un error al cargar los cambios en la plantilla me dice:
´´Se ha encontrado más de un artilugio con el ID: HTML2. Los ID de artilugio deben ser exclusivos.´´
agradezco cualquier solucion ps me hurge darle una mejor presentacion a mi blogg
PD: segui paso a paso tus indicaciones incluso la plantilla minima
JeanPaul:
Eso es un error de Blogger. Suele ocurrir cuando cambiamos una plantilla por otra. Algo de eso puedes ver en este post.
LA solución simple es buscar en el código HTML2; vas a ver que se muestra dos veces (Blogger lo repite) y cambiar cualquiera de ellos por otro nombre, por ejemplo HTML22, guardas y continuas. Esto, puede ocurrir varias veces con otros elementos y se sigue haciendo lo mismo hasta que ya no da error.
OHH!!! OK Muchas gracias JMIUr! SALUDOS muchisisismos!
Eso me ha pasado que me decía que el artilugio html1 o 2 o lo que fuera estaba repetido, y le cambiaba el número y me salía otro, y así hasta que tuve que cambiarle casi todos jaja
Así que el mal...dichoso Blogger hace esa jugarreta?
Yo no lo sabía pero igual los fui cambiando, de puro audáz que soy :D
Y me quedó bien, ja, le gané ;)
Sí. Es un error de Blogger, pasa siempre :D
hola jmiur, muchas gracias por toda tu ayuda, tengo un problema, hice todos los pasos, pero en la parte de content wrapper no me sale alado del main wrapper como debería de ser, sino que me sale hasta abajo, y quiero ponerlo de lado derecho, cómo le hago??
gracias
Expliácme un poco más. El content-wrapper es todo, post+sidebars, main son los posts. Si se trata de http://elmundodelsilencio-anna.blogspot.com/ no veo nada malo pero no termino de entender bien la pregunta ¿queires que estén invertidos, la sidebar a la izquierda y los posts a la derecha?
gracias jmiur, ya logré hacerlo, tenía un problema con la distribución de los elementos, pero logré bajarle a los pixeles en el main wrapper, y pude hacer que el slide bar quede a la derecha, porque me quedaba hasta abajo. En fin, soy nueva en esto, es mi primera vez, y creo que pude lograrlo, gracias por tu blog, me sirvió de mucho, y espero que próximamente, pongas mas cosas como para escoger el estilo, el color, y el diseño...
Muchas graciassss!!!!!!!!!!
anna
Ahora entendí. Seguramente lo mirabas en IE, eso no me fijé. La solución es esa, disminuir el ancho un poco porque en IE hay un borde en el navegador lo que hace que el total disponible sea un poco menor,
Gracias, la verdad quisiera saber mas sobre las plantillas, como personalizarlas, el diseño, color, etc...
gracias
JMiur, ¿cómo puedo hacerte llegar un jamón? :D Llevaba toda la tarde para modificar una plantilla de tres columnas sin resultado, hasta que me acordé de esta entrada, aplicarla y ale hop, resuelto en cinco minutos escasos.
Una vez más, te muestro públicamente mi admiración.
Recibe un cordial saludo,
Max.
Me alegro, Max :D
La tecnología aún está muy atrasada y no permite el envio de jamones como adjuntos .. es una pena :D
jajajaja de ser así tendrías cerditos revoloteando a tu alrededor.
Bueno, quizás la palabra no sería revoloteando :O
Oh no, espero que se queden quietitos para hincarles el diente :D
muchas gracias...
Una pregunta, coloqué una imagen en la cabecera de mi blog, la imagen es un png con fondo transparente, hice que la imagen quede centrada en la página y como es más grande que el resto del cuerpo del blog la imágen tiene partes que sobresalen hacia el borde exterior, esto me da un excelente efecto a la cabecera pero sólo en mozzila firefox. mi pregunta es: puedo hacer que esto de resultado tambien en IE?
Por lo que vi, ni en IE7 ni en IE8 se corta, se ve completa. En todo caso, podrías aumentar el ancho el header para que coincida con el ancho de la imagen:
#header-wrapper {
.........
width:785px;
}
ya eso lo hice el problema creo que está en un margen que le añadí con valor negativo que no parecen aceptar versiones anteriores del IE, (lo ví en una maquina diferente con internet explorer 6 y se ve cortado), la pregunta es si existe alguna manera de corregir este detalle (aca en venezuela la gente aun usa mucho el IE6) para asegurarme de que mi portafolio pueda verlo todo el mundo, te lo agradezco de antemano.
Aca te dejo el script que usé:
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:1061px;
margin-left:-130px;
}
#header-inner {
background:url(http://img413.imageshack.us/my.php?image=cabacera.jpg
) top center no-repeat fixed;
margin-left: 0;
margin-right: 0;
}
En el blog que veo, las propeidades dicen otra cosa:
#header-wrapper {
border:1px solid #FFFFFF;
margin:0 auto 10px;
width:660px;
}
En eso que colocas, la URL de la imagen es errónea:
http://img413.imageshack.us/my.php?image=cabacera.jpg
Esa es la URL de la página web pero no el enlace directo.
Jajajaja, lo siento me equivoque, es que actualicé las imágenes, pero lo que me interesa es esto:
#header-wrapper {
width:970px;
margin-left:-69px;
}
el márgen es de -69 píxeles, eso hace que sobresalga esa cantidad de imimagen por ambos lados, el problema es que se desordena cuando se ve en IE6, no se, si me pudieras aayudar con eso sería genial, de pana soy nuevo en esto y no se como hacerlo yo pero una vez que aprendo lo aprovecho y de nuevo agradezco de antemano.
Por cierto, de los dos blogs es este: http://mercuriocromo-ve.blogspot.com/
disculpa la ladilla (fastidio) :-)
Si. Lo veo. Pero no hay forma en que pueda intentar resolver eso en IE6. En cualquier otra versión psoterior se ve bien.
GRACIAS!!!!!!!!!!!!!!!!!!! TE ADORO TE AMO T_T!!!
no sabia como hacerle crecer para los lados pero muchas gracias x tu ayuda!!! :D
Me alegro que sirviera :D
Muchas gracias! Muy bueno! Pero me quedó algo sin resolver, que ni siquiera sé si se puede. Puedo tener las entradas paralelas a la cabecera? No sé si me explico. Quiero que la cabecera esté arriba a la izquierda (esto ya lo legré) pero también quiero que las entradas aparezcan cetradas arriba, al lado de la cabecera. Se puede??? Cómo hago???
No lo comprendo con exactitud, ¿podrías mostrarme algún dibujo, un boceto, algo pera ver si me doy cuenta de la idea?
perdon tengo un problema aver en que parte tengo que cambiar el hancho de footer-wrapper los hice mas o menos con tu paso aumento todo pero cuando cambien el aumento de footer-wrapper me desaparecio la imagen de fondo del blog.
solo necesito la indicacion o si tengo que hacer algo mas para que no desaparesca el fondo oks.
http://wowarnion.blogspot.com/
pasate y lo ves aver si con vuestra ayuda creo un buen blog ahora tengo ideas pero no se si llegara a dejar hacer tantas cosas para que me ayudes un poco y responder mas a mis preguntas puedes dejarme tu msn esque es mi primera vez xD y quiero aprender hay muchas ganas de saber es un reto para mi. BSS
ufff que torpe no leei bien perdona por que escriba otro comentario pero ya vi la solucion jaja perdon no sabia que habia que reemplazarlo por otro como dices hay xD
:D
simplemente makanudo
Genial Explicación !!!!
Hubiera tenido algo como esto cuando comencé a lidiar con Blogger, me hubiera ahorrado mucho tiempo. Terminé aprendiéndolo haciendo pruebas y cometiendo errores, pero sin duda tu post me es de ayuda. Nunca consigo dar con una plantilla que me siente bien, por lo que tengo que estar cambiando medidas, tanto en Blogger como en Wordpress.
Gracias, un saludo
Saludos Pablo. Pués, haciendo pruebas y equivocándose, es como hemos aprendido todos :D Y lo seguiremos haciendo :D
Que tal, muy bueno esta explicacion y en general el blog.
Tiene un diseño muy impotente y es de resaltar.
Me gustaria incluir este articulo en mi blog porque es muy clara la explicacion, me ha ayudado a entender algunas cosas de blogger.
Mi blog tiene una licencia creative commons, quisiera saber si es posible colocarlo dando todos los creditos respectivos.
Si es asi, le agradeceria dejar un comentario por mi blog "autorizando", por asi decirlo y de paso comentanto que tal le parece el mio.
El sitio es:
http://programador95.blogspot.com
Saludos
Daniel Ramirez Echeverri
Daniel: No hay problema, usa lo que te parezca conveniente.
Es excelente esta 1er parte del tutorial...la verdad que es muy clara y consisa!!! :D
Muchisimas Gracias por esta explicacion! :)
LoQra!
Realmente bien explicado. Mejor imposible. Gracias.
Buen Dia Jmiur! tengo un problema q de seguro usted me ayudara a resolver: hace unos dias cambie la plantilla en mi blog, el ancho de las entradas en esta ahora es el mismo que el de su blog coincidencialmente, pero hay un problema que no se si se deba a un error en la plantilla, al publicar entradas con imagenes, estas por mas que las centro e incluso he intentado con "center" "/center" el hecho es que al publicarlas se van hacia la izquierda o a la derecha mezclandose con el texto creando todo un desorden e irrespetando la alineacion establecida. De antemano gracias por la ayuda que me pueda brindar...
enriquenava.com.ve
Enrique:
Fíjate que en la plantilla, debe decir algo así:
.entry-content img {
border:1px solid #666666;
float:left;
margin:10px 10px 10px 0;
padding:2px;
}
eso de float:left; es lo que hace que todas las imágenes floten a la izquierda, sin importarr lo que coloques en las entradas; deberías eliminar esa propiedad. Lo mismo puedes hacer con margin para que no se agreguen márgenes extras por defecto cada vez que colcoas una imagen.
Efectivamente, ud. es un maestro, de verdad que si, tambien elimine margin como me sugirio, ya me preguntaba el por que ese espacio de la nada... Gracias nuevamente me saca de otro problema... Saludos!!!
Muchas gracias por toda la interesante y valiosa información que publicas en este blog, me ha servido de mucha ayuda. Gracias.
Saludos.
interesante
EXCELENTE POST TE LO AGRADEZCO ME A SERVIDO MUCHO...... YA TENGO OTRAS COSAS Q HACERLE A MI WEBSITE...... AHORA SOLO KIERO PONER EN EL BLOG LA PLANTILLA QUE HE ECHO EN DREAMWEAVER PERO NO SE COMO LOGRARLO SI ME AYUDAS TE LO AGRADECERE MI EMAIL ES maltez83@marlonamltez.com y mi pag www.marlonmaltez.com te invito y me dices q puedo cambiarle......
maltez: Eso no puedo hacerlo, no es mi oficio.
muchas gracias sos un genio me has ayudado mucho
yo tengo una duda, no se si he hecho algo mal pero el apartado de "elementos de la pagina" se ha alargado un trozo grande hacia la derecha
que puede haber pasado? GRACIAS
E difícil de saber, no hay forma de leer eso online; algunas propiedades de la plantilla afectan esa parte aunque no afectan al blog en si mismo.
INCREIBLE, QUE GRAN EXPLICACIÓN, PARA INEPTOS, NO HAY DISCULPAS QUE VALGAN, EL QUE NO SEA CAPAZ QUE SE DEDIQUE A OTRA COSA.......
¿Quiere dejar un comentario?
Hay varios métodos posibles.
Uno de ellos es el formulario de comentarios que tan generosamente nos ha regalado Blogger y que funciona sólo de tanto en tanto. Su uso es aconsejable sólo en caso de ser una de esas personas a las que les gustan los retos y los desafíos.
¿No quiere arriesgarse? Haga click para ocultarlo y utilice las otras opciones.
Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive
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 ...
Los comentarios están siendo moderados y serán publicados a la brevedad.