Jump to content

Plantilla descuadrada según resolución

maesal

By maesal
in Discusión general

 Share

Recommended Posts

maesal Newbie

maesal

Posted
Posted (edited)

Hola,

Tengo la página descuadrada, es: www.maesaldetailer.es

 

post-340344-0-74655100-1336734352_thumb.jpg

 

He mirado el global.css pero no sé qué valor es el que he de cambiar de ancho para que no se descuadre con ninguna resolución. ¿Podéis ayudarme?. Uso Prestashop 1.4.7.2.

Gracias.

Un saludo.

Edited by maesal (see edit history)
Link to comment
Share on other sites
nonocampa Newbie

nonocampa

Posted
Posted

Aunque no son resoluciones habituales.

una solucion es crear una tabla con valores 100% y tres celdas. La de los extremos con un ancho fijo de pocos px y la central al 100% de esta forma se te acopla a cualquier pantalla

<table border="1"><tr>
<td size="40">contenido<td>
<td size="100%"><td>
<td size="40"><td/>
<tr>
</table>

Link to comment
Share on other sites
nonocampa Newbie

nonocampa

Posted
Posted

otra forma es con javascript

 

Empezemos:

 

1. Crear una carpeta principal donde estará alojado el sitio web Ej. "miweb"

 

2. Dentro de miweb crear una carpeta llamada "imágenes" donde estarán las imágines, otra llamada "sonidos" donde estarán los sonidos, "videos"y así sucesivamente según los recurso a utilizar. A continuación se crea una carpeta llamada es800600. Esta última carpeta contendrá sólo los archivos htm, php , cgi del sitio web que serán creados con una resolución de monitor de 800 x 600 píxeles.

 

3. Se crean dos carpetas llamadas es640480 y es1024768 dentro de "miweb"

 

4. Una vez que se tiene desarrollado el sitio web optimizado a 800x600 y se tiene ya la versión definitiva, se copia el contenido de la carpeta es800600 y se pega dentro de es640480 y es1024768.

 

5. Se cambia la configuración del monitor a 640x480 y se abren los archivos de la carpeta es64048, sólo habrá que volver a editarlos, principalmente es un trabajo de ajuste de tablas. NO HAY QUE RENOMBRAR LOS ARCHIVOS NI CAMBIAR LOS ENLACES.

 

6. Igualmente, se cambian la configuración del monitor a 1024x768 y se abren los archivos html que corresponden, se editan y se guardan.

 

7. Si se desea crear una versión en inglés, sólo habrá que copiar las tres carpetas que empiezan por las letras "es", renombrar el comienzo por "en" y sustituir el texto por la versión inglesa, pero las imágenes no habrá que volver a subirlas, ni cambiar los enlaces ni los nombres de los archivos.

 

8. Crear el archivo principal de la página que está dentro de "miweb" y fuera de las anteriores carpetas. Dicho archivo principal, index.html debe contener el siguiente código en el body.

 

 

<script language="JavaScript">

/*

Diferentes versiones según la resolución

*/

//para resolucion 800x600

if (screen.width==800||screen.height==600)

window.location.replace("es800600/index.html")

 

// para resolucion 640x480

else if (screen.width==640||screen.height==480)

window.location.replace("es640480/index.html")

 

//para resolucion 1024x768

else if (screen.width==1024||screen.height==768)

window.location.replace("es1240768/index.html")

 

//para otras resoluciones

else

window.location.replace("es1240768/index.html ")

</script>

[/indent]

 

9. Ahora automáticamente el archivo principal index.html detectará la configuración del monitor del cliente y se cargará la versión correspondiente en función de la resolución detectada.

Link to comment
Share on other sites
nonocampa Newbie

nonocampa

Posted
Posted

De todas formas se body es de 980 y a las resoluciones q dice no deberia tener problemas, puede q sea la colocacion de algun modulo en una columna q no corresponda, como por ejemplo ser un tema de dos columnas y estar usando una tercera.

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

