¿Qué técnica se debe usar para mantener una página igual aunque cambie su tamaño?

[BramSt]

Supongo que será una pregunta muy recurrente, pero el caso es que no consigo aclararme del todo ni usando la búsqueda del propio foro ni mirando por internet.

Estoy jugueteando con una web propia para ir aprendiendo. Sé lo básico de HTML y CSS (acabo de hacer 1 de DAW), y el problema que siempre hemos tenido y que me irrita mucho es que, si hago una web que esté bien hecha a pantalla completa, en cuanto activo, por ejemplo, el menú de marcadores lateral (suelo usar Firefox y Chrome para probar), pues los divs se descuadran bastante. No mantiene las proporciones.

Yo he estado usando posicionamientos relativos, absolutos... sin conseguir lo que quiero. También he leído acerca del Responsive Design un poco, e imagino que antes que todo eso, se usaban las tablas...

Lo que yo quiero no es que me solucioneis el problema (por eso no pongo códigos de momento), sino que me digáis al menos qué debería emplear para hacerlo: tablas, responsive, float... o el qué.

Es un tema que siempre me ha liado mucho.

Perdón por mi ignorancia y muchas gracias por adelantado.

[Rafael]

No uses:

Posición absoluta. El retrógado concepto de capas en algunas versiones de DW.

Tablas. Esto es prehistórico.

Usa

Porcentajes.

Media queries.

En general considera que tu diseño no sea "tieso", sino que tenga ciertos rangos donde se ve bien.

Html limpio. Esto te lleva además a usar un CSS más robusto. UN ejemplo es que puedes definir muchas cosas llamándolas desde el padre.

Código CSS:

div.Especial {bla bla}
 
div.Especial > p {bla bla}
 

De esta manera no tienes que atascar cada p con un class.

[Rafael]

Ojo con esto:

¿Qué técnica se debe usar para mantener una página igual aunque cambie su tamaño?

La cosa es que no se queda IGUAL, el concepto correcto es que se AJUSTE, que no es lo mismo.

[BramSt]

Muchísimas gracias, Rafael. Tus consejos son muy válidos.

El símbolo > aún ni le hemos visto, aunque yo aprendí por mi cuenta que era algo así como "hijo de", creo. Lo volveré a mirar.

Por otro lado, veo que efectivamente, si a este mismo foro le meto la barra de marcadores, no se queda "igual", sino que "se ajusta".

Esto es muy interesante ya que veo que partía de los conceptos equivocados.

Ajustarse es, entonces, que se vea bien en ciertos rangos? Y ese ajuste se hace con media queries, no es así?

Otra pequeña pregunta, a qué te refieres con HTML "limpio"? A definir el CSS en un archivo aparte y linkearlo después? Así es como lo hago, y lo que tengo pensado hacer cuando entre con Javascript :)

Muchisimas gracias Rafael.

[Rafael]

Ajustar es que se vea bien en cierto rango. Hay ciertos puntos donde de plano ya no cabe y hay que "rearmar", por ejemplo en un celular nunca vas a ver varias columnas, por lo que para anchos delgados usas una mediaquery que te quite las columnas y veas sólo una, por ejemplo.

Lo de limpio es no saturar de class por aquí, y por allá.

Mira mi ejemplo.

Te pongo otro ejemplo

Un menú puede ser así

Código CSS:

<nav>
<ul>
<li><a></li>
<li><a></li>
<li><a></li>
</ul>
</nav>
 

Su estilo sin ningún class siquiera puede ser:

Código CSS:

nav>ul>li>a {fuente, colores, bloque, etc.}
 

Hay mucha gente que hace esto:

Código CSS:

<nav>
<ul class="MenuSuperior">
<li><a class="botonmenuprincipal"></li>
<li><a class="botonmenuprincipal"></li>
<li><a class="botonmenuprincipal"></li>
</ul>
</nav>
 

Por supuesto si lo necesitas, lo pones, pero nota la diferencia.

[BramSt]

Muchas gracias por tu explicación, Rafael.

¿Hay alguna diferencia entonces entre poner?

Código CSS:

nav>ul>li>a {fuente, colores, bloque, etc.}
 

Y lo que yo creo recordar que suelo hacer:

Código CSS:

nav ul li a
 

Es que aún no hemos visto el >, por eso pregunto.

[Rafael]

