Cambiar el orden natural de elementos

pzin · #1 (**permalink**) 14/07/2009, 16:46

Muy buenas,

necesito cambiar el orden de flujo natural de unos elementos.

Concretamente, tengo una estructura como ésta:

Código html:

Ver original<h1></h1>
<div></div>
<h1></h1>
<div></div>
<h1></h1>
<div></div>

Pero necesito que visualmente se vea así:

Código html:

Ver original<h1></h1><h1></h1><h1></h1>
<div></div>
<div></div>
<div></div>

Realmente solo tendría que cambiar los h1, por elementos en linea (display:inline, claro) pero sacarlos de entre las capas.

Los problemas que yo veo son, que no puedo usar position:absolute, que las capas tienen una altura diferente y además variable (por eso de poner un margen negativo a h1).

¿Alguna idea?

Gracias y un saludo.

alexk · #2 (**permalink**) 14/07/2009, 21:16

no entiendo bien lo que quieres... al mas visual?... porfa? ehehe... haz intentado "float:left"?
como que solo con ese codigo es dificil darse la idea o es problema mio? jeje chao y suerte!

kseso? · #3 (**permalink**) 15/07/2009, 06:24

no puedes tener más de 1 h1 por página.
Hecha esta anotación y descartando el float (pues con ella se tiene en cuenta los elementos adyacentes), creo que te queda "position" para los hnº, claro que tendrás que aplicar un identificador a cada hnº.

Un saludo

pzin · #4 (**permalink**) 16/07/2009, 16:03

Buenas de nuevo. Andaba de viaje dos días.

Bueno, lo de poner h1 era un ejemplo para no liar mucho.

Claro, lo suyo sería usar una posición relativa. Pero... Al tener una altura los div's diferentes, ¿no se desencajan? Según sidar no... Bueno, voy a probarlo a ver. Que me gusta liarme.

¡Merci! Ahora os cuento...

kseso? · #5 (**permalink**) 16/07/2009, 16:25

Relativa para los hnº no. Absoluta, para que salgan del flujo y los puedas colocar donde quieras.
Mira a ver si te he entendido (aunque no comprenda para qué quieres hacerlo).
En el html van intercalados los hnº con los div's uno a uno, y en pantalla se ven los hnº arriba alineados y los div's después uno debajo del otro:

Código html:

Ver original<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
*{margin:0;padding:0; outline:none; border:0; position: relative;}
.contenido, 
h1, h2, h3 {position:absolute; top:0; font-size:1em; color:#444; text-decoration:underline;}
h1 {left:25px;}
h2 {left:7em; top:-2px;}
h3{left:12.5em; top:-4px;}
.caja1, .caja2 { width:300px; padding:5px; text-align: justify;}
.caja1 {margin-top:25px}
.caja2 {margin-top:-25px}
</style>
</head>
<body>
<h1>Mi Web</h1>
<div class="caja1">
<p>Lorem ipsum dolor sit amet consectetuer ullamcorper gravida Aenean Phasellus lacus. Felis habitasse consequat semper eros quis congue pellentesque iaculis id sapien. Libero pede aliquam ligula nisl quis interdum dolor adipiscing Donec at. Dignissim nulla nibh magna tempus ut gravida fermentum Vestibulum libero in. Wisi vitae tellus amet lacinia eget senectus wisi a gravida dolor. Porta.</p>
</div>
<h2>Página 1</h2>
<div class="caja2">
<p>Lorem ipsum dolor sit amet consectetuer ullamcorper gravida Aenean Phasellus lacus. Felis habitasse consequat semper eros quis congue pellentesque iaculis id sapien.</p>
</div>
<h3>Página 2</h3>
<div class="caja2">
<p>Lorem ipsum dolor sit amet consectetuer ullamcorper gravida Aenean Phasellus lacus.</p>
</div>
</body>
</html>

Un saludo

pzin · #6 (**permalink**) 16/07/2009, 16:26

Pues no hay manera...

Lo que debería de tener, es algo que posicione de forma relativamente absoluta.

El asunto, por si no quedó claro -aunque creo que si- sería ésto:

Lo único a tener en cuenta, es que DIV tienen una altura diferentes entre si, además de variable.

pzin · #7 (**permalink**) 16/07/2009, 16:33

Gracias por el código kseso?. Se agradece mucho.

Tendiéndolo así, en una página es casi lo que quiero -casi porque las capas debieran de quedar "unidadas", es decir, que no tiene que parece que se ha sacado los hx de ahí y quedando el hueCo. (que puse huevo

El problema es el posicionarlo de forma absoluta... O tal vez no pensándolo ahora.

Tal vez la solución pase por darle el margen negativo a las capas, justamente la altura de los hx para hacer desaparecer el hueco.

Sigo probando a ver qué pasa.

kseso? · #8 (**permalink**) 16/07/2009, 16:47

Sólo es cuestión de unos pequeños retoques al código anterior.
Mira a ver ahora.

pzin · #9 (**permalink**) 16/07/2009, 16:56

Si, eso estaba viendo... Le había quitado los párrafos, que el hueco venía de ahí.

Creo que me servirá, aunque las pasaré canutas para adaptarlo ya que es una página con diseño elástico. Vaya un berengenal.

Muchas gracias kseso?.

Estás hecho un juguetón.

pzin · #10 (**permalink**) 16/07/2009, 17:02

Por cierto, lo quería para adaptarlo a ésto.