Foros del Web » Creando para Internet » CSS »

Orden de carga

Estas en el tema de Orden de carga en el foro de CSS en Foros del Web. Buenas, tengo una web donde hay tres bloques principales, y cada uno de ellos carga sus modulos. Los bloques son left, center y right. El ...
  #1 (permalink)  
Antiguo 06/10/2009, 11:09
 
Fecha de Ingreso: enero-2008
Mensajes: 97
Antigüedad: 9 años, 10 meses
Puntos: 3
Orden de carga

Buenas, tengo una web donde hay tres bloques principales, y cada uno de ellos carga sus modulos.

Los bloques son left, center y right.

El problema que tengo es que, por un tema de diseño, los bloques left y right utilizan, en el css, float para su posición y a la hora de cargarlos en el index.php, debo llamarlos así:

include "left.php";
include "right.php";
include "center.php";

De esta forma, se muestra left, center y right. De lo contrario, cargando antes el center que el right, se muestra left, right y por último center.

En el archivo css, las posiciones están así:

.left {
float: left;
width: 20%;
margin: 0 0 10px 0;
}
.center {
float: right !important;
float: center;
width: 59%;
margin: 2px 0px 10px 0;
}
.right {
float: right;
width: 20%;
margin-top: 0pt;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
}


¿Hay alguna forma de llamar primero a center y luego a left y right, sin que afecte a la forma en que se muestran?
__________________
www.serieonline.net -> Descarga series y películas o míralas online
  #2 (permalink)  
Antiguo 06/10/2009, 11:14
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 9 años, 8 meses
Puntos: 2526
Respuesta: Orden de carga

mmm.... es que lo estas pensando mal...

el problema, es de diseño y maquetación.. en efecto, primero debiste diseñar el flujo de tu HTML y darle sus posiciones con CSS

ahora que tienes este problema, pues debes rediseñar tu HTML para que con cierto flujo se ajuste a lo que necesitas...


osea, has en un archivo de HTML como ejemplo: tus tres contenedores, en el orden final que los necesitas... y luego, corrige los CSS

una ves tengas esto, pues lo de menos es ordenar los include

en fin, nada que ver con PHP... suerte!!!
__________________
Y U NO RTFM? щ(ºдºщ)

No atiendo por MP nada que no sea personal.
  #3 (permalink)  
Antiguo 06/10/2009, 14:49
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 11 años, 6 meses
Puntos: 2122
Respuesta: Orden de carga

Tema trasladado desde PHP
  #4 (permalink)  
Antiguo 06/10/2009, 15:27
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Orden de carga

