chenler19 Posted March 21, 2014 Share Posted March 21, 2014 Hola, He modificado varios parámetros para tener el header y el footer con width:100%, pero no se porque la columna central del index, donde tengo el slide y los productos destacados se me queda con margen a la izquierda y no consigo centrarlo. Para modificar el header y el footer al 100% del ancho del navegador toqué: grid-prestashop: .container_9 { margin: 0 auto; width: 100%; /* esto al 100% */ } En global: #header { z-index: 10; width: 100%; } #footer { width: 100%;} la web es www.zapateriaenanos.es Alguien tiene una solución?¿? Gracias. Link to comment Share on other sites More sharing options...
Feliz Garcia Posted March 21, 2014 Share Posted March 21, 2014 Yo lo que hice para tener la cabecera extendida fue esto: http://www.prestashop.com/forums/topic/290961-solved-how-to-create-full-width-top-menu Y para el footer, hice esto: http://mypresta.eu/en/art/basic-tutorials/how-to-create-full-width-footer-in-prestashop-1-5.html Link to comment Share on other sites More sharing options...
Linseoo Posted March 21, 2014 Share Posted March 21, 2014 el elemento que pones con margin:0 auto; no puede tener width:100%, ya que le estas diciendo que ocupe toda la pantalla por lo que el margin auto se convierte en 0, debes darle un valor o bien fijo o si es en porcentaje que sea inferior a 100. Link to comment Share on other sites More sharing options...
Feliz Garcia Posted March 21, 2014 Share Posted March 21, 2014 (edited) Se me olvido añadir: los enlaces que te he pasado, te los he pasado, porque tienes tambien tanto la cabecera como el footer tambien descuadrados. Edited March 21, 2014 by Feliz Garcia (see edit history) Link to comment Share on other sites More sharing options...
chenler19 Posted March 21, 2014 Author Share Posted March 21, 2014 Feliz, pero eso del header que me pones , estoy leyendo un poco con el medio ingles que tengo pero me parece que lo que hacen es es ensanchar la barra del menu solamente, no? Tu lo tienes en tu página hecho? me puedes decir tu web? lynxstyle si desactivo margin:0 auto no veo cambios, lo que quiero es tener el header y el footer, ambos con dos imagenes insertadas y que ocupen el 100% de la web. Estoy pensando que quizá dejo como estaba el header y el footer con las medidas de 980px, e inserto las imagenes en el id="index" class="index" , que parece ser que ahí si que tiene las medidas del ancho del navegador.. creo que quizá funcione Link to comment Share on other sites More sharing options...
chenler19 Posted March 21, 2014 Author Share Posted March 21, 2014 Feliz, te salen descuadrados? A mi me salen bien, ocupan el ancho del navegador tanto el header como el footer, pero me sale las columnas en el margen izquierdo. Link to comment Share on other sites More sharing options...
Linseoo Posted March 21, 2014 Share Posted March 21, 2014 bueno la explicación que te he dado ha sido generando un poco y parece que no me has entendido, a ver, el margin:0 auto; debe llevarlo el elemento que quieres centrar, así como el width de ese elemento debe tener un valor fijo. Debes ponerle a "columns" width:980px; y margin:0 auto; Luego el Grid_9 es lo que parece que te fuerza a la izquierda, quitalo del class de la plantilla y nos cuenta. Link to comment Share on other sites More sharing options...
Feliz Garcia Posted March 21, 2014 Share Posted March 21, 2014 Feliz, te salen descuadrados? A mi me salen bien, ocupan el ancho del navegador tanto el header como el footer, pero me sale las columnas en el margen izquierdo. Están totalmente descuadrados la cabezera y el footer, ademas de lo que comentas. Link to comment Share on other sites More sharing options...
Linseoo Posted March 21, 2014 Share Posted March 21, 2014 chenler19, perdona, estoy liado con el módulo de afiliados que no funciona ni a tiros y me he liado un poco al responderte. A ver, para que sea menos lioso, yo haría lo siguiente: Crea varios div envolviendo al header, columns y footer, por ejemplo: <div id="header_total"> <div id="header"></div> </div> <div id="columns_total"> <div id="columns"></div> </div> <div id="footer_total"> <div id="footer"></div> </div> header, columns y footer le pones en el css: margin:0 auto; width:980px; y a header_total, footer_total: width:100%; height: el que necesites background: el que quieras columns_total: width:100%; overflow:hidden. background: el que quieras. Espero que esto te sirva, así no tienes que tocar nada más. Link to comment Share on other sites More sharing options...
Feliz Garcia Posted March 21, 2014 Share Posted March 21, 2014 (edited) En los enlaces que te pase arriba: http://www.prestashop.com/forums/topic/316859-alguien-sabe-como-centrar-columns-en-la-pantalla/?do=findComment&comment=1603320 viene explicado (aunque sea en ingles que para eso esta el google traductor xD, yo lo uso mucho tambien) lo del footer y header, por eso te lo comente en mi primera respuesta, que mas o menos viene siendo lo que te comenta lynxstyle Edited March 21, 2014 by Feliz Garcia (see edit history) 1 Link to comment Share on other sites More sharing options...
chenler19 Posted March 21, 2014 Author Share Posted March 21, 2014 Hola, muchas gracias por las respuestas. vale. Creo que entendí más o menos la idea. Lo que he hecho es simplemente dejar las medidas que trae por defecto la plantilla default y en vez de agregar el background de imagen dentro del header (que tiene un ancho de 980px), insertarlo en body antes del id=page, que si que tiene las dimensiones del 100% del ancho. (esto en el archivo header.tpl) Así creo que se me queda la imagen de background ("toldoheader") con el ancho del 100%. Y despues eliminando el background del header y dandole a la clase "toldoheader" un z-index:10. A mi por lo menos se me ve bien, probaré con otras versiones de navegador a ver si también. Link to comment Share on other sites More sharing options...
Recommended Posts