[RESOLU] groupes de liens alignés horizontalement dans le footer

[marty69]

Bonjour,

Après avoir réglé mes problèmes sur la personalisation de mon header, mon menu horizontal, mes produits phares (grĉe à vous d'ailleurs !)... me revoila pour trouver de l'aide concernant le footer cette fois ci.

Mon but étant d'aligner horizontalement plusieurs groupes de liens comme on voit souvent sur les sites aujourd'hui. Je suis tombé sur quelques posts qui m'ont mis sur la voie mais la je bloque. En gros j'utilise 3 ID : "footer" dans lequel je place une ligne pour marquer la séparation entre le corps de la page et le footer, "footer_content" pour créer un conteneur pour mes blocs de liens et "footer_block" qui seront les blocs de liens en eux même intégrés dans le conteneur.

Quelques détails :

Je vous passe l'ID footer qui a mon avis ne joue pas dans mon pb.

Le "footer_content" permet donc de créer mon conteneur :

#footer_content{
   float:left;
   width:640px;
}

Le "footer_block" pour créer des blocs de liens en float left et dont la largeur fait 30% pour les afficher en ligne :

div.footer_block{
   float:left;
   width:30%;
}

Dans mon footer.tpl j'appelle donc le hook FOOTER dans un div "footer"

Et enfin l'affichage des liens depuis blockvariouslinks.tpl :

><!-- MODULE Block various links -->
</pre>
<ul>

{l s='NOS OFFRES' mod='blockvariouslinks'}
{l s='Specials' mod='blockvariouslinks'}
{l s='New products' mod='blockvariouslinks'}
{l s='Top sellers' mod='blockvariouslinks'}
{l s='Contact us' mod='blockvariouslinks'}


{l s='MENTIONS LEGALES' mod='blockvariouslinks'}
   {foreach from=$cmslinks item=cmslink}
{$cmslink.meta_title|escape:'htmlall':'UTF-8'}
   {/foreach}

</ul>
<br><!-- /MODULE Block various links 

Dans ma logique cela devrait fonctionner, seulement rien à faire, les blocs s'affichent les uns sous les autres !!!

Ou ais-je fait une erreur ?

Please help !

[minirj01]

Bonjour peut-être faut-il un {clear: both} dans les divs des blocs qui posent problème, pour annuler l'effet d'un float précédent. A tester aussi le display: inline.

[Atch]

Essaye dans ta construction d'avoir un truc plus de ce genre (il manque les dans la première balise

• ):
  
  

>
</pre>
<ul>

et après pour le CSS

essaye plutot

ul#footer_block {
   ...
} 

V++

Atch

[marty69]

C'est... comment dire... parfait !

Décidément je ne peux plus me passer de vos précieux conseils !

Merci minijr, j'avais déja essayé ces solutions mais sans succès. Effectivement il manquait une définition ul pour le footer_block, merci Atch. Par contre après vérif avec Firebug il n'apparait pas de "bloc" footer_block dans le conteneur footer_content comme je m'attendais à le voir, est-ce normal ?

Une petite question cependant, pour ma culture perso, j'ai testé la structure que tu préconise Atch mais cela marche aussi avec ma structure d'origine. Une balise est elle obligatoire (ou recommandée) dans un bloc

• ?
  
  Merci à vous deux, top efficacité comme d'hab

[minirj01]

Une balise est elle obligatoire (ou recommandée) dans un bloc

• ?

Il me semble que sans start-tag

• l'élément
• ne passe pas le validateur W3C.

[abfab51]

Merci Paulcool pour ton conseil, j'ai bien installer firebug mais je n'y comprend pas grand chose...je te dirai ce qu'il en sera dans un mois

J'ai bien effectué le changement de classe dans global.css (en remplaçant . par #) et je me retrouve avec l'affichage des liens du block BLOCKVARIOUS.TPL en vertical et non pas horizontal (en fait les liens sont les uns en dessous des autres).
J'ai remis le CSS tels qu'il était avant la modification et impossible de récupérer mon affichage horizontale. J'ai désinstallé le module puis réinstallé, rien y fait.
Ai je modifié une page qu"il ne fallait pas....ben en fait il ne me semble pas avoir touché à d'autres pages que footer.tpl, BLOCKVARIOUS.TPL et global.css ....m'enfin suis suffisamment vicieux pour l'avoir fait et ne plus m'en souvenir, méfiance.

J'ai suivi les conseils de divers posts tels qu'inclure la structure ci-dessous dans BLOCKVARIOUS.TPL mais mon affichage reste irrémédiablement vertical.

></pre>
<ul>

[abfab51]

oupsssssssssss... je me suis trompé de post, je vous prie de m'excuser. :-(