No soy capaz de colocar las imágenes donde quiero  

 
Ivan
 Ivan
Estimable Member

Hola a todos, me ocurreo que intento poner dos imágenes en dos zonas distintas del página pero que está a la misma algua y aun siendo las dos del mismo tamaño, la segunda siempre se coloca más abajo. Incluso he probado a poner sufijos al módulo pero ni caso y no sé como solucionarlo.

El tema es que quiero en la zona logo colocar el logo y a la derecha una imágen en la zona headerbar pero ni haciendo la imágen de la derecha pequeña, que siempre aumenta la altura de todo y se coloca más abajo.

hay alguna manera de colocar fondos ó algo para ver correctamente como se están distribuyendo los módulos?

Envío una captura de pantalla.

Citar
Respondido : 08/02/2012 2:18 pm
Jordi Sala
 Jordi Sala
Miembro Admin

Hola Ivan,

Las plantillas están divididas en posiciones

 http://bentrone-cp17.webjoomla.es/?tp=1 

a las que se asignan módulos. Estas posiciones en la plantilla vienen definidas en la programación de la misma y en las CC (hojas de estilos).

Para que la imagen de la teleoperadora vaya hacia arriba. Hay que modificar las CSS de la plantilla:
/templates/yoo_downtown/warp/css/layout.css

#headerbar .module {
    float: right;
    margin-right: 0;
    margin-top: 35px;
    max-width: 400px;
}

y modificar el margen superior

#headerbar .module {
    float: right;
    margin-right: 0;
    margin-top: 1px;
    max-width: 400px;
}

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio

ResponderCitar
Respondido : 08/02/2012 2:40 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Ivan
 Ivan
Estimable Member

Hola, el #headerbar. module no existía y se lo he añadido, solo había uno que era #headerbar ¿cual es la diferencia? Ahora pone la imágen mas arriba que el logo, creo que el descuadre que hay ahora es por como está hecha la imágen del logo, tengo que recortarla. ¿Donde puedo ver algo de información de como funciona todo esto así como las propiedades que se pueden utilizar?. He probado a poner lo mismo con "logo. module" y no hace ni caso :).

ahora ha quedado:

/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License ( http://www.yootheme.com/license)  */

@import url(../warp/css/layout.css);


/* Spacing
----------------------------------------------------------------------------------------------------*/

.module,
#header,
#content { margin: 10px; }

#breadcrumbs { margin: 15px 10px 5px 10px; }

#toolbar,
#footer { margin: 0 10px; }

#footer .module { margin: 0; }

#headerbar { 
	/*Pablo*/
	/*padding: 20px 0;*/
	/*padding: 0 0 20px 0*/
}

/*Jose*/
#headerbar .module {    float: right;    margin-right: 0;    margin-top: 1px;    /*max-width: 400px;*/   background: url(../images/menubar.png) 0 0 repeat;
}
/*Jose*/


/* Blocks
----------------------------------------------------------------------------------------------------*/

/* Toolbar */
#block-toolbar { padding: 5px 0; }

/* Main */
#block-main { padding: 10px 0; }

/* Bottom */
#block-bottom { padding: 20px 0; }

/* Footer */
#block-footer {
	padding: 20px 0;
	background: url(../images/footer.png) 0 0 repeat-x;
}


/* Layout
----------------------------------------------------------------------------------------------------*/

/* Toolbar */
#toolbar {
	line-height: 24px;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
}

/* Menu */
#menubar {
	padding: 10px;
	background: url(../images/menubar.png) 0 0 repeat;
}

/* System */
#content {
	padding: 15px;
	background: url(../images/content.png) 0 0 repeat;
}

/* Footer */
#footer {
	font-size: 12px;
	text-align: left;
}

#totop-scroller {
	display: block;
	position: absolute;
	top: 10px;
	right: 0;
	z-index: 1;
	width: 29px;
	height: 30px;
	background: url(../images/totop_scroller.png) 0 0 no-repeat;
	text-decoration: none;
}

#totop-scroller:hover { background-position: 0 -35px; }
ResponderCitar
Respondido : 08/02/2012 7:34 pm
Ivan
 Ivan
Estimable Member

donde puedo ver la configuración de "Logo", para ponerlas igual?

ResponderCitar
Respondido : 08/02/2012 7:41 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Ivan,

¿Tienes algún módulo publicado en la posición "logo"?

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 08/02/2012 9:19 pm
Ivan
 Ivan
Estimable Member

Solo el logo

ResponderCitar
Respondido : 08/02/2012 11:20 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Ivan,

Actualmente veo el logo (izquierda) y la imagen del soporte (derecha) a la misma altura ¿has coregido el problema?.

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 09/02/2012 12:59 am
Ivan
 Ivan
Estimable Member

lo he movido con el código que he puesto arriba pero aun así están descuadradas las imágenes; ahora está la del teléfono más arriba y es que modificando los pixel del margen de arriba podría cuadrarlo pero me gustaría que lo hiciese la página automáticamente igual que lo hace en el módulo "Logo" ya que no entiendo porqué no las cuadra automáticamente si son de la misma altura las dos imágenes. De hecho, si pones la página esa para ver la estructura de los módulos se ve que algo está mal porque no cuadran las posiciones de varias cosas y luego en la vista real aparecen de distinta manera.

También me gustaría saber donde puedo encontrar info acerca de como es un poco la estructura de joomla y como funciona todo; las capas, módulos, propiedades, etc... Gracias por adelantado.

ResponderCitar
Respondido : 09/02/2012 11:06 am

