Jump to content

Aligner lien dans le footer


Recommended Posts

Bonjour,

 

je suis sur prestashop version 1.5.3.1 avec le thème blackhawk1.2.

 

Je souhaite dans le footer aligné mes lien (6 liens) sur la même ligne , et diminuer l'espace entre chaque lien.

 

Je cherche depuis 2 jours sur tout le forum mais je ne trouve pas.

Je précise que je suis novice et ne comprend pas trop les termes

mais je me débrouille un peut.

 

Quelqu'un peut m'aider?

Edited by FLAVINOU (see edit history)
Link to comment
Share on other sites

A priori il sont déjà alignés, c'est juste une question de padding left et right, difficile de savoir ou avec une simple image. la solution est soit dans le css de votre module ou le global.css vous devez avoir:

 

#nomdudiv li {

blabla

}

avec firebug, recherchez le div qui englobe les liens.

Edited by Muche (see edit history)
Link to comment
Share on other sites

désolé mais je ne trouve pas voici le code footer

 

 

/* ################################################################################################

FOOTER

################################################################################################ */

#footer {

margin-top:20px;

}

 

#newsletter {

margin:0 auto;

width:96%;

}

 

#newsletter .ui-field-contain label.ui-input-text {

width:auto;

}

 

/*#newsletter .ui-btn {

position:relative;

top:8px;

}*/

h2.site_map {

text-align:center;

}

 

#lnk_footer {

margin:0 auto;

padding:2%;

background:#ddd;

}

 

#lnk_footer li .ui-btn {

display:inline-block;

text-align:left!important;

}

 

#lnk_footer .ui-btn-up-a,#lnk_footer .ui-btn-hover-a {

color:#333;

text-shadow:none!important;

border:none!important;

background:none!important;

}

 

#lnk_footer .ui-btn-hover-a {

text-decoration:underline;

}

 

#lnk_footer .ui-btn-inner {

padding:2px!important;

border:0;

}

 

#footer .ui-field-contain {

text-align:center;

}

 

#account_link {

text-align:center;

padding:10px 0;

}

 

#account_link .ui-block-a {

width:46%;

padding:0 2%;

text-align:right;

}

 

#account_link .ui-block-b {

width:46%;

padding:0 2%;

text-align:left;

}

 

#bar_footer {

margin:10px 0 0;

}

 

#link_bar_footer {

padding:15px 0;

}

 

#link_bar_footer .ui-block-a {

width:46%;

padding:0 2%;

}

 

#link_bar_footer .ui-block-b {

width:46%;

padding:0 2%;

text-align:right;

}

 

.ui-body-c #footer #account_link .ui-link {

color:#333!important;

}

 

.ui-body-c #footer #link_bar_footer .ui-link {

color:#fff!important;

}

Link to comment
Share on other sites

 

 

affichage firebug

 

.container .sixteen.columns {

 

 

width:940px;

}global.css

 

.container .column, .container .columns {

 

 

display:inline;

float:left;

margin-left:10px;

margin-right:10px;

}global.css

 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

 

 

font-family:inherit;

font-size:inherit;

font-style:inherit;

font-variant:inherit;

font-weight:inherit;

line-height:inherit;

margin:0;

padding:0;

vertical-align:baseline;

}global.css (line 11)

 

Inherited fromdiv.container

 

 

 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

 

 

font-family:inherit;

font-size:inherit;

font-style:inherit;

font-variant:inherit;

font-weight:inherit;

line-height:inherit;

}global.css (line 11)

Inherited fromdiv#footer.footer

 

 

 

.footer {

 

 

color:#000000;

}global.css

 

.footer {

 

 

font-size:12px;

line-height:20px;

}global.css

 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

 

 

font-family:inherit;

font-size:inherit;

font-style:inherit;

font-variant:inherit;

font-weight:inherit;

line-height:inherit;

}global.css (line 11)

Inherited fromdiv#page.

 

 

 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

 

 

font-family:inherit;

font-size:inherit;

font-style:inherit;

font-variant:inherit;

font-weight:inherit;

line-height:inherit;

}global.css (line 11)

Inherited frombody#product.

 

 

 

body {

 

 

font-family:'higt tower text';

}global.css

 

