28172 sujets

CSS et mise en forme, CSS3

Problème de padding avec un style 'div div div'

Bonjour,

Je suis en train de mettre en place un site annuaire des artisans suisses et j'ai un problème dans la section 'Publicité' en jaune à droite.

J'aimerai supprimer le padding de 10px défini ici:
HTML:


<div class="moduleS1">
 <div>
  <div>
   <div>
    <h3>Publicité</h3>
     <div class="pay4featured">
      <div id="zone_p4f">
      <h4>Add 'Happyland parc d'attractions' here!</h4>
      <form id="formulaire_p4f" action="http://www.annuaire-artisan.ch" method="post" name="formulaire_p4f">
      </form>
     </div>
    <div class="pay4featureditem">
    </div>
   </div>

CSS:
div.moduleS1 div div div {style4.css (ligne 240)
background:transparent url(../images/style4/botright_S1.png) no-repeat scroll right bottom;
padding:10px;
}


J'ai essayé de le surdéfinir avec un :
div.pay4featured{
padding:0;
}


Mais cela ne fonctionne pas.

Merci du petit coups de pouce.

Cédric
Bonjour,

Le problème que tu rencontres est double (voire triple):

1. Le sélecteur que tu utilises pour surdéfinir le style plus générique a une priorité plus faible. Lire à ce sujet Cascade CSS et priorité des sélecteurs.

2. En amont, le problème vient du fait que tu utilises un sélecteur trop «permissif», qui peut potentiellement s'appliquer à des éléments non visés. Il faudrait, dans l'absolu, avoir le sélecteur suivant: 
div.moduleS1 > div > div > div
(le seul problème est qu'IE6 ne le comprendra pas, donc plutôt que ce sélecteur on utilisera sans doute des classes pour identifier chaque niveau de DIV imbriqué...).

3. En amont encore, le problème est lié à cette imbrication excessive de DIV. Elle sert sans doute à réaliser un effet graphique, mais il est possible voire probable que la solution retenue (avec autant de DIV imbriquées) ne soit pas optimale.
Merci,

Le problème est que je ne peux pas changer tout ce qui est autour. C'est un site sous joomla et je ne voudrai pas modifier le template.

A première vue y a t'il moyen de corriger ce style? peut-être en changeant le <div class="pay4featured"> par un <div id="pay4featured"> ?

Cédric
Ha purée, j'ai ajouté le !important et c'est bon...

En fait j'avais testé plus tot: padding:0px;!important, mais il faut mettre le !important AVANT le ;


couillon que je suis. Smiley confused
Sujet clos
Aller à