18041 sujets

Questions générales et questions de débutants

[Résolu] Une galerie d'image avec jQuery : problème de cascade CSS

Bonjour

En suivant le tutoriel de création de la galerie, j'ai rencontré un problème pour insérer la galerie dans mon site.

En effet dans le tutoriel la galerie est insérée directement dans body.

Dans mon cas la galerie est compris dans deux div

Voici le code html : 



<body>
        <div id="document" >

            <div id="corps">

      <ul id="thumbs"><li><a href="img/photos/image_001.jpg"><img alt="" src="img/miniatures/image_001.jpg" /></a></li><li><a href="img/photos/images_002.jpg"><img alt="" src="img/miniatures/image_002.jpg" /></a></li><li><a href="img/photos/image_003.jpg"><img alt="" src="img/miniatures/image_003.jpg" /></a></li><li><a href="img/photos/image_004.jpg><img alt="" src="img/miniatures/image_004.jpg" /></a></li><li><a href="img/photos/image_005.jpg"><img alt="" src="img/miniatures/image_005.jpg" /></a></li></ul>
            </div>
            <div id="pied">
                &copy; copyright La Compagnie des Gentils 2009 - <a href="index.php?module=contact">contactez-nous</a>
            </div>

       </div>
        <script type="text/javascript" src="script/menu.js" ></script>
        <script type="text/javascript" src="script/jquery.js" ></script>
       <script type="text/javascript" src="script/galerie.js" ></script>
		

    </body>


Le problème viens de ce code CSS qui n'est pas pris en compte : 


#thumbs li 
{
    float:left;
    height:25px
    width:30px;
}


Le seul code CSS pris en compte pour les li est le suivant : 



#corps li
{
    list-style-image:url('../img/site/etoile.gif');
}


pour accéder aux li compris dans le div #thumbs

j'ai essayer

#thumbs li

et

#corps #thumbs li

mais cela ne semble pas marcher.

Auriez-vous une petit idée du problème avec la cascade CSS ?
Modifié par ArnaudS (31 Aug 2009 - 09:12)
Salut,

en vertu de la priorité des sélecteurs #corps #thumbs li devrait pourtant fonctionner. Par contre il faut bien re-déclarer la valeur de list-style-image :
#corps #thumbs li  { 
    float:left;
    height:25px;
    width:30px;
    list-style-image:none;
}
Merci pour ta réponse Heyoan

J'ai beau vider mon cache, rien n'y fait.

Le style est pris en compte si je le définie directement dans #corps li mais du coup c'est tout le reste du site qui saute... pas terrible donc Smiley ohwell

Je me demande si le faît que la liste soit générée avec Javascript influt dans l'histoire ?
Méthodologie:

1. Valider le code HTML.
2. Valider le code CSS.
3. Vérifier avec un outil tel que Firebug (extension de Firefox), Web Inspector (Safari), les Web Developer Tools d'IE8, etc., quels styles CSS s'appliquent à tes LI.
ArnaudS a écrit :
Je viens de voir que mon code n'était pas valide HTML

Le CSS non plus.

(En plus l'information donnée par le validateur CSS du W3C est limpide.)
Modifié par Florent V. (30 Aug 2009 - 19:39)
Ah oui, et Firebug montrait que les styles pour #corps li tout comme ceux pour #thumbs li s'appliquaient. Ces derniers avaient d'ailleurs la priorité, car même si les sélecteurs ont un poids identique, le bloc de déclaration pour #thumbs li venait plus tard dans le code CSS, et donc écrasait les déclarations concurrentes ayant un même poids.

Ce que Firebug montrait également, c'est que seule une partie des propriétés déclarées pour #thumbs li s'appliquait. En général, ça veut dire: ERREUR DE SYNTAXE.

À vrai dire on aurait pu la trouver sans avoir accès à la page, vu que l'erreur de syntaxe est en plein milieu de cette portion de code que tu citais:
#thumbs li  
{ 
    float:left; height:25px width:30px; 
}
(Je me suis contenté de supprimer les retours à la ligne dans une partie du code. Ces derniers n'ont aucune valeur en CSS.)
Modifié par Florent V. (30 Aug 2009 - 19:45)
Bonjour

En effet c'était très bête comme faute.

Un ; qui manque et une } de trop!! Smiley ohwell

Désolé de vous avoir fais perdre votre temps là dessus. Je m'en veux à mort Smiley fache
ArnaudS a écrit :
Désolé de vous avoir fais perdre votre temps là dessus.

Le tout c'est de prendre le réflexe:
- valider son code;
- en cas de styles non appliqués ou qui s'écrasent, c'est soit un problème de syntaxe, soit un problème de priorité des sélecteurs... soit un problème de sélecteur mal écrit.

Pour ma part, je fais des erreurs idiotes tout le temps. J'ai juste les réflexes qu'il faut pour les corriger vite la plupart du temps (et une fois de temps en temps je galère pour rien Smiley lol ).

Ah oui, un autre truc qui peut aider: un éditeur de code qui signale les erreurs de syntaxe. Komodo Edit est pas mal pour ça... mais ça peut être gênant lorsqu'il signale des erreurs... par erreur (par exemple en cas d'utilisation de certaines propriétés CSS 3).
Sujet clos
Aller à