Poner borde en barra lateral de un Blogger

[Tarrika]

Buenas, tengo una duda referente a un blog que he creado: http://tarrikairenofansub.blogspot.com/

El caso es que he agregado la sidebar (barra lateral) de la izquierda, pero desconozco como hacerlo para ponerle ese finissimo borde que hay en la otra sidebar, barra central, y borde doble en caso de la zona del título. No puedo enviaros el codigo html pq me dice que el post es demasiado largo. En ese caso si necesitais que os muestre una parte del html decidmelo y lo cuelgo.

MUCHAS GRACIAS DE ANTEMANO.

[VirtualWork]

Hola!!!

Utiliza la propiedad border de hojas de estilo. Asi puedes determinar el ancho del borde, color, etc. Su itilizacion es:
border: ancho tipo color
Ancho en px, em, etc.
Tipo: solid (continua), dotted (punteada), etc.

[Tarrika]

Ui, no te he acabado de entender, es que no tengo conocimientos de html.. Te lo agradeceria mucho si me escribieras el codigo html y me dijeras en que parte colocarlo.

[Carlangueitor]

Iniciado por Tarrika

Ui, no te he acabado de entender, es que no tengo conocimientos de html.. Te lo agradeceria mucho si me escribieras el codigo html y me dijeras en que parte colocarlo.

Pues recomiendo que leas sobre eso si quieres editar continuamente tus plantillas.

Ah, y es imposible saber el código exacto sin ver el código que tienes.

Saludos

[kyedesigns]

El codigo de tu barra lateral a la derecha es el siguiente:

Código HTML:

#right-sidebar-wrapper {
      background-image:url("http://content.pimp-my-profile.com/tp/000000-70-tp.png");
      border:1px solid #555555;
      float:right;
      overflow:hidden;
      padding:5px;
      width:200px;
      word-wrap:break-word;
}

Y este es el de la izquierda:

Código HTML:

#left-sidebar-wrapper {
       background-image:url("http://content.pimp-my-profile.com/tp/000000-70-tp.png");
       float:left;
       overflow:hidden;
       width:200px;
       word-wrap:break-word;
}

Como puedes ver el de la izquierda no tiene la linea que añade los bordes. Solo deberías de añadirla a tu código a través de la opción de Edición HTML en tu blog de blogger.

Quedaria algo así:

Código HTML:

#left-sidebar-wrapper {
       background-image:url("http://content.pimp-my-profile.com/tp/000000-70-tp.png");
       border:1px solid #555555;
       float:left;
       overflow:hidden;
       width:200px;
       word-wrap:break-word;
}

Espero poder haber ayudado,
Saludos!

[Tarrika]

Wow, muchissimas gracias kyedesigns!! Lo he podido solucionar a la primera.
No querria abusar pero tenia una ultima pregunta, haber si me podeis ayudar:
-En la imagen principal del "head", puse los pixels exactamente para que cupiese perfectamente en el espacio del blog, pero en la parte de abajo de la imagen me ha quedado un espacio de pocos pixels, es decir, que de abajo la imagen no queda cuadrada en el recuadro (demasiado corta). Que debo hacer? porque intente poner la imagen un poco mas grande de altura pero el problema persiste.

[kyedesigns]

Hey! Me alegro habe podido ayudar en tu duda!

Bueno en cuanto al borde que te aparece, estas completamente en lo cierto, No tiene que ver con el tamaño de la imagen del Header.

Creo que el problema esta en el CSS del Header, dentro de uno de sus atributos, El Borde.

El codigo CSS de tu Header es el siguiente:

Código HTML:

#header {
      background-image:url("http://content.pimp-my-profile.com/tp/000000-70-tp.png");
      border:1px solid #000000;
      color:#FFFF66;
      margin:4px;
      text-align:center;
}

Si te percatas en el borde, esta codificado a "1px". Para resolver esto (al menos en Firefox esto funciona no he visto en los demas navegadores) debes de poner el borde a "0px", o simplemente eliminar esa linea. Eso creo que solucionaria tu problema.

Quedaría algo así:

Opción #1: Poner pixeles en "0"

Código HTML:

#header {
      background-image:url("http://content.pimp-my-profile.com/tp/000000-70-tp.png");
      border:0px solid #000000;
      color:#FFFF66;
      margin:4px;
      text-align:center;
}

Opción #2: Eliminar la linea

Código HTML:

#header {
      background-image:url("http://content.pimp-my-profile.com/tp/000000-70-tp.png");
      color:#FFFF66;
      margin:4px;
      text-align:center;
}

A ver si eso te ayuda un poco en resolverlo. Estaré viendo otras formas en caso de que lo necesites.

Saludos!

[Tarrika]

Ohh genial, solucionado!! Gracias a tu ayuda el blog ya empieza a cojer buen aspecto jejeje.

kyedesigns te estoy muy agradecido por la ayuda prestada. Si algun dia me surge otra duda sobre HTML espero poder contar con tus consejos.


Saludos!

[kyedesigns]

Muy bien! Suerte con el desarrollo de tu blog. Y si estaremos dispuestos a ayudar mientras nuestro conocimiento lo permita.

Saludos!