Maquetado para Joomla

[ricardogomezp]

Hola, estoy haciendo una plantilla para Joomla, el diseño que no logro conseguir es el que está en esta imagen señalado con flechas verdes:


He puesto en mi plantilla dicha posición pero al publicar un módulo en dicha posición no se separan con las líneas que quiero sino que queda así:


En donde está la línea blanca (esta la agregue yo a mano, no aparece así es solo para poder explicarme mejor) debería aparecer mi línea separadora pero no es así y los módulos se pegan dando una imagen horrible, el código que tengo es el siguiente:

Código HTML:

<div class="linea"></div>
<div class="seccion">
     <jdoc:include type="modules" name="user3" style="xhtml" />
</div>
<div class="linea"></div> 

¿Alguien me puede decir como hago para que entre cada módulo publicado se coloque la línea?

Desde ya gracias.

[Kristhoff]

Hola

eso lo debes hacer con un bucle; si estas haciendo tu propia plantilla asumo que tenes conocimientos sobre PHP.

[ricardogomezp]

Un bucle, mmm ¿Podrías ser más específico? ¿Un ejemplo quizás?

Gracias.

[Kristhoff]

Bueno los bucles son sentencias que recrean ciclos.
las instrucciones son:
while
if
if else
for

El ejemplo te lo debo ya que no estoy en mi casa.

[ricardogomezp]

Sí, gracias, tengo claro el concepto de bucle, se te pasó el do while. Pero lo que quiero es saber como lo estructuro en este caso específico. Gracias.

[Larenz]

Puedes usar el clear:both a ver que pasa... Para mí tu problema está en los css más que en los comando php.

Código HTML:

<div id="linea" class="clear"></div>
<div class="seccion">
     <jdoc:include type="modules" name="user3" style="xhtml" />
</div>
<div id="linea" class="clear"></div> 

Recuerda jugar tus códigos con margin y padding. En este caso otra buena idea sería para publicar varios módulos en la misma posición sería agregarle el siguiente código:

Código HTML:

div.seccion .moduletable {
    padding-bottom: 10px;
    background: url(../images/tuimagen.png) no-repeat center;
}

Ese código lo puedes modificar pero la idea es que cada vez que agregues un nuevo módulo en la posición user3 aparezca al final de el la imagen que dices o sea la barra divisora.

Ahora mismo no puedo darte una solución más acertada pero seguro esta se encamina a solucionarte... en este momento estoy rápido y pues tal vez con más calma podría ayudarte a solucionar ese problema. Pero creo sin temor a equivocarme que con esas ideas podrías lograr solucionar.

[ricardogomezp]

Gracias Larenz tu ayuda me sirvió de mucho, se corrigió un error del cual no me había dado cuenta jeje. Pero aún sigo sin poder sacar la imagen de la línea. ¿Alguna otra idea? Gracias.

[Larenz]

Pienso que deberías de publicar tu código css para ver cómo lo tienes estructurado. Por otro lado pienso que deberías tener la imagen divisora aparte, para llamarla a como te dije y que logre dividir. Voy a trabajar en ese código en cuánto tenga tiempo y tal vez no lo hayas solucionado para que lo apliques.

Aresilloooo!!! Creo que eres más experto en CSS.

[ricardogomezp]

Claro acá está el css que considero relevante:

Código:

.seccion .moduletable{

	float: right;
	background: url(../images/seccion.jpg) bottom center no-repeat;
	width: 300px;
	margin: 0 30px 5px 0;
	padding: 0;
	display: inline;
	padding-bottom: 10px;
}

.linea {
	
	clear: both;
	background: url(../images/linea.jpg) no-repeat center;
	height: 1px;
	width: 100%;
	margin: 0;
	padding: 0;
	
}

Gracias por tu interés Larenz, oki ten la certeza que publicaré si logro resolverlo para que no trabajes por gusto, veremos quién da en el clavo jeje.

[Larenz]

Imagina que tenemos dos imágenes, la línea de arriba y la línea divisora. Digamos topline.png y middleline.png - Para mí el código sería algo así:

Código:

div.seccion {
    background: transparent url("../images/topline.png") no-repeat center top;
    padding: 15px;
}

div.seccion .moduletable {
    background: transparent url("../images/middleline.png") no-repeat center bottom;
    padding-bottom: 10px; /* digamos que cada imagen mide unos 7px de ancho y x de largo */

Entonces dado estos códigos quedaría el el index.php de la siguiente manera:

Código HTML:

 <?php if($this->countModules('user3')) : ?>
      <div class="seccion">
        <jdoc:include type="modules" name="user3" style="xhtml" />
      </div>
    <?php endif; ?> 

Creo que el hecho que a tu código le agregues el float: left te modifica el diseño. Intenta con esta simplicidad de código a ver que tal. Luego podrías modificar a tu gusto o agregar mas detalles.

NOTA: Este código sería aplicable asumiendo que ya tienes creado el div del wrapper principal, menú, etc. Solo te estoy dando los códigos que presuntamente se usarían para ese módulo o posición.

[ricardogomezp]

Hola Larenz siento la tardanza, estuve sin i-net. El problema sigue igual, lo que pasa es que la imagen de la línea que los separa es la misma, y otra cosa, detrás de cada módulo queda una imagen como fondo entonces no puedo usar .seccion .moduletable para poner la línea de abajo (o middleline.png como la llamas tú) y sí, ya está maquetada la web lo único que me da problema aún es esa parte, tienen que aparecer tres módulos, por el momento se me ocurre poner user1 user2 y user3 pero si mañana quiero agregar otro u otros tendría que seguir agregando posiciones eso es muy chapuza.

¿Se os ocurre algo más? Gracias

[Larenz]

Puedes hacer una cosa. Pásame la plantilla que estás creando así como las imágenes que estás usando. Voy a intentar trabajarlo en local y te paso los archivos modificados. No te aseguro tiempo de entrega específico, pero si te sirve de algo me las puedes enviar.

[ricardogomezp]

Gracias que detalle. Al hotmail Larenz o a donde?

[Larenz]

a mi hotmail