Hay varios muuuuuy útiles, pero hay que hacer la tarea https://www.google.com.mx/search?q=css+selectors

La diferencia entre estos dos es la especificidad.

nav ul es suficiente que ul sea descendiente. No importa si es nieto o tatara-tatara nieto.

nav > ul debe de ser hijo, nada más.

[BramSt]

Muchas gracias por tu respuesta y opr el enlace Rafael, me lo estudiaré poca poco, mientras a la vez entro en el maravilloso mundo de los selectores

¿Sabes por lo que me estaba dando también tantos problemas la web de prueba? Porque ya estoy viendo que el centrado vertical da muuuuuuchos quebraderos de cabeza. Aunque parece que tiene solución con Javascript, así que a ver si cuando profundice en ese lenguaje sale una solución mejor que andar con display table, márgenes negativos y similares.

[Rafael]

Nop. No uses JavaScript.

Googlea un poco. Esta página tiene varias alternativas con CSS: https://css-tricks.com/centering-css-complete-guide/

[BramSt]

Iniciado por Rafael

Nop. No uses JavaScript.

Googlea un poco. Esta página tiene varias alternativas con CSS: https://css-tricks.com/centering-css-complete-guide/

Gracias Rafael.

De momento he usado el metodo de display:table y otro que me ha resultado más sencillo de comprender: el de usar posiciones absolutas y margenes negativos. Pero he recordado que tú me has recomendado no usar posicionamiento absoluto. ¿A qué se debe? ¿Puede ser porque si luego intentas añadir elementos a la web, el posicionamiento absoluto puede provocar problemas al estar fuera del flujo? No sé, en ese caso, los float también darían problemas...

Me gustaría saber qué opinas.

Un saludo.

[Rafael]

Posicionamiento absoluto en una pantalla full HD:

{position: absolute; left: 1000px;}

El mismo posicionamiento en un móvil

{WTF! on ta mi elemento?} Probablemente estará en el teléfono de la persona a mi lado...

[Rafael]

Los float es una manera antigua de poner cosas. Déjalo para lo que es, una foto rodeada de texto.

Las maneras más adecuadas son inline-block y flex-box. Te dejo tarea.

Acá está la historia de cómo rodrypaladin http://www.forosdelweb.com/f53/no-cu...width-1152510/ se convirtió en devoto del flexbox: http://www.forosdelweb.com/f53/centr...1/#post4797025

[BramSt]

Iniciado por Rafael

Posicionamiento absoluto en una pantalla full HD:

{position: absolute; left: 1000px;}

El mismo posicionamiento en un móvil

{WTF! on ta mi elemento?} Probablemente estará en el teléfono de la persona a mi lado...

Vale, buscaré otros métodos entonces, y si no de mientras a tirar de responsive supongo XD

[BramSt]

Iniciado por Rafael

Los float es una manera antigua de poner cosas. Déjalo para lo que es, una foto rodeada de texto.

Las maneras más adecuadas son inline-block y flex-box. Te dejo tarea.

Acá está la historia de cómo rodrypaladin http://www.forosdelweb.com/f53/no-cu...width-1152510/ se convirtió en devoto del flexbox: http://www.forosdelweb.com/f53/centr...1/#post4797025

Pues mira mejor, porque odio el float XD.

Había oido hablar ligeramente del flexbox.

Mola, tú dame tarea que lo que yo quiero es leer, leer y leer para enterarme mejor. Esa inversión de tiempo ahora espero que se traduzca en un menor gasto de tiempo y un mejor hacer las cosas a la hora de trabajar delante del ordenador, codificar, posicionar... etc :)

[MMG19941107]

Que tal, con respecto a tu problema hay diversas soluciones, podrías implementar los media Queries o bien, para poder facilitarte las cosas, te recomendaría que indagaras un poco de bootstrap, que no es otra cosa mas que un framework de front, el cual te permite crear vistas mas eficientes, y con ello crearlas con algo llamado responsabidad, el cual permite que conforme se ballan reduciendo tus vistas, el contenido de estas se balla acomodando de forma automatica, para ello utiliza una estructura simple, un ejemplo de esta estructura es.

<div class="container" >
<div class="row">
<!-- dentro de esto metes diferentes div con las clases col-lg col-md entre otras y dentro meteras tus contenidos y listo-->
</div>
</div>