[Resuelto] Ayuda adaptar web a distintos navegadores

[sowi12]

Hola buenas, alguien me encargó una web. El hombre no quería gran cosa y tampoco es algo esencial para él, me propuso de hacerla por tenerla ahí.... así que me sugirió que se la hiciera para ir cogiendo práctica, porque tengo muy poca.

Así que se la terminé hace poco, y está en funcionamiento. Lo que no consigo es que la web se vea en todos los navegadores igual y en los móviles creo que tiene el mismo problema, porque al acceder desde el mío se descentra el menú -.-

Exáctamente lo que se descentra es el menú en Explorer y Firefox (aquí a demás, en el Footer se come algo de texto) y en los móviles.

A demás añadí LightBox para las galerías. En el ordenador se ejecutaba bien, pero lo colgué en el servidor y los botones no se visualizan -.-

Si podéis echarle un vistazo y demás, y sugerir cosas para solucionar los errores os lo agradecería muchísimo:

www.construccionesgordillon.es

Saludos y gracias de antemano (No me linchéis si he puesto alguna burrada, please. Si las he hecho simplemente decidme cuáles son, así aprendo más jeje)

[-Mc_Raaka-]

Yo hasta ahora no me he topado con susodicho problema, mis webs se ven bien en todos los dispositivos pero quizas porque son muy simples xD.

Sin dar rodeos creo que estaria bien que le hecharas un vistazo a Bootstrap, no creo que te lleve mucho tiempo aprender a trabajar con ese framework y te servira para proyectos mas adelante, basicamente se encarga de facilitar el diseño responsable.

http://getbootstrap.com/

[sowi12]

ok gracias, ahora le echaré un vistazo a ver si lo soluciono. Seguid dando sugerencias, no seáis tímidos XDDD.

[sowi12]

Yo hasta ahora no me he topado con susodicho problema, mis webs se ven bien en todos los dispositivos pero quizas porque son muy simples xD.

Sin dar rodeos creo que estaria bien que le hecharas un vistazo a Bootstrap, no creo que te lleve mucho tiempo aprender a trabajar con ese framework y te servira para proyectos mas adelante, basicamente se encarga de facilitar el diseño responsable.

http://getbootstrap.com/

pero yo tengo el servidor en hostinger, esto me sirve allí, porque viendo documentaciones me suena a tener que usar linux...

[-Mc_Raaka-]

pero yo tengo el servidor en hostinger, esto me sirve allí, porque viendo documentaciones me suena a tener que usar linux...

Has usado alguna vez antes un framework?

No necesitas de linux para nada, son solo unos cuantos .css y.js tu solo debés cargarlos en tu index.html como cualquier css y js y ya puedes usarlos para tu web, independientemente del host.

En la propia documentación hay un ejemplo de un html con todos los archivos basicos a llamar, tambien puedes ojear algun tutorial en español. Te pasaría algun link pero desde el movil es incómodo.

[karmany]

Un diseño sencillo, pero a mi me gusta.
Independientemente de que hagas la web directamente en HTML, veo que el código está bien estructurado, con <div>, el menú en una lista... bien.

Respecto al diseño, si no quieres hacer uso de CMS o Frameworks like Bootstrap, pues hay que trabajar con lo que se llama "Media Queries". De este modo, podrás mostrar tu web dependiendo de las dimensiones de tu navegador o dispositivo.

Por ejemplo, ¿sabes por qué no se ve bien tu menú en Firefox y sí se ve bien en Chrome?
Es debido a la altura de los enlaces (<a>). Cada navegador hace sus cálculos con márgenes, paddings, tamaño de fuentes etc...
Bloquea la altura de los enlaces, con 15 píxeles. Así:

Código (css) [Seleccionar] Expandir

ul.listas li a {
   color: #fff;
   display: inline-block;
   height: 15px;
   padding: 1.7%;
   transition: all 1s ease 0s;
}

Ese menú, en un smartphone, debería ser un botón menú o si no quieres complicarte la vida, céntralo en pantalla con todos los botones a la vista.

POr cierto, a mi no me gusta el uso de Flash. Es una tecnología que no hace mucho era la puerta de entrada de infecciones y muchos dispositivos ni siquiera lo cargan. Yo no lo usaría.

Te queda mucho trabajo pero yo seguiré echando un vistazo a la web, diseño sencillo pero original.

