Ajuste de logo en header hacia la izquierda

Jblogger · 17 Dic 2009

SOLUCIONADO. GRACIAS A TODOS

Me estoy volviendo loco para mover el logo del header a la izquierda. No soy un maestro en HTML pero me sé manejar algo. No soy capaz de solucionar el problema.

Enlace eliminado

He tratado de quitar esta parte:

#header-inner {
background-position:center;
margin-left:auto;
margin-right:auto;
}

También de darle valores para que sea "left" pero no lo consigo. No sé qué se me escapa.

Os agradecería una ayudita... gracias de antemano.

fabdeco · 17 Dic 2009

a ver si esto sirve....

en el body tienes text-align:center; asi que una idea que se me ocurre rapidito es:

en

HTML:

#header-inner {
background-position:center center;
margin-left:auto;
margin-right:auto;
}

agregarle text-align:left; y width:100%
con lo que quedaría:

HTML:

#header-inner {
background-position:center center;
margin-left:auto;
margin-right:auto;
text-align:left;
width:100%;
}

y con eso debería quedar... probemos...

Jblogger · 17 Dic 2009

HTML:

#header-inner {
background-position:center center;
margin-left:auto;
margin-right:auto;
text-align:left;
width:100%;
}

He puesto eso en lugar de lo que tenía y no ha funcionado. De todas formas muchas gracias por tu ayuda 😉

fabdeco · 17 Dic 2009

revisando el codigo no tiene mucho sentido para que tiene incluido el logo dentro de ese div header-inner... prueba a sacarlo... (a borrarle ese div...)

Jblogger · 17 Dic 2009

Si elimino ese div se elimina el logo y no es lo que buscamos no?

HTML:

<div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
      </div>

fabdeco · 17 Dic 2009

no, yo digo solo el tag DIV, lo de "dentro" queda.... porque ese DIV, mirando rapidamente el codigo no veo que funcion cumple.... quizas de alguna otra cosa que tenia dentro el theme original, supongo....

Jblogger · 17 Dic 2009

Si te refieres a dejarlo sólo así, tampoco me funciona

HTML:

<a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>

fabdeco · 17 Dic 2009

si, me refería a eso... bueno, seguiré mirando el codigo, la solución es una pavada, estoy seguro, lo difícil es "encontrarla"!

Jblogger · 17 Dic 2009

Muchas gracias por todo compañero. Yo tampoco doy con el fallo.

Te dejo aquí la web de donde saqué la plantilla por si deseas descargarla.

Fuusune · 18 Dic 2009

Creo que puede ser, sin mirar el código, por el ancho del header. ¿Has mirado que no esté al límite de px del área del header?

fabdeco · 18 Dic 2009

a ver... otra prueba, fijate en el css que dice

HTML:

#header img {
margin-left:auto;
margin-right:auto;
}

según entiendo, ¿esto hace que la imagen se ubique proporcionalmente al "medio"...? hmmmm sólo afecta a al IMG que tienes como logo, yo me animaría a borrar eso y probar si da resultado (sino da resultado, lo vuelves a colocar).

Al visualizar la prueba, dos veces F5, porque como son cambios de CSS a veces el navegador necesita que se lo empuje un poquito a que actualice...

KnxDT · 18 Dic 2009

Bueno, ya lo edité con el Firebug. Los cambios que debes hacer son los siguientes.

CAMBIO 1

Cambiar esto:

#header-bg {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin😛adding;
background:transparent url(http://3.bp.blogspot.com/_iI6SgnnhWEM/SxN8y1v-A7I/AAAAAAAAArk/dU_q4WiiPW0/s1600/h1sidebar.png) repeat-x scroll left top;
height:160px;
margin:0;
padding:0;
}

Por esto:

#header-bg {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin😛adding;
background:transparent url(http://3.bp.blogspot.com/_iI6SgnnhWEM/SxN8y1v-A7I/AAAAAAAAArk/dU_q4WiiPW0/s1600/h1sidebar.png) repeat-x scroll left top;
height:160px;
margin:0 auto;
padding:0;
width: 950px;
}

CAMBIO 2

Cambiar esto:

#menucat ul {
background-color:#23242A;
float:left;
list-style-image:none;
list-style-position😱utside;
list-style-type:none;
margin:2px 0 0;
padding:0;
width:960px;
}

Por esto:

#menucat ul {
background-color:#23242A;
float:left;
list-style-image:none;
list-style-position😱utside;
list-style-type:none;
margin:2px 0 0;
padding:0;
width:950px;
}

CAMBIO 3

Eliminar todo esto:

#header img {
margin-left:auto;
margin-right:auto;
}

El problema se ha dado porque el inner bloque (también llamado wrapper) tiene un contenedor no centrado, que por defecto se alinea a la izquierda, por lo cual el contenedor del logo lo centra a la izquierda. Lo que se debe hacer es usar un width fixed o definir un ancho estático y luego centrarlo, por último definir los elementos internos como alineados hacia la izquierda o sin definirle nada (por defecto: alineado a la izquierda).

Jblogger · 18 Dic 2009

Solucionado, gracias a los dos.

He seguido los pasos de Knxt, pero me cortaba el fondo del header y cambiando el repeat scroll no hacía caso y he optado por quitar el fondo como imagen y ponerlo como color.

Todo arreglado. Dedito verde a los dos.

fabdeco · 18 Dic 2009

gracias! que bueno que lo hayas podido solucionar...

pero los deditos verdes en este caso le correspondían sólo Knxdt, mi ayuda no sirvió de mucho jejeje

saludos!

Luis · 18 Dic 2009

fabdeco dijo:
gracias! que bueno que lo hayas podido solucionar...

pero los deditos verdes en este caso le correspondían sólo Knxdt, mi ayuda no sirvió de mucho jejeje

saludos!

Jajaja.. Tampoco colega. La intención es lo que cuenta!

Yo llegue tarde, si no hubiera tratado de ayudar.

Saludos!

KnxDT · 18 Dic 2009

Jblogger dijo:
Solucionado, gracias a los dos.

He seguido los pasos de Knxt, pero me cortaba el fondo del header y cambiando el repeat scroll no hacía caso y he optado por quitar el fondo como imagen y ponerlo como color.

Todo arreglado. Dedito verde a los dos.

Que raro, en el Firebug me lo mostraba correctamente, debió habérseme pasado algo. Uhmmm, bueno, igual me alegro que te haya funcionado... aunque sea parcialmente 🙂

Microboy90 · 6 Ene 2010

Pues necesitaria ver cual es el template que utilizas para poder ayudarte y ahi poder hacer movimientos.Te puedo ayudar.

Jblogger · 6 Ene 2010

Microboy90 dijo:
Pues necesitaria ver cual es el template que utilizas para poder ayudarte y ahi poder hacer movimientos.Te puedo ayudar.

Gracias por tu amabilidad, pero ya lo conseguí arreglar.

Se me olvidó ponerlo en el post inicial, ahora ya está puesto.

Saludos!

Ajuste de logo en header hacia la izquierda

Jblogger

fabdeco

Jblogger

fabdeco

Jblogger

fabdeco

Jblogger

fabdeco

Jblogger

Fuusune

fabdeco

KnxDT

Jblogger

fabdeco

Luis

KnxDT

Microboy90

Jblogger

Temas similares