De todas formas se body es de 980 y a las resoluciones q dice no deberia tener problemas, puede q sea la colocacion de algun modulo en una columna q no corresponda, como por ejemplo ser un tema de dos columnas y estar usando una tercera.

Si, efectivamente, en principio el problema proviene de otro sitio.

 

Solo te pasa con el modulo de productos destacados?

Link to comment
Share on other sites
maesal Newbie

maesal

Posted
  • Author
Posted

Vaya velocidad de respuestas !! Gracias, luego lo miro todo bien.

La captura es con Firefox. Con IE y con Chrome no se me descuadra así pero, en vez de salirme 8 nuevos productos, sólo salen 7.

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Busca este fichero:

 

/themes/primeshop/css/global.css

 

Busca esto:

#center_column .products_block ul li:nth-child(4n+1) {
background: white;
border-top: none;
border-left: solid 1px #CCC;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
float: left;
margin-top: 0;
padding: 0 0 1px;
width: 190px;
}

 

Y déjalo así:

 

#center_column .products_block ul li:nth-child(4n+1) {
background: white;
border-top: none;
border-left: solid 1px #CCC;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
float: left;
margin-top: 0;
padding: 0 0 1px;
width: 189px;
}

 

(Prueba jugar con ese width)

  • Like 1
Link to comment
Share on other sites
maesal Newbie

maesal

Posted
  • Author
Posted

En Posiciones me dice que no tengo ningún módulo en la columna derecha.

En Extra actions on the product page (right column) aparece La fidelidad de los clientes y las recompensas v1.8, no sé si influye.

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

En Posiciones me dice que no tengo ningún módulo en la columna derecha.

En Extra actions on the product page (right column) aparece La fidelidad de los clientes y las recompensas v1.8, no sé si influye.

Mira el mensaje anterior. D

Link to comment
Share on other sites
maesal Newbie

maesal

Posted
  • Author
Posted

Busca este fichero:

 

/themes/primeshop/css/global.css

 

Busca esto:

#center_column .products_block ul li:nth-child(4n+1) {
background: white;
border-top: none;
border-left: solid 1px #CCC;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
float: left;
margin-top: 0;
padding: 0 0 1px;
width: 190px;
}

 

Y déjalo así:

 

#center_column .products_block ul li:nth-child(4n+1) {
background: white;
border-top: none;
border-left: solid 1px #CCC;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
float: left;
margin-top: 0;
padding: 0 0 1px;
width: 189px;
}

 

(Prueba jugar con ese width)

 

Ahora ya obtengo lo mismo con los 3 navegadores:

 

post-340344-0-75006300-1336738136_thumb.jpg

 

Gracias.

Pero me salen 4 productos en la primera fila y 3 productos en la segunda. El módulo es "New products on the homepage" y lo tengo configurado a 32 pero sólo se muestran 7. ¿Qué podría ser?.

Abusando, ¿se podría hacer más ancha la plantilla para poner 5 columnas o es muy complicado?. Supongo que se tendría que hacer más ancho también el header y footer, ¿no?.

Gracias de nuevo.

New Products on the homepage

Link to comment
Share on other sites
maesal Newbie

maesal

Posted
  • Author
Posted

otra forma es con javascript

 

Empezemos:

 

1. Crear una carpeta principal donde estará alojado el sitio web Ej. "miweb"

 

2. Dentro de miweb crear una carpeta llamada "imágenes" donde estarán las imágines, otra llamada "sonidos" donde estarán los sonidos, "videos"y así sucesivamente según los recurso a utilizar. A continuación se crea una carpeta llamada es800600. Esta última carpeta contendrá sólo los archivos htm, php , cgi del sitio web que serán creados con una resolución de monitor de 800 x 600 píxeles.

 

3. Se crean dos carpetas llamadas es640480 y es1024768 dentro de "miweb"

 