Cursos Gratuitos WordPress

Jordi Sala
 Jordi Sala
Miembro Admin

Hola Ivan,

Puedes cuadrar las imagenes, pero hay que jugar con ellas, y con las CSS, cambiar el margin-top:

#headerbar .module {
    background: url("../images/menubar.png") repeat scroll 0 0 transparent;
    float: right;
    margin-right: 0;
    margin-top: 12px;
}

Respecto a temas que señalas que estan mal, indicarte que todavia no se ha inventado la web en la cual poniendo imagenes del tamaño que deseemos y en la posición que queramos, se ajuste ella misma automáticamente. Hay que ajustarse a los tamaños definidos en las hojas de estilo de la plantilla, y si no se puede ajustar, pues hay que modificar las CSS.

Te serán de utilidad los tutoriales de https://www.webempresa.com/creacion-web-joomla/videotutoriales-joomla.html para conocer los conceptos de Joomla!.

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio

ResponderCitar
Respondido : 09/02/2012 3:19 pm
Ivan
 Ivan
Estimable Member

Disculpa, creo que no me he explicado bien. Sé que no hay nada que se haga solo, yo lo que quería decir es que no sé porque si tengo dos imagenes que tienen el mismo tamaño, no entiendo el motivo por el cual una de ellas se alinea de una manera distinta a la otra si no he tocado ninguno de los módulos. Muchas gracias.

ResponderCitar
Respondido : 09/02/2012 6:24 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Jordi Sala
 Jordi Sala
Miembro Admin

Hola Ivan,

Disculpa que creo que soy yo el que no se ha explicado correctamente.

Si la plantilla original es: http://www.yootheme.com/demo/themes/joomla/2011/downtown/
¿donde indica que si pones una imagen a la derecha de logotipo, la misma tenga que quedar alineada a la misma altura? a parte de que las imagenes que has puesto no tienen el mismo tamaño (en altura si, pero no en anchura). ¿Y si en esa posición ponemos un buscador, tambien tendría que quedar alineado con el logo, eso que tiene distintas dimensiones?

Son zonas distintas, y cada una esta "gobernada" por CSS distintas, por lo tanto se comportan de diferente manera.

Accediendo a tu sitio web, veo que modificando las CSS, ya se muestran alineadas las imagenes, por lo que entiendo que podemos cerrar esta consulta, ¿correcto?.

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio

ResponderCitar
Respondido : 10/02/2012 8:20 am
Ivan
 Ivan
Estimable Member

Muchas gracias Jordi, he conseguido cuadrarlas modificando el css pero, ¿donde podría ver el css que afecta al logo para luego aplicar el mismo a headerbar con la excepción de la alineación derecha?. La verdad es que creí que con que fuesen de igual algura (sin importar demasiado el ancho siempre que no fuese excesivo) no afectaría a la posición vertical de las mismas. Veo que de repende ahora me ocure lo mismo con el módulo de yoologin que no se porqué ahora también se desplaza más para abajo, sobre todo cuando cargo la web en una ventana de explorador relativamente estrecha; voy a intentar solucionarlo de la misma manera a ver que pasa 🙂

Solo tengo dos pequeñas consultas más, espero que me podáis ayudar con ellas (tampoco quiero hacerme pesado):

1 - La imágen del teléfono, aunque ahora está cuadrada en altura con la del logo, no sé que pasa que cuando mueves el ratón por cerca de ella una vez refrescada la página, se desplaza sola un poco a la izquierda. He estado viendo el código pero no encuentro el motivo de este raro comportamiento.

2 - Por otra parte, y esto ya no tiene mucho que ver con la colocación de las imágenes, en la sección tienda, al desplegar la opción buscar (colocando el ratón sobre ella) del menú principal, este menú se despliega por detrás de la barra donde tengo la ruta (justo debajo); como si la barra de la ruta estuviese en una capa mas adelante que la del menú. ¿podría de alguna manera arreglar esto?.

Muchas gracias.

ResponderCitar
Respondido : 10/02/2012 3:55 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Jordi Sala
 Jordi Sala
Miembro Admin

Hola Ivan,

Respecto a encontrar las CSS que afectan a determinadas posiciones te será de utilidad usar Firebug: https://www.webempresa.com/blog/usando-firebug-para-modificar-la-apariencia-de-una-plantilla-joomla.html

1 - La imágen del teléfono, aunque ahora está cuadrada en altura con la del logo, no sé que pasa que cuando mueves el ratón por cerca de ella una vez refrescada la página, se desplaza sola un poco a la izquierda. He estado viendo el código pero no encuentro el motivo de este raro comportamiento.

He navegado por el sitio web, y el comportamiento que me indicas no lo visualizó, ni navegando por los diferentes apartados del sitio web, ni refrescando ...

2 - Por otra parte, y esto ya no tiene mucho que ver con la colocación de las imágenes, en la sección tienda, al desplegar la opción buscar (colocando el ratón sobre ella) del menú principal, este menú se despliega por detrás de la barra donde tengo la ruta (justo debajo); como si la barra de la ruta estuviese en una capa mas adelante que la del menú. ¿podría de alguna manera arreglar esto?.

He navegado con Firefox y con IE 9, y no veo lo que indicas, adjunto captura de pantalla.

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio

ResponderCitar
Respondido : 10/02/2012 4:16 pm
Ivan
 Ivan
Estimable Member

Muchas gracias Jordi y Luis,veré de ir viendo todo con ese programa.

ResponderCitar
Respondido : 11/02/2012 11:27 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Por favor Iniciar Sesión o Registro