Orden de carga

neojordan · #1 (**permalink**) 06/10/2009, 10:09

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?

pateketrueke · #2 (**permalink**) 06/10/2009, 10:14

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!!!

GatorV · #3 (**permalink**) 06/10/2009, 13:49

Tema trasladado desde PHP

kseso? · #4 (**permalink**) 06/10/2009, 14:27

Prueba a ver si es algo como esto:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<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; border: 0; padding: 0;}
body {background: #f4f4f4;}
#centro {width: 48%; margin: 0 auto; position relative; background: #444; color: #f5f5f5;}
#izquierda, #derecha {position: absolute; width: 24%; padding: 0 1%;}
#izquierda {top: 0; left: 0;}
#derecha {top:0; right: 0;}
</style>
</head>
<body>
<div id="centro">
<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>
<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>
</div>
<div id="izquierda">
<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>
</div>
<div id="derecha">
<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>
</div>
</body>
</html>
Un saludo

neojordan · #5 (**permalink**) 07/10/2009, 12:13

No, con eso sale mal. La barra izquierda se me sube al header

kseso? · #6 (**permalink**) 07/10/2009, 12:25

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

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

neojordan · #7 (**permalink**) 07/10/2009, 13:36

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>
...