pseudo element - CSS :before repeat issue -
i set :before property on footer i'm facing repeating issue. mean image :before property repeated lot of , don't know why :/ see on website easier understand :) http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php
here code
/*insertion image tdb footer*/ div.footer-container ::before{ ontent:url("../img/tonnerre/img_tdb_footer.png"); } /*fin insertion image*/<div class="footer-container"> <footer id="footer" class="container" data-nb-cols="6"> <div class="container"> <!-- block newsletter module--> <section id="newsletter_block_left"> <h4>lettre d'informations</h4> <div class="block_content"> <form action="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php" method="post"> <div class="form-group"> <input class="inputnew form-control newsletter-input placeholder" placeholder="saisissez votre adresse e-mail" id="newsletter-input" type="text" name="email" size="18" value=""> <button type="submit" name="submitnewsletter" class="btn btn-default button button-small"> <span>ok</span> </button> <input type="hidden" name="action" value="0"> </div> </form> </div> </section> <!-- /block newsletter module--> <section id="social_block" class="footer-block"> <h4 class="title_block">nous suivre</h4> <ul class="toggle-footer" style=""> <li class="facebook"><a class="_blank" href="https://www.facebook.com/tonnerredebelt/?fref=ts" target="_blank">facebook</a></li> </ul> </section> <!-- block categories module --> <section class="blockcategories_footer footer-block col-xs-12 col-sm-2"> <h4>catégories</h4> <div class="category_footer toggle-footer" style=""> <div class="list"> <ul class="tree dynamized" style="display: block;"> <li class="last"> <span class="grower close"> </span><a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=8&controller=category&id_lang=1" title=""> produits </a> <ul style="display: none;"> <li> <a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=10&controller=category&id_lang=1" title="ceintures en cuir, noires, bicolores, fantaisistes… retrouvez tout l'univers de la marque celio* à travers sa e-boutique."> boucles </a> </li> <li> <a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=9&controller=category&id_lang=1" title="livraison &amp; retour gratuits◅ retrouvez les ceintures homme en ligne | grand choix parmi plus de 1 500 marques sur..."> bracelets </a> </li> <li class="last"> <a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=7&controller=category&id_lang=1" title="ceintures : profitez de toutes nos offres du catalogue ceintures sur galerieslafayette.com. n'hésitez pas vos achats sont satisfaits ou remboursés pendant 30 ..."> ceintures </a> </li> </ul> </li> </ul> </div> </div> <!-- .category_footer --> </section> <!-- /block categories module --> <!-- module block footer --> <section class="footer-block col-xs-12 col-sm-2" id="block_various_links_footer"> <h4>informations</h4> <ul class="toggle-footer" style=""> <li class="item"> <a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=prices-drop" title="promotions"> promotions </a> </li> <li class="item"> <a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=new-products" title="nouveaux produits"> nouveaux produits </a> </li> <li class="item"> <a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=best-sales" title="meilleures ventes"> meilleures ventes </a> </li> <li class="item"> <a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=contact" title="contactez-nous"> contactez-nous </a> </li> <li class="item"> <a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_cms=3&controller=cms&id_lang=1" title="conditions d'utilisation"> conditions d'utilisation </a> </li> <li> <a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=sitemap" title="sitemap"> sitemap </a> </li> <li> © 2014 <a class="_blank" href="http://www.prestashop.com" target="_blank">logiciel e-commerce par prestashop™</a> </li> </ul> </section> <!-- /module block footer --> <!-- block myaccount module --> <section class="footer-block col-xs-12 col-sm-4"> <h4><a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=my-account" title="gérer mon compte client" rel="nofollow">mon compte</a></h4> <div class="block_content toggle-footer" style=""> <ul class="bullet"> <li><a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=history" title="mes commandes" rel="nofollow">mes commandes</a></li> <li><a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=order-slip" title="mes avoirs" rel="nofollow">mes avoirs</a></li> <li><a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=addresses" title="mes adresses" rel="nofollow">mes adresses</a></li> <li><a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=identity" title="gérer mes informations personnelles" rel="nofollow">mes informations personnelles</a></li> </ul> </div> </section> <!-- /block myaccount module --> <!-- module block contact infos --> <section id="block_contact_infos" class="footer-block col-xs-12 col-sm-4"> <div> <h4>informations sur votre boutique</h4> <ul class="toggle-footer" style=""> <li>my company, 42 avenue des champs elysées 75000 paris france </li> <li> <span>0123-456-789</span> </li> <li> <span><a href="mailto:%73%61%6c%65%73@%79%6f%75%72%63%6f%6d%70%61%6e%79.%63%6f%6d">sales@yourcompany.com</a></span> </li> </ul> </div> </section> <!-- /module block contact infos --> <div id="block_facebook_like" class="block jq_slide_toggle"> <h4>facebook</h4> <div class="facebook-fanbox"> <div class="fb-like-box fb_iframe_widget" data-href="https://www.facebook.com/tonnerredebelt/?fref=ts" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false" data-width="292" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=334341610034299&color_scheme=light&container_width=288&header=false&href=https%3a%2f%2fwww.facebook.com%2ftonnerredebelt%2f%3ffref%3dts&locale=en_us&sdk=joey&show_border=false&show_faces=true&stream=false&width=292"><span style="vertical-align: bottom; width: 292px; height: 214px;"><iframe name="f1cfcf364c" width="292px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:like_box facebook social plugin" src="http://www.facebook.com/plugins/like_box.php?app_id=334341610034299&channel=http%3a%2f%2fstaticxx.facebook.com%2fconnect%2fxd_arbiter.php%3fversion%3d42%23cb%3df251877a6%26domain%3diutdoua-webetu.univ-lyon1.fr%26origin%3dhttp%253a%252f%252fiutdoua-webetu.univ-lyon1.fr%252ff3e4cbbb3%26relation%3dparent.parent&color_scheme=light&container_width=288&header=false&href=https%3a%2f%2fwww.facebook.com%2ftonnerredebelt%2f%3ffref%3dts&locale=en_us&sdk=joey&show_border=false&show_faces=true&stream=false&width=292" class="" style="border: none; visibility: visible; width: 292px; height: 214px;"></iframe></span></div> </div> </div> <!-- module block reinsurance --> <div id="reinsurance_block" class="clearfix"> <ul class="width5"> <li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-2-1.jpg" alt="Échange en magasin"> <span>Échange en magasin</span></li> <li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-3-1.jpg" alt="paiement à l'expédition."> <span>paiement à l'expédition.</span></li> <li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-4-1.jpg" alt="livraison gratuite"> <span>livraison gratuite</span></li> <li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-5-1.jpg" alt="paiement 100% sécurisé"> <span>paiement 100% sécurisé</span></li> <li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/" alt="satisfait ou remboursé"> <span>satisfait ou remboursé</span></li> </ul> </div> <!-- /module block reinsurance --> <a id="logo_footer" href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/" title="tonnerre de belt"> <img class="logo" src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/img/tonnerre-de-belt-logo-1447323498.jpg" alt="tonnerre de belt" width="1681"> </a> </div> </footer> </div>thanks helping :)
alexis
the problem may in selector. doing way in site:
.footer-container *::before { content:url("../img/tonnerre/img_tdb_footer.png"); } see * in selector? means want child elements of .footer-container have css applied. don't want work this, think.
maybe can try .footer-container::before apply before elements contains .footer-container class, 1 element.
Comments
Post a Comment