body {

 

 

line-height:1;

}global.css (line 13)

 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

 

 

font-family:inherit;

font-size:inherit;

font-style:inherit;

font-variant:inherit;

font-weight:inherit;

line-height:inherit;

}global.css (line 11)

Inherited fromhtml

 

 

 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

 

 

font-family:inherit;

font-size:inherit;

font-style:inherit;

font-variant:inherit;

font-weight:inherit;

line-height:inherit;

}

Link to comment
Share on other sites

excusez moi

je vous met toute la partie de gauche

 

<html lang="fr" debug="true">

 

<head>

 

<body id="product" class=" ">

 

<div id="page" class=" clearfix page loading">

 

<div id="header" class="header container ">

 

<div id="columns" class="content clearfix">

 

<div class="container columnsInner">

 

<div id="center_column" class="twelve columns">

 

<script type="text/javascript">

 

<div class="breadcrumb">

<a href="http://192.168.0.6/prestashop/" title="retour à Accueil">Accueil</a>

<span class="navigation-pipe">></span>

<a href="http://192.168.0.6/prestashop/index.php?id_category=11&controller=category" title="Bambins">Bambins</a>

<span class="navigation-pipe">></span>

<a href="http://192.168.0.6/prestashop/index.php?id_category=25&controller=category" title="Bavoirs">Bavoirs</a>

<span class="navigation-pipe">></span>

Bavoir

</div>

 

<div id="primary_block" class="clearfix">

 

<div id="container_express_checkout" style="float: right; margin: 10px 40px 0px 0px;">

<div class="clearfix"/>

 

<form id="paypal_payment_form" action="http://192.168.0.6/prestashop/modules/paypal/express_checkout/payment.php" data-ajax="false" title="Payez avec PayPal" method="post">

 

<div id="more_info_block" class="clear">

</div>

 

<div id="right_column" class="four columns omega">

</div>

</div>

 

<div id="footer" class="footer grid_9 alpha omega clearfix">

 

<div class="container">

 

<div class="inner sixteen columns">

 

<center>

 

<li class="alpha item four columns">

<a href="http://192.168.0.6/prestashop/index.php?controller=contact" title="Contactez-nous">Contactez-nous</a>

</li>

 

<li class="alpha item four columns">

 

<li class="alpha item four columns">

 

<li class="alpha item four columns">

 

<li class="alpha item four columns">

 

<li class="alpha item four columns">

</center>

</div>

</div>

</div>

 

<div class="copyright ">

</div>

<div id="fancybox-tmp"/>

 

<div id="fancybox-loading">

<div id="fancybox-overlay"/>

 

<div id="fancybox-wrap">

</body>

<script src="chrome-extension://bmagokdooijbeehmkpknfglimnifench/googleChrome.js"/>

</html>

Link to comment
Share on other sites

voici le code source footer

<!-- Footer --> <div id="footer" class="footer grid_9 alpha omega clearfix"> <div class="container"> <div class="inner sixteen columns"> <center> <!-- MODULE Block footer --> <!-- <div class="parmanentlinkblock eight columns alpha" id="block_various_links_footer"> <h4>Information</h4> <ul> <li class="first_item alpha four columns item"><a href="http://192.168.0.6/prestashop/index.php?controller=prices-drop" title="Promotions">Promotions</a></li> <li class=" alpha four columns item"><a href="http://192.168.0.6/prestashop/index.php?controller=new-products" title="Nouveaux produits">Nouveaux produits</a></li> <li class="alpha item four columns"><a href="http://192.168.0.6/prestashop/index.php?controller=best-sales" title="Meilleures ventes">Meilleures ventes</a></li>--!> <li class="alpha item four columns"><a href="http://192.168.0.6/prestashop/index.php?controller=contact" title="Contactez-nous">Contactez-nous</a></li> <li class="alpha item four columns"><a href="http://192.168.0.6/prestashop/index.php?id_cms=2&controller=cms" title="Mentions légales">Mentions légales</a></li> <li class="alpha item four columns"><a href="http://192.168.0.6/prestashop/index.php?id_cms=3&controller=cms" title="CGV">CGV</a></li> <li class="alpha item four columns"><a href="http://192.168.0.6/prestashop/index.php?id_cms=4&controller=cms" title="A propos">A propos</a></li> <li class="alpha item four columns"><a href="http://192.168.0.6/prestashop/index.php?id_cms=5&controller=cms" title="Paiement sécurisé">Paiement sécurisé</a></li> <li class="alpha item four columns"><a href="http://192.168.0.6/prestashop/index.php?id_cms=6&controller=cms" title="Partenaires">Partenaires</a></li> <!-- <li id="header_link_sitemap " class="alpha four columns"><a href="http://192.168.0.6/prestashop/index.php?controller=sitemap" title="sitemap">Sitemap</a></li> --!> </ul> </div> <!-- /MODULE Block footer --></center> </div> </div> <!-- footer container --> <div class="copyright "> <div class="container"> </div> </div> </div> </div> </body> </html>

