28172 sujets

CSS et mise en forme, CSS3

Priorité entre plusieurs CSS

Bonjour,

je travaille sur un site (prestashop) pour intégrer mon thème. J'utilise Firebug ou les outils webdevelopper de Chrome pour regarder le CSS et le modifier en conséquence.

Jusqu'à présent pas de problème. Sauf que là j'ai un CSS qui est chargé (après un CSS global.css) et qui n'écrase pas une propriété de global.css.

Mon HTML:

<div id="right_column" class="column">

<!-- MODULE Block specials -->
<div id="special_block_right" class="blockspecials block products_block exclusive">
....
</div>
<!-- /MODULE Block specials -->
....
</div>


En fait j'ai ceci dans mon global.css:

#left_column div.block, #right_column div.block {
padding-bottom: 5px;
}


et dans mon css chargé après (blockspecials.css):

#special_block_right {
	border: 1px solid #786a5c;
	padding: 10px 0;
	text-align: center; width: 175px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	position: relative;
	overflow: visible;
}

#special_block_right div.blockspecials {
	padding-bottom: 42px;
	margin-bottom: 60px;
}


Et pourtant c'est toujours le padding-bottom:5px qui prend le pas sur mon padding-bottom:42px.

Je ne comprends pas. Pourriez vous m'aider?

Si vous le souhaitez, je peux vous donner l'adresse du site en MP.

Merci

Alex
Curieux en effet.

Pourquoi ne pas poster l'URL ici pour constater ? Des plans secrets ou peur de faire de la pub ? Si c'est le dernier, tu n'as pas à t'en faire =°
Merci,

non non rien de secret mais le site n'est pas encore en ligne au public, c'est un site e-commerce.

-http://www.la-melie.com/shop/

Ca se passe dans la colonne droite au niveau de l'encart "Reductions", c'est à cet encart que je veux appliquer un padding-bottom pour que l'image à cheval sur la bordure n'empiète pas sur le texte "Toutes les promos".

Merci d'avance.

EDIT par Felipe: avec un - devant pour désactiver le lien et éviter (un peu) l'indexation, si le site n'est pas encore lancé
Modifié par Felipe (03 Aug 2012 - 19:12)
ce n'est pas très beau mais en faisant : 

#right_column #special_block_right div.blockspecials {
	padding-bottom: 42px;
	margin-bottom: 60px;
}


et 

#right_column div.block {
padding-bottom: 42px;
}


dans le second CSS ça ne marche pas ?
Modifié par o06 (03 Aug 2012 - 10:22)
Oui, rajouter #right_column devant #special_block_right devrait fonctionner...

Mais j'avoue que je suis sur les fesses... Voir que le poids de l'ID d'un parent est plus fort que le poids de l'ID du composant lui-même, ça me tue...

Après test, ils sont de même poids (si l'un apparaît avant l'autre, c'est le premier arrivé qui l'emporte), mais préciser l'ID du parent permet de régler cette histoire une bonne fois pour toute...
Ouf je ne suis pas le seul à trouver ça bizarre.

Désolé mais votre solution ne fonctionne pas. C'est en ligne si vous voulez vérifier.
En modifiant finalement ton sélecteur par div#special_block_right.block, ça semble fonctionner...
Alors moi je bosse sur prestashop tous les jours, j'aurais fait comme ça:

En fait, vu que ton css est surchargé il arrive parfois que l'ordre des feuilles de styles diffère... donc le plus simple pour arriver à tes fins c'est de soit :

Enlever la class .block de ton fichier TPL vu que c'est elle qui prend le dessus apparement
ou de mettre un !important sur ta propriété css

blockspecials block products_block exclusive


vers

blockspecials products_block exclusive


J'ai fait l'essai dans les deux cas ça marche
Modifié par SuperMerguez (03 Aug 2012 - 11:14)
Administrateur
Bonjour,

24 fichiers CSS chargés ... ça fait 23 de trop. S'il y a une option dans Prestahop pour minifier, c'est le moment de l'activer.
L'ordre des feuilles de style est-il bon dans le code source ? (je ne vois plus les 42px, que les 5)

Et 7 fichiers JS ça fait 7 de trop dans le head (à déplacer avant </body> tout en bas) et à minifier en 2-4 fichiers max.
Merci pour vos réponses et désolé pour le temps de réponse.

Mais aucun des solutions cités n'a fonctionné. Je suis obligé de virer des classes ou d'en renommer.

Pour répondre à Felipe, je n'ai pas grand choix en fait j'utilise Prestashop et c'est la façon de bosser de prestashop.

Gothor: comment voir/mesurer le poids d'un ID, y a-t-il un outils pour ça?

Merci encore.
Felipe a écrit :
Bonjour,

24 fichiers CSS chargés ... ça fait 23 de trop. S'il y a une option dans Prestahop pour minifier, c'est le moment de l'activer.
L'ordre des feuilles de style est-il bon dans le code source ? (je ne vois plus les 42px, que les 5)

Et 7 fichiers JS ça fait 7 de trop dans le head (à déplacer avant &lt;/body&gt; tout en bas) et à minifier en 2-4 fichiers max.


Le problème de prestashop... faut prendre le temps de faire un thème de base et n'exploiter qu'un ou deux fichiers css et pareil pour js et aussi passer un coup de karcher dans les modules qui sont parfois vraiment dégueulasses (même les payants...)
Sujet clos
Aller à