Foros del Web » Creando para Internet » CSS »

Cambiar el orden natural de elementos

Estas en el tema de Cambiar el orden natural de elementos en el foro de CSS en Foros del Web. Muy buenas, necesito cambiar el orden de flujo natural de unos elementos. Concretamente, tengo una estructura como ésta: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código html: Ver original < ...
  #1 (permalink)  
Antiguo 14/07/2009, 17:46
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Cambiar el orden natural de elementos

Muy buenas,

necesito cambiar el orden de flujo natural de unos elementos.

Concretamente, tengo una estructura como ésta:

Código html:
Ver original
  1. <h1></h1>
  2. <div></div>
  3. <h1></h1>
  4. <div></div>
  5. <h1></h1>
  6. <div></div>

Pero necesito que visualmente se vea así:

Código html:
Ver original
  1. <h1></h1><h1></h1><h1></h1>
  2. <div></div>
  3. <div></div>
  4. <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.
  #2 (permalink)  
Antiguo 14/07/2009, 22:16
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Cambiar el orden natural de elementos

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!
  #3 (permalink)  
Antiguo 15/07/2009, 07:24
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cambiar el orden natural de elementos

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 16/07/2009, 17:03
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Cambiar el orden natural de elementos

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...
  #5 (permalink)  
Antiguo 16/07/2009, 17:25
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cambiar el orden natural de elementos

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
  1. <title>Kseso? jugando con css </title>
  2. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  3. <style type="text/css">
  4. *{margin:0;padding:0; outline:none; border:0; position: relative;}
  5. .contenido,
  6. h1, h2, h3 {position:absolute; top:0; font-size:1em; color:#444; text-decoration:underline;}
  7. h1 {left:25px;}
  8. h2 {left:7em; top:-2px;}
  9. h3{left:12.5em; top:-4px;}
  10. .caja1, .caja2 { width:300px; padding:5px; text-align: justify;}
  11. .caja1 {margin-top:25px}
  12. .caja2 {margin-top:-25px}
  13. </head>
  14. <h1>Mi Web</h1>
  15. <div class="caja1">
  16. <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>
  17. </div>
  18. <h2>Página 1</h2>
  19. <div class="caja2">
  20. <p>Lorem ipsum dolor sit amet consectetuer ullamcorper gravida Aenean Phasellus lacus. Felis habitasse consequat semper eros quis congue pellentesque iaculis id sapien.</p>
  21. </div>
  22. <h3>Página 2</h3>
  23. <div class="caja2">
  24. <p>Lorem ipsum dolor sit amet consectetuer ullamcorper gravida Aenean Phasellus lacus.</p>
  25. </div>
  26. </body>
  27. </html>


Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 16/07/2009 a las 18:02
  #6 (permalink)  
Antiguo 16/07/2009, 17:26
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Cambiar el orden natural de elementos

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.
  #7 (permalink)  
Antiguo 16/07/2009, 17:33
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Cambiar el orden natural de elementos

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.

Última edición por pzin; 16/07/2009 a las 17:47
  #8 (permalink)  
Antiguo 16/07/2009, 17:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cambiar el orden natural de elementos

Sólo es cuestión de unos pequeños retoques al código anterior.
Mira a ver ahora.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 16/07/2009, 17:56
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Cambiar el orden natural de elementos

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.
  #10 (permalink)  
Antiguo 16/07/2009, 18:02
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Cambiar el orden natural de elementos

Por cierto, lo quería para adaptarlo a ésto.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:37.