4. Una vez que se tiene desarrollado el sitio web optimizado a 800x600 y se tiene ya la versión definitiva, se copia el contenido de la carpeta es800600 y se pega dentro de es640480 y es1024768.

 

5. Se cambia la configuración del monitor a 640x480 y se abren los archivos de la carpeta es64048, sólo habrá que volver a editarlos, principalmente es un trabajo de ajuste de tablas. NO HAY QUE RENOMBRAR LOS ARCHIVOS NI CAMBIAR LOS ENLACES.

 

6. Igualmente, se cambian la configuración del monitor a 1024x768 y se abren los archivos html que corresponden, se editan y se guardan.

 

7. Si se desea crear una versión en inglés, sólo habrá que copiar las tres carpetas que empiezan por las letras "es", renombrar el comienzo por "en" y sustituir el texto por la versión inglesa, pero las imágenes no habrá que volver a subirlas, ni cambiar los enlaces ni los nombres de los archivos.

 

8. Crear el archivo principal de la página que está dentro de "miweb" y fuera de las anteriores carpetas. Dicho archivo principal, index.html debe contener el siguiente código en el body.

 

 

<script language="JavaScript">

/*

Diferentes versiones según la resolución

*/

//para resolucion 800x600

if (screen.width==800||screen.height==600)

window.location.replace("es800600/index.html")

 

// para resolucion 640x480

else if (screen.width==640||screen.height==480)

window.location.replace("es640480/index.html")

 

//para resolucion 1024x768

else if (screen.width==1024||screen.height==768)

window.location.replace("es1240768/index.html")

 

//para otras resoluciones

else

window.location.replace("es1240768/index.html ")

</script>

[/indent]

 

9. Ahora automáticamente el archivo principal index.html detectará la configuración del monitor del cliente y se cargará la versión correspondiente en función de la resolución detectada.

 

Uf, esto se me escapa para mis conocimientos creo yo... a ver si me habilito una página de pruebas y trasteo en ella por si las moscas.

Gracias por la gran explicación !!

Link to comment
Share on other sites
nonocampa Newbie

nonocampa

Posted
Posted

Ahora ya obtengo lo mismo con los 3 navegadores:

 

post-340344-0-75006300-1336738136_thumb.jpg

 

Gracias.

Pero me salen 4 productos en la primera fila y 3 productos en la segunda. El módulo es "New products on the homepage" y lo tengo configurado a 32 pero sólo se muestran 7. ¿Qué podría ser?.

Abusando, ¿se podría hacer más ancha la plantilla para poner 5 columnas o es muy complicado?. Supongo que se tendría que hacer más ancho también el header y footer, ¿no?.

Gracias de nuevo.

New Products on the homepage

o cambia el tamaño de las fotos a mas pq mas cantidad

Link to comment
Share on other sites
maesal Newbie

maesal

Posted
  • Author
Posted

o cambia el tamaño de las fotos a mas pq mas cantidad

 

Estaba en 190x190. He probado en 200x200 y casi se salen. Ahora están en 180x180 y parece que se vean mejor, pero siguen sin salir las que me faltan. Todo es mirar con el Firebug qué puede fallar pero no me da para tanto, soy muy novato.

Link to comment
Share on other sites
maesal Newbie

maesal

Posted
  • Author
Posted

Finalmente me di cuenta que sólo tenía 7 productos nuevos, así que entre cambiar los días en que un producto se considera nuevo y el ancho, ya tengo la página de inicio como quería.

Gracias por la ayuda !!

Un saludo.

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Finalmente me di cuenta que sólo tenía 7 productos nuevos, así que entre cambiar los días en que un producto se considera nuevo y el ancho, ya tengo la página de inicio como quería.

Gracias por la ayuda !!

Un saludo.

Hola!

Si das el tema como solucionado, edita el titulo del tema y añade la palabra solucionado al titulo, esto ayudara a mantener una mayor organización en el foro.

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...