Diseño de Sidebar en HTML para Bloggers

Primero que nada lo mismo de siempre: Quizás este tema va mejor en HTML pero como es mas probable que los bloggeros se topen con este tipo de problemas como el que yo tengo lo puse por acá.

Hace unos cuantos dias puse un enlace de mi blog en la seccion de "critica mi blog" para que me dieran opiniones.
LA que mas me llamo la atencion fue darle diseño a mi sidebar y pense hacerlo con imagenes editadas por mi en Photoshop.
mi problema ( como comento en el post ) es que no se nada de html , solo se programar en pascal y veo que html es diferente en la forma de escribirse.
Pero busque información de lo básico en html y ahora se lo siguiente:
Puse en diseño> nuevo gadjet > Html/javascript
Luego puse lo siguiente:

Donde dice: esta para probar que medida es mejor para centrar los botones y esas cosas.

EL problema que tengo es que no me muestra completa la imagen de background. Es ancha como el ancho de mi sidebar (incluso un poco menos ancha) pero no me muestra uno de los bordes y tampoco todo el largo porque la cantidad de Texto e imagen que hay arriba no ocupa tanto espacio y se ve que te muestra segun lo que vas ocupando.

Quiero que muestre la imagen de fondo completamente y que ese sea el tamaño de mi gadjet ( Ya que el ancho trate de que sea el requerido para hacerlo asi. )
Como seria el codigo ?

¿ Se entiende o necesitan alguna imagen? ... lo tengo en un bloger de pruebas que no indexe pero si quieren foto hago una captura de pantalla y les muestro lo que pasa y lo que quiero que pase.

Saludos

Juan Pablo

(Gracias a todos )

Pone una imagen de lo quieres asi se entiende mejor....

Tambien podrias probar con agregar despues de la url del background (); repeat-x; repeat-y....
(Pero si repite la imagen puede quedar mal si no es de un solo color...)

con respecto a los padding para centrar botones podes hacerlo con
< div align="center" > Aca el codigo de "todos" los botones < /div >

o bien a derecha -> right
izquierda -> left

Pudes meter directamente en el css las propiedas que quiero darle al gadget previamente identificando el ID del gadget que quiero personalizar. de esto modo puedes personalizar cada gadget a tus gusto.

Esto te puede servir para que el fondo ocupe todo el gadget y no solo lo que vas ocupando.

Josue Alain dijo:

Pudes meter directamente en el css las propiedas que quiero darle al gadget previamente identificando el ID del gadget que quiero personalizar. de esto modo puedes personalizar cada gadget a tus gusto.

Esto te puede servir para que el fondo ocupe todo el gadget y no solo lo que vas ocupando.

Hacer clic para expandir...

Josue, Creo que vi algo de esto por el forobeta . Incluso quizas vos mismo lo explicaste.
¿Podrias explicarme como hago mas o menos esto precisamente del tamaño ? y que se muestre completo .
O si quieres puedes solo pegar el link del tema en que sale esto de darle id al gadjet . supongo que se hace en la parte principal, donde se modifica la plantilla.


Pablo Paro: En un momento subo unas imagenes para que comparen lo que yo quiero que se vea con lo que realmente se ve.

Gracias!

Juan Pablo.

Pabloparo dijo:

Pone una imagen de lo quieres asi se entiende mejor....

Hacer clic para expandir...

Asi es como deberia verse el fondo: Enlace eliminado

Y asi es como se ve con mi boton de prueba: Enlace eliminado

El boton se ve corrido porque estaba probando si con el padding podia arreglar que se vieran todos los costados a la imagen de fondo.


Bueno me despido Por ahora

Saludo y gracias de nuevo por sus respuestas!

Hola de nuevo, bueno si la imagen de fondo tiene las medidas exactas que tendra tu sidebar entonces solo al background asignales dichas medidas con Width: (ancho)px; Height: (Alto)px. (Si no tiene las medidas exactas tendras que usar repeat-x y repeat-y como dije en el comentario anterior)
Como te dije antes para centrar envolve el elemento con la etiqueta Div align="center", Ademas para que baje el boton creo que lo mas facil es que le des espacios nomas con < br />

Yo lo Hice maso y me quedo asi el codigo:

<div style="background-image: url(url del fondo); width:ANCHOpx; height:ALTOpx;"/><br /><br /><br /><br />
<div align="center"><a href="enlace a entrada"><img src="url del boton" alt="descripcion de entrada"/></a>
</div>

</div>


Para bajarlo o subirlo agrega o saca <br />

Enlace eliminado

Yo me base en este tutorial, donde el mismo autor da ayuda.
Enlace eliminado

Ah, lo que dijo Josue Alain tambien esta bien. Podes agregarles estilos con css a los elementos de la sidebar agregandolos en tu plantilla, asi ya cada vez que agregas un elemente tendria ya las propiedades que le asignes (Fondo, tamaño, bordes, etc).
Pero eso es otra historia.

Saludos

interesante. lo de los <br/> lo habia pensado.... voy a ver que sale.
Voy a leer el tutorial que me paso josue .
Luego les cuento que hice y como me quedo.


saludos!

GRacias!

Juan Pablo

buen dato, en algunos blogs de blogger no se permite editar esto, revisare