[sowi12]

Has usado alguna vez antes un framework?

No necesitas de linux para nada, son solo unos cuantos .css y.js tu solo debés cargarlos en tu index.html como cualquier css y js y ya puedes usarlos para tu web, independientemente del host.

En la propia documentación hay un ejemplo de un html con todos los archivos basicos a llamar, tambien puedes ojear algun tutorial en español. Te pasaría algun link pero desde el movil es incómodo.

La verdad es que no, aunque en el ciclo que estoy haciendo nos toca darlo en breves juju.
Vale gracias, he intentado mirar la documentacion pero entre unas cosas y otras no he tenido tiempo 

A ver si puedo probar y tengp suerte

[sowi12]

Un diseño sencillo, pero a mi me gusta.
Independientemente de que hagas la web directamente en HTML, veo que el código está bien estructurado, con <div>, el menú en una lista... bien.

Respecto al diseño, si no quieres hacer uso de CMS o Frameworks like Bootstrap, pues hay que trabajar con lo que se llama "Media Queries". De este modo, podrás mostrar tu web dependiendo de las dimensiones de tu navegador o dispositivo.

Por ejemplo, ¿sabes por qué no se ve bien tu menú en Firefox y sí se ve bien en Chrome?
Es debido a la altura de los enlaces (<a>). Cada navegador hace sus cálculos con márgenes, paddings, tamaño de fuentes etc...
Bloquea la altura de los enlaces, con 15 píxeles. Así:

Código (css) [Seleccionar] Expandir

ul.listas li a {
   color: #fff;
   display: inline-block;
   height: 15px;
   padding: 1.7%;
   transition: all 1s ease 0s;
}

Ese menú, en un smartphone, debería ser un botón menú o si no quieres complicarte la vida, céntralo en pantalla con todos los botones a la vista.

POr cierto, a mi no me gusta el uso de Flash. Es una tecnología que no hace mucho era la puerta de entrada de infecciones y muchos dispositivos ni siquiera lo cargan. Yo no lo usaría.

Te queda mucho trabajo pero yo seguiré echando un vistazo a la web, diseño sencillo pero original.

Gracias, en lo del flash, el dueño tenía el archivo de una web anterior y por ahora no se me ocurre otra manera de hacer algo parecido.

Lo de media query, me estaba planteando usarlo pero tengo conocimientos muuy basicos y tengo que revisar a fondo el tema.

Así que trabajito tengo de sobra jajaja.


Muchas gracias por los consejos de verdad

[sowi12]

Un diseño sencillo, pero a mi me gusta.
Independientemente de que hagas la web directamente en HTML, veo que el código está bien estructurado, con <div>, el menú en una lista... bien.

Respecto al diseño, si no quieres hacer uso de CMS o Frameworks like Bootstrap, pues hay que trabajar con lo que se llama "Media Queries". De este modo, podrás mostrar tu web dependiendo de las dimensiones de tu navegador o dispositivo.

Por ejemplo, ¿sabes por qué no se ve bien tu menú en Firefox y sí se ve bien en Chrome?
Es debido a la altura de los enlaces (<a>). Cada navegador hace sus cálculos con márgenes, paddings, tamaño de fuentes etc...
Bloquea la altura de los enlaces, con 15 píxeles. Así:

Código (css) [Seleccionar] Expandir

ul.listas li a {
   color: #fff;
   display: inline-block;
   height: 15px;
   padding: 1.7%;
   transition: all 1s ease 0s;
}

Ese menú, en un smartphone, debería ser un botón menú o si no quieres complicarte la vida, céntralo en pantalla con todos los botones a la vista.

POr cierto, a mi no me gusta el uso de Flash. Es una tecnología que no hace mucho era la puerta de entrada de infecciones y muchos dispositivos ni siquiera lo cargan. Yo no lo usaría.

Te queda mucho trabajo pero yo seguiré echando un vistazo a la web, diseño sencillo pero original.

Ahora estaba cambiando cosas del código y lo de height: 15px; " lo quité del css, lo que pasa es que antes lo tenía todo en el HTML y después lo pasé a CSS. Lo del HTML lo comenté y hasta de ahora no me acordé de quitarlo  ... Pero del diseño tira de la hoja de estilos así que lo de 15px no debería de cogerlo