Prueba a ver si es algo como esto:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>Kseso? | Jugando con css</title>
  4.  <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin: 0; border: 0; padding: 0;}
  7. body {background: #f4f4f4;}
  8. #centro {width: 48%; margin: 0 auto; position relative; background: #444; color: #f5f5f5;}
  9. #izquierda, #derecha {position: absolute; width: 24%; padding: 0 1%;}
  10. #izquierda {top: 0; left: 0;}
  11. #derecha {top:0; right: 0;}
  12. </head>
  13. <div id="centro">
  14. <p>Lorem ipsum dolor sit amet consectetuer Quisque a nisl nibh orci. Dictum lacinia ridiculus Fusce tellus lacus Quisque Aenean in iaculis Vestibulum. Ac mauris velit pellentesque Sed eleifend nulla Curabitur nunc orci lacus. Wisi molestie natoque ullamcorper neque aliquet lobortis urna facilisi pretium laoreet. Lacus Nulla euismod accumsan ligula ligula Proin.</p>
  15. <p>Nec Sed magna elit Vestibulum leo velit Morbi dignissim Vestibulum dictum. Orci senectus nulla quis nec platea ut ac mollis Donec augue. Feugiat elit Quisque turpis velit condimentum Phasellus cursus pellentesque ipsum eros. Sapien urna feugiat tempor Aenean Ut semper sed Vestibulum Quisque orci. Id urna Nam montes dictumst a tincidunt.</p>
  16. </div>
  17. <div id="izquierda">
  18. <p>Lorem ipsum dolor sit amet consectetuer justo et Curabitur elit tellus. Amet ut turpis eros enim eu lacinia lacinia mauris et pede. Semper porttitor dapibus Nullam porttitor suscipit urna Lorem quis nec elit. Curabitur elit Cras hac pede Praesent orci tellus laoreet eget Cras. In quis nulla condimentum vitae metus Vivamus at wisi id vitae. Risus convallis diam velit porttitor velit Pellentesque.</p>
  19. </div>
  20. <div id="derecha">
  21. <p>Lorem ipsum dolor sit amet consectetuer justo et Curabitur elit tellus. Amet ut turpis eros enim eu lacinia lacinia mauris et pede. Semper porttitor dapibus Nullam porttitor suscipit urna Lorem quis nec elit. Curabitur elit Cras hac pede Praesent orci tellus laoreet eget Cras. In quis nulla condimentum vitae metus Vivamus at wisi id vitae. Risus convallis diam velit porttitor velit Pellentesque.</p>
  22. </div>
  23. </body>
  24. </html>
  25. Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 07/10/2009, 13:13
 
Fecha de Ingreso: enero-2008
Mensajes: 97
Antigüedad: 9 años, 10 meses
Puntos: 3
Respuesta: Orden de carga

No, con eso sale mal. La barra izquierda se me sube al header
__________________
www.serieonline.net -> Descarga series y películas o míralas online
  #6 (permalink)  
Antiguo 07/10/2009, 13:25
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Orden de carga

Cita:
Iniciado por neojordan;
include "left.php";
include "right.php";
include "center.php"; ...
¿Hay alguna forma de llamar primero a center y luego a left y right, sin que afecte a la forma en que se muestran?
Cita:
Iniciado por Kseso?;
Prueba a ver si es algo como esto
¡Qué alegría dan estos temas! Y más alegría estas respuestas
Cita:
Iniciado por neojordan Ver Mensaje
No, con eso sale mal. La barra izquierda se me sube al header
¿Deberíamos haber adivinado su existencia y también su tamaño?

¿Tan difícil es "bajar" una caja con posición absoluta para que no se sobreponga a otros elementos?

Bueno, espero que haya alguien que teniendo mayor capacidad de adivinación que yo te pueda ayudar teniendo en cuenta la información que no proporcionas.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 07/10/2009, 14:36
 
Fecha de Ingreso: enero-2008
Mensajes: 97
Antigüedad: 9 años, 10 meses
Puntos: 3
Respuesta: Orden de carga

Tampoco me pegues.

Lo siento, estaba con la mente en otra parte y he comentado demasiado rápido. De normal soy más agradecido (de verdad).

Lo siento de veras. Lo que pasa es que el cambio lo hago directamente sobre la web y con 300 personas viendo, así que tengo que corregirlo rápidamente.

Volviendo al tema (si aún quieres ayudarme) las posiciones left y right están definidas con "float".

No soy experto en css, pero creo que para hacer lo que yo quiero, voy a tener que quitar los float o ponerselo también al center. ¿me equivoco?

El css entero está aqui: http://www.serieonline.net/templates...mplate_css.css

La llamada a los tres bloques es esta:

Cita:
<body>
<div class="content">
<div class="header">
<div class="wrap">
<div id="mainlevel-nav">
<?php mosLoadModules ( 'user3' ); ?>
</div>
</div>
</div>
<div class="left">
<?php mosLoadModules ( 'left' ); ?>
<?php mosLoadModules ( 'user1' ); ?>
</div>
<div class="right">
<?php mosLoadModules( 'right' ); ?>
</div>
<div class="center" align="center">
<?php mosLoadModules('banner', -1); ?>
<?php mosMainBody( 'user4' ); ?>
</div>
...
__________________
www.serieonline.net -> Descarga series y películas o míralas online
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 07:15.