28172 sujets

CSS et mise en forme, CSS3

Pb d'images de fonds de div imbriqués

Bonjour,

J'ai beau chercher et tester je ne trouve pas de solution et donc je viens faire appel à vous.

Présentation :

J'ai créé un template pour mon site tournant sous le CMS Joomla.

J'ai la colonne de droite qui contient 8 positions comme suit : 2 positions par ligne sur 4 lignes. Mettre tout cela par étage permet par exemple de mettre un ou deux modules par lignes (exemple : 1ère ligne = 2 modules, 2ième ligne = 1 module, 3ième ligne = 2 modules, 4ième ligne = 1 module).
S'il n'y a qu'un module sur la ligne, il prend toute la largeur de la colonne. S'il y en a deux, chacun prend la moitié de la largeur de la colonne. Chaque ligne a une image de fonds positionnée en bas de la div et qui représente une étagère en bois. Cela donne dont l'impression que les modules sont posés sur une étagère.

Pour vous donne une idée, mon site est déjà en ligne http://jupe-expo.fr mais seules deux étagères sont utilisées (à droite du site) et la 2ième ne contient qu'un module Joomla. Différent de cette configuration, çà pose problème.

Mon problème :

Lorsque je publie des modules dans les positions des lignes 1 et 2, je n'ai pas de soucis d'affichage de l'image de fonds (l'étagère en bois). Par contre, dès que je publie un module sur la 3ième ligne, l'étagère (l'image de fonds) de la 2ième ligne se met à cheval sur l'étagère de la 3ième ligne. L'étagère de la 2ième ligne ne reste pas en bas de la 2ième ligne donc.

Un extrait du code de mon fichier "index.php"


<head>

<?php
$nbcol01 = 0;
if ($this->countModules('col01pos01'))  $nbcol01++;
if ($this->countModules('col01pos02'))  $nbcol01++;
if ($nbcol01 == 1) $col01class = 'colnb01';
if ($nbcol01 == 2) $col01class = 'colnb02';
?>
<?php
$nbcol02 = 0;
if ($this->countModules('col02pos01'))  $nbcol02++;
if ($this->countModules('col02pos02'))  $nbcol02++;
if ($nbcol02 == 1) $col02class = 'colnb01';
if ($nbcol02 == 2) $col02class = 'colnb02';
?>
<?php
$nbcol03 = 0;
if ($this->countModules('col03pos01'))  $nbcol03++;
if ($this->countModules('col03pos02'))  $nbcol03++;
if ($nbcol03 == 1) $col03class = 'colnb01';
if ($nbcol03 == 2) $col03class = 'colnb02';
?>
<?php
$nbcol04 = 0;
if ($this->countModules('col04pos01'))  $nbcol04++;
if ($this->countModules('col04pos02'))  $nbcol04++;
if ($nbcol04 == 1) $col04class = 'colnb01';
if ($nbcol04 == 2) $col04class = 'colnb02';
?>

</head>

<body>

    <div id="colonnes" class="">
        
           <?php if ($nbcol01) : ?>
                <div class="etagerebas">
                    <?php if ($this->countModules('col01pos01')) : ?>
                        <div class="colpos <?php echo $col01class; ?>">
                            <jdoc:include type="modules" name="col01pos01" style="xhtml" />
                        </div>
                    <?php endif; ?>
                    <?php if ($this->countModules('col01pos02')) : ?>
                        <div class="colpos <?php echo $col01class; ?>">
                            <jdoc:include type="modules" name="col01pos02" style="xhtml" />
                        </div>
                    <?php endif; ?>
                    <div class="spacer"> </div>
                </div>
      		<?php endif; ?>  
            
            <?php if ($nbcol02) : ?>              
                <div class="etagerebas">
                    <?php if ($this->countModules('col02pos01')) : ?>
                        <div class="colpos <?php echo $col02class; ?>">
                            <jdoc:include type="modules" name="col02pos01" style="xhtml" />
                        </div>
                    <?php endif; ?>
                    <?php if ($this->countModules('col02pos02')) : ?>
                        <div class="colpos <?php echo $col02class; ?>">
                            <jdoc:include type="modules" name="col02pos02" style="xhtml" />
                        </div>
                    <?php endif; ?>
                    <div class="spacer"> </div>
     		<?php endif; ?>  
            
          <?php if ($nbcol03) : ?>
                <div class="etagerebas">
                    <?php if ($this->countModules('col03pos01')) : ?>
                        <div class="colpos <?php echo $col03class; ?>">
                            <jdoc:include type="modules" name="col03pos01" style="xhtml" />
                        </div>
                    <?php endif; ?>
                    <?php if ($this->countModules('col03pos02')) : ?>
                        <div class="colpos <?php echo $col03class; ?>">
                            <jdoc:include type="modules" name="col03pos02" style="xhtml" />
                        </div>
                    <?php endif; ?>
                    <div class="spacer"> </div>
                </div>
      	  <?php endif; ?>  
                   
          <?php if ($nbcol04) : ?>
                <div class="etagerebas">
                    <?php if ($this->countModules('col04pos01')) : ?>
                        <div class="colpos <?php echo $col04class; ?>">
                            <jdoc:include type="modules" name="col04pos01" style="xhtml" />
                        </div>
                    <?php endif; ?>
                    <?php if ($this->countModules('col04pos02')) : ?>
                        <div class="colpos <?php echo $col04class; ?>">
                            <jdoc:include type="modules" name="col04pos02" style="xhtml" />
                        </div>
                    <?php endif; ?>
                    <div class="spacer"> </div>
                </div>
     	  <?php endif; ?>  
                
          </div>


Un extrait du code de mon fichier "template.css"

	/** COLONNES **/
	#colonnes {float: left; width: 430px;}
		#colonnes div.moduletable h3 { background-color:#FFF; color:#9cd1f0; -webkit-border-top-left-radius: 15px; border-top-left-radius: 15px; behavior: url(/pie.htc); -webkit-border-top-right-radius: 15px; border-top-right-radius: 15px; behavior: url(/pie.htc);}
		#colonnes div.moduletable a {color:#FFF;}
				
		div.etagerebas {background: url(../images/module-gauchedroite.png) bottom center no-repeat; padding: 0px 1% 50px 1%;}
			
			div.colnb01 {width: 98%;}
			div.colnb02 {width: 48%;}
			
			div.colpos {float:left; margin: 0px 1%;}



Si vous avez une piste je suis preneur car pour l'instant je ne peux mettre des modules que sur les 2 premières lignes. C'est dommage, non ?

Smiley decu
Modifié par jeromehej (26 Aug 2011 - 13:55)
Sujet clos
Aller à