Bonjour,
Sur ce
site
, 4 modules de 230 pixels (dans l'article de la page d'accueil) doivent se répartir sur les 1000 pixels de la page et s'adapter au format des portables (la fonction bootstrap est activée et le Responsive Design a été réglé).
Dans le fichier index, on a :
Code:
<?php if ($nbmodules5) : ?>
<div id="modulestop">
<div class="inner clearfix <?php echo 'n'.$nbmodules5 ?>">
<?php if ($this->countModules('position-8')) : ?>
<div id="modulestopmod1" class="flexiblemodule ">
<div class="inner clearfix">
<jdoc:include type="modules" name="position-8" style="xhtml" />
</div>
</div>
<?php endif; ?>
<?php if ($this->countModules('position-9')) : ?>
<div id="modulestopmod2" class="flexiblemodule ">
<div class="inner clearfix">
<jdoc:include type="modules" name="position-9" style="xhtml" />
</div>
</div>
<?php endif; ?>
<?php if ($this->countModules('position-10')) : ?>
<div id="modulestopmod3" class="flexiblemodule ">
<div class="inner clearfix">
<jdoc:include type="modules" name="position-10" style="xhtml" />
</div>
</div>
<?php endif; ?>
<?php if ($this->countModules('position-11')) : ?>
<div id="modulestopmod4" class="flexiblemodule ">
<div class="inner clearfix">
<jdoc:include type="modules" name="position-11" style="xhtml" />
</div>
</div>
<?php endif; ?>
<div class="clr"></div>
</div>
</div>
<?php endif; ?>
<div id="maincontent">
Et dans la feuille CSS :
Code:
#modulestop .n1 > .flexiblemodule { width: 100%; }
#modulestop .n2 > .flexiblemodule { width: 50%; }
#modulestop .n2 > .flexiblemodule + div { width: 50%; }
#modulestop .n3 > .flexiblemodule { width: 33%; }
#modulestop .n3 > .flexiblemodule + div { width: 33%; }
#modulestop .n3 > .flexiblemodule + div + div { width: 33%; }
#modulestop .n4 > .flexiblemodule { width: 25%; }
#modulestop .n4 > .flexiblemodule + div { width: 25%; }
#modulestop .n4 > .flexiblemodule + div + div { width: 25%; }
#modulestop .n4 > .flexiblemodule + div + div + div { width: 25%; }
#modulestopmod1 > div.inner {
border: #dae0e0 10px solid;
padding: 10px;
}
#modulestopmod2 > div.inner {
border: #a6a6a6 10px solid;
padding: 10px;
}
#modulestopmod3 > div.inner {
border: #7d7d7d 10px solid;
padding: 10px;
}
#modulestopmod4 > div.inner {
border: #5e5e5e 10px solid;
padding: 10px;
}
Quelle syntaxe utiliser dans l'article pour obtenir un affichage conforme ?
Dans l'article, les 4 modules sont insérés dans un tableau, ce qui perturbe l'affichage qui du coup n'est plus Responsive Design.
Suis-je assez clair ?
Fred
Please Log in or Create an account to join the conversation.
