18/05/2010, 18:20:52
Re bonjour !
Merci bcp pour ce petit topo. J'ai écouté tes conseils et j'ai repris mon code. Côté php et smarty, tout roule, mais maintenant, je suis perdu avec le css...
Depuis mon gabarit de menu, je construit une série de <div> avec à l'intérieur un titre, suivi de deux listes <ul> de classes différentes. J'aimerais qu'elles s'affichent l'une à côté de l'autre, depuis la gauche. Mais je n'y arrive pas !
Je pensais utiliser des float:left sur les <ul> afin qu'ils se mettent l'un à côté de l'autre, mais ça ne fonctionne pas parfaitement, car les titres suivants se décalent sur la droite, tandis qu'ils ne passent pas à la ligne s'il y a encore de la place (pas de 2ème colonne).
Voyez par vous-mêmes:
http://www.coord21.ch/test_cmsms/liste-d...e-coord21/
Je suis vraiment navré de vous embêter avec ça, mais j'ai passé l'après-midi à essayer de comprendre la raison de ces problèmes, mais je ne vois définitivement pas. En plus, j'ai un bug d'affichage en bas qui vient de je-ne-sais-où !
Voici le code de mon menu, au cas où:
{if $count > 0}
{menu_count start_level=$start_level nodelist=$nodelist}
À ce jour, il y a {eval var=$total_coll} collectivités membres réparties dans {eval var=$numCan} cantons:
{assign var=open value=0}
{assign var=droite value=0}
{counter start=0 name=canton assign=numCan}
{counter start=0 name=collec assign=numColl}
<div class="liste_membres">
{foreach from=$nodelist item=node}
{if !isset($start_level)}
{assign var="start_level" value=$node->depth}
{/if}
{if $node->depth == $start_level and $node->type != 'sectionheader' and $node->type != 'separator'}
{if $open==1}
{assign var=droite value=0}
{counter start=0 name=collec assign=numColl}
</ul> </div>
</div>
{/if}
<div class="canton">
{assign var=open value=1}
{counter name=canton}
<h3 id="titre_membres">{$node->menutext}</h3>
<div>
<div class="liste_gauche"> <ul>
{elseif $node->depth == $start_level+1 and $node->type != 'sectionheader' and $node->type != 'separator'}
{counter name=collec}
{if $numColl > $tableau_coll.$numCan && $droite==0}
</ul> </div>
<div class="liste_droite"> <ul>
{assign var=droite value=1}
{/if}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a></li>
{/if}
{/foreach}
</ul> </div> </div> {*dernière liste, dernier div classe gauche ou droite, dernier div}
</div> {*dernier canton*}
</div> {*liste_membres*}
{/if}
Et un bout de mon CSS:
div.liste_gauche,
div.list_droite {
float:left;
width: 320px;
}
Quelqu'un aurait-il une intuition salutaire ?
Merci bcp pour ce petit topo. J'ai écouté tes conseils et j'ai repris mon code. Côté php et smarty, tout roule, mais maintenant, je suis perdu avec le css...
Depuis mon gabarit de menu, je construit une série de <div> avec à l'intérieur un titre, suivi de deux listes <ul> de classes différentes. J'aimerais qu'elles s'affichent l'une à côté de l'autre, depuis la gauche. Mais je n'y arrive pas !
Je pensais utiliser des float:left sur les <ul> afin qu'ils se mettent l'un à côté de l'autre, mais ça ne fonctionne pas parfaitement, car les titres suivants se décalent sur la droite, tandis qu'ils ne passent pas à la ligne s'il y a encore de la place (pas de 2ème colonne).
Voyez par vous-mêmes:
http://www.coord21.ch/test_cmsms/liste-d...e-coord21/
Je suis vraiment navré de vous embêter avec ça, mais j'ai passé l'après-midi à essayer de comprendre la raison de ces problèmes, mais je ne vois définitivement pas. En plus, j'ai un bug d'affichage en bas qui vient de je-ne-sais-où !
Voici le code de mon menu, au cas où:
{if $count > 0}
{menu_count start_level=$start_level nodelist=$nodelist}
À ce jour, il y a {eval var=$total_coll} collectivités membres réparties dans {eval var=$numCan} cantons:
{assign var=open value=0}
{assign var=droite value=0}
{counter start=0 name=canton assign=numCan}
{counter start=0 name=collec assign=numColl}
<div class="liste_membres">
{foreach from=$nodelist item=node}
{if !isset($start_level)}
{assign var="start_level" value=$node->depth}
{/if}
{if $node->depth == $start_level and $node->type != 'sectionheader' and $node->type != 'separator'}
{if $open==1}
{assign var=droite value=0}
{counter start=0 name=collec assign=numColl}
</ul> </div>
</div>
{/if}
<div class="canton">
{assign var=open value=1}
{counter name=canton}
<h3 id="titre_membres">{$node->menutext}</h3>
<div>
<div class="liste_gauche"> <ul>
{elseif $node->depth == $start_level+1 and $node->type != 'sectionheader' and $node->type != 'separator'}
{counter name=collec}
{if $numColl > $tableau_coll.$numCan && $droite==0}
</ul> </div>
<div class="liste_droite"> <ul>
{assign var=droite value=1}
{/if}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a></li>
{/if}
{/foreach}
</ul> </div> </div> {*dernière liste, dernier div classe gauche ou droite, dernier div}
</div> {*dernier canton*}
</div> {*liste_membres*}
{/if}
Et un bout de mon CSS:
div.liste_gauche,
div.list_droite {
float:left;
width: 320px;
}
Quelqu'un aurait-il une intuition salutaire ?