paginas - ¿CSS puede anular realmente el orden de los elementos HTML en una página?

hojas de estilo css (8)

¡Buen punto sobre el encabezado siempre siendo el primero y el pie de página el último! Pero es posible que desee mover mi publicidad DIV desde la parte superior, hacia la derecha.

La otra cosa de la que me he enterado es poner primero el contenido DIV, por lo que Google le presta más atención (las palabras clave relevantes que se encuentran en la parte superior de la página tienen una puntuación más alta) ... ¿o es eso un mito? Hacer eso requeriría el tipo de truco de CSS sobre el que estoy preguntando también.

Si tiene varias div en una página, puede usar CSS para dimensionarlas, hacerlas flotar y moverlas un poco ... pero no puedo ver una manera de pasar el hecho de que la primera div aparecerá cerca de la parte superior. de la página y el último div estará cerca de la parte inferior! No puedo anular completamente el orden de los elementos ya que provienen del código fuente HTML, ¿o sí?

Me debe estar perdiendo algo porque la gente dice "podemos cambiar el aspecto de todo el sitio web simplemente editando un archivo CSS", pero eso dependerá de que sigas queriendo los div en el mismo orden.

(PD. Estoy seguro de que nadie usa position:absolute en cada elemento de una página).

CSS puede sacar elementos del flujo normal y colocarlos en cualquier lugar, de la manera que desee. Pero no puede crear un nuevo flujo .

Con esto quiero decir que puede colocar el último elemento del documento html al comienzo / parte superior de la página / ventana, y puede colocar el primer elemento del documento html al final / parte inferior de la página / ventana. Pero cuando haces esto no puedes posicionar estos elementos uno con respecto al otro; debe saber por sí mismo hasta qué punto del final de la página será el primer elemento del documento html que se colocará correctamente. Si ese contenido es dinámico (es decir, desde una base de datos o CMS), esto puede estar lejos de ser trivial.

Con Flotante, y con posición absoluta, puedes utilizar magia de posicionamiento bastante buena para cambiar parte del orden de la página.

Por ejemplo, con , si el marcado se configuró correctamente, el título y el contenido del cuerpo principal podrían ser las dos primeras cosas en el marcado, y luego la navegación / búsqueda, y finalmente la barra lateral de la derecha. Esto se haría teniendo un contenedor de contenido con un margen superior lo suficientemente grande como para contener la navegación y un margen derecho lo suficientemente grande como para contener las barras laterales. Entonces ambos podrían estar absolutamente posicionados en su lugar. El marcado podría verse así:

<h1> </h1> <div id="content"> <h2> Can Css truly blah blah? </h2> ... </div> <div id="nav"> <ul class="main"><li>quiestions</li> ... </ul> .... </div> <div id="side"> <div class="box"> <h3> Sponsored By </h3> <h4> Lew Zelands fish market </h4> .... </div> </div>

Y al CSS le gusta

h1 { position: absolute; top: 0; left: 0; } #content { margin-top: 100px; margin-right: 250px; } #nav { position: absolute; top: 0; left: 300px; } #side { position: absolute; right: 0; top: 100px; }

Lo importante aquí es que el marcado tiene que hacerse con este tipo de magia de posicionamiento en mente.

Cambiar cosas para que la barra de navegación esté a la izquierda y la barra lateral debajo del navegador sea demasiado difícil.

Creo que el factor más importante es colocar los elementos html de una manera que tenga sentido semánticamente, y con suerte, su diseño en CSS no tendrá que hacer demasiado trabajo. Por ejemplo, el encabezado de su sitio probablemente sea el primer elemento de la página, seguido de navegación común, luego subnavegación, contenido y pie de página (lista incompleta).

Probablemente alrededor del 90-95% de los diseños con los que querrá trabajar deberían ser relativamente triviales para manipular ese marcado en algo parecido a lo que busca. el otro 5-10% seguirá siendo posible, con un poco más de esfuerzo, pero la pregunta que debe hacerse es "¿Con qué frecuencia deseo que el encabezado de mi sitio se ubique en la esquina inferior derecha de la página?"

Siempre he descubierto que el diseño de un sitio no es demasiado difícil de manipular después del hecho si desea cambiar drásticamente la apariencia, al menos en comparación con una recodificación inicial.

</ 2c>

Es posible que desee consultar CSS Zen Garden para obtener excelentes ejemplos de cómo hacer lo que desea. Un montón de diseños de muestra a través de los enlaces a la derecha para ver las diversas formas de mover todo usando estrictamente CSS.

Hay un par de formas de hacerlo hoy. El primero funciona en más navegadores pero es más limitado:

El uso de los valores de visualización CSS de table-caption , table-row y table-cell permite el ordenamiento vertical de como máximo tres elementos controlados exclusivamente con CSS.
Esto es mucho más reciente y solo funcionará en todos los navegadores más recientes (sí, fallará en IE9): uso de las propiedades CSS de flexbox.

Puede ver ejemplos en vivo y leer más sobre estas técnicas en la página de patrones " esto es receptivo ". Los dos de los que hablo están en la sección titulada "Cambio de orden de origen"

No necesitas posición: absoluto en cada elemento para hacer lo que quieres.

Simplemente utilícelo en algunos elementos clave y luego puede colocarlos donde quiera, moviendo todos los elementos contenidos dentro de ellos junto con el elemento raíz de la sección.

Puede posicionar cuadros individuales completamente independientes del orden de origen con la posición: absoluta. De modo que puede mover el encabezado al pie de la página y el pie de página a la cima usando CSS.

Sin embargo, tenga en cuenta que esto es genéricamente malo para la accesibilidad: debe tener el orden del contenido en la fuente más o menos en el mismo orden en que lo presentaría para el lector. La razón es que un lector de pantalla o dispositivo similar presentará el contenido en el orden en que se define en la fuente en lugar del orden visual definido por su CSS.