Link to comment
Share on other sites

A tout hasard dans votre global.css ajoutez:

 

#footer li{

width:100px

padding-left:3px:

padding-right:3px

}

 

pour voir ce que celà donne, mais à priori ça ne changera pas grand chose, vous êtes sur thème responsive avec de plus la moitié du code du block commenté.

Désolé mais je ne peux aller plus loin avec ces éléments

Link to comment
Share on other sites

Sa ne change rien mais ce n'est pas grave merci d'avoir essayé, je vais continué a chercher.

 

Juste une petite question vu que je ne me sert pas du thème prestashop par Default es ce que je peut le supprimer de mes fichiers?

 

Merci encore

Link to comment
Share on other sites

J'ai réussi a aligner les liens dans blockcms.tpl en mettant nombre de colonne footer a 0. (ce n'est peut etre pas le bon endroit mais sa fonctionne)

Et dans global.css ligne 437:

 

footer ul li { margin-bottom:0px; width:100px; padding-left:10px; padding-right:10px;}

j'ai rajouté 'width:100px; padding-left:10px; padding-right:10px' comme vous m'avez dit Muche

et voici ce que sa donne

post-530025-0-21114100-1365103637_thumb.png

Edited by FLAVINOU (see edit history)
Link to comment
Share on other sites

Bonjour, merci pour la réponse, cependant je ne vois pas ce que je doit modifier.

Sur les lignes 48 à 62 j'ai ça

 

<h4 class="title_block">{l s='Information' mod='blockcms'}</h4>

<ul>

{if !$PS_CATALOG_MODE}<li class="first_item"><a href="{$link->getPageLink('prices-drop')}" title="{l s='Specials' mod='blockcms'}">{l s='Specials' mod='blockcms'}</a></li>{/if}

<li class="{if $PS_CATALOG_MODE}first_{/if}item"><a href="{$link->getPageLink('new-products')}" title="{l s='New products' mod='blockcms'}">{l s='New products' mod='blockcms'}</a></li>

{if !$PS_CATALOG_MODE}<li class="item"><a href="{$link->getPageLink('best-sales')}" title="{l s='Best sellers' mod='blockcms'}">{l s='Best sellers' mod='blockcms'}</a></li>{/if}

{if $display_stores_footer}<li class="item"><a href="{$link->getPageLink('stores')}" title="{l s='Our stores' mod='blockcms'}">{l s='Our stores' mod='blockcms'}</a></li>{/if}

<li class="item"><a href="{$link->getPageLink($contact_url, true)}" title="{l s='Contact us' mod='blockcms'}">{l s='Contact us' mod='blockcms'}</a></li>

{foreach from=$cmslinks item=cmslink}

{if $cmslink.meta_title != ''}

<li class="item"><a href="{$cmslink.link|addslashes}" title="{$cmslink.meta_title|escape:'htmlall':'UTF-8'}">{$cmslink.meta_title|escape:'htmlall':'UTF-8'}</a></li>

{/if}

{/foreach}

<li><a href="{$link->getPageLink('sitemap')}" title="{l s='Sitemap' mod='blockcms'}">{l s='Sitemap' mod='blockcms'}</a></li>

{if $display_poweredby}<li class="last_item">{l s='Powered by' mod='blockcms'} <a class="_blank" href="http://www.prestashop.com">PrestaShop</a>™</li>{/if}

</ul>

 

Mais je ne vois pas où je dois passer le nombre de colonne à 0 :unsure:

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...