28172 sujets

CSS et mise en forme, CSS3

Selectionner plusieurs ID

Bonjour, je suis nouveau sur le forum et je m'intéresse au html et aux css depuis 2 semaines pour essayer de mettre sur pied mon site avec Dreamweaver. J'ai fait une première version avec iWeb mais je me suis rendu compte des limites du logiciel, à savoir systématiquement devoir passer par des logiciels tiers pour mettre à jours les métas tags après une update... Bref je me suis dit que j'allais tout rependre à zéro et essayer de comprendre quelques bases.

Bref revenons à nos moutons.

J'ai un rollover qui revient souvient sur ma page, mais son ID change à chaque fois.

#Rollover1, #Rollover2, #Rollover3.... bref il y en a une vingtaine.

Seulement voilà j'aimerais appliquer une règle à tout ces rollovers.

Est il possible de demander de sélectionner une série d'ID, par exemple de 1à100 ou n+1 ou alors tous les ID commençant par "Rollover"

J'imagine que j'ai la possibilité de faire une règle avec #Rollover1, #Rollover2, #Rollover3 etc... mais je ne trouve pas ça très chouette...

De même je pourrais faire une classe .truc et appliquer cette classe à tous les rollovers un par un mais la encore c'est trop répétitif pour moi...

Y'a t il une solution pour faciliter ma démarche ?

Merci !!!!
Bonjour,

Si tu veux appliquer le même style à tous les liens de ta page tu y parviendras par la propriété a:hover, quelque soit le nombre de liens sans avoir à créer d'Id.
Ah ok, mais en faisant apparaitre mon image alternative en image d'arrière plan dans ma règle ?
Modifié par keuk (19 Dec 2012 - 18:38)
Keuk a écrit :
Ah ok, mais en faisant apparaitre mon image alternative en image d'arrière plan dans ma règle ?

Tu veux dire qu'au passage de la souris sur ton lien, ton background changera?

Si oui c'est possible. Smiley smile
Oui enfin j'essaie de voir comment je peux générer le rollover avec la manière du a:hover.
keuk a écrit :


J'ai un rollover qui revient souvient sur ma page, mais son ID change à chaque fois.

#Rollover1, #Rollover2, #Rollover3.... bref il y en a une vingtaine.

Seulement voilà j'aimerais appliquer une règle à tout ces rollovers.


En donnant une class identique a tous , tu te simplifieras la tâche.
keuk a écrit :

Est il possible de demander de sélectionner une série d'ID commençant par "Rollover"

oui:
[id^="rollover"] /* commence par rollover */
[id*="rollover"] /* contient rollover */


Sinon , attention a ne pas mettre de majuscule ou de chiffre sur le premier caractére d'une class ou d'un id .

++
gc-nomade a écrit :


En donnant une class identique a tous , tu te simplifieras la tâche.

oui:
[id^="rollover"] /* commence par rollover */
[id*="rollover"] /* contient rollover */


Sinon , attention a ne pas mettre de majuscule ou de chiffre sur le premier caractère d'une class ou d'un id .

++


Merci pour les majuscules.

Tu me conseilles d'appliquer une classe à cette série de ID 'est ça?

Mais je ne comprends pas ce que je dois noter dans mon interface DW comme nom pour ma règle... en admettant que ma classe soit .etiquette ? je ne peux pas juste mettre #rollover* comme nom de règle avec attribut z-index pour qu'il me l'applique à toutes les ID de rollover nommés rollover1 etc.
Les conseils de @gc-nomade étaient opportuns, jusqu'à ton dernier post que je ne comprends pas!

Difficile de savoir quel est vraiment ton problème si tu ne postes pas de code. Smiley smile
Désolé je me perds un peu dans dreamweaver qui est tout nouveau pour moi, alors voici mon code html avec deux éléments comportant chacun la balise. je veux juste spécifier une règle à toutes les ID de la page commençant par Rollover.

 <div class="content">
    <div class="projet">
      <div class="lifted"><a href="images/STAGE6-Caliper-2-pistons.jpg" rel="lightbox[1]" title="Freelance job for Stage6" target="_parent"> <img src="images/Vignettes/STAGE6 Caliper 2 pistons.jpg" alt="Brake caliper" width="250" height="177" border="0" /></a></div>
      <div><a href="Projects_Stage6.html#caliper" target="_parent" onmouseover="MM_swapImage('Rollover1','','images/more-on.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/more-off.png" alt="More infos" name="Rollover1" width="19" height="75" border="0" class="etiquette" id="Rollover1" /></a></div>
      <p class="legende">STAGE6 Brake caliper<br />
      <a href="http://www.stage6-racing.com/" target="_new"><em>www.stage6-racing.com</em></a></p>
    </div>
    <div class="projet">
      <div class="lifted"><a href="images/STAGE6-Kickstarter-MK2.jpg" rel="lightbox[1]" title="Freelance job for Stage6" target="_parent"> <img src="images/Vignettes/STAGE6 Kickstarter MK2.jpg" alt="Kickstarter" width="250" height="177" border="0" /></a></div>
      <div><a href="Freelance_Stage6.html#kickstarter" target="_parent" onmouseover="MM_swapImage('Rollover2','','images/more-on.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/more-off.png" alt="More infos" name="Rollover2" width="19" height="75" border="0" class="etiquette" id="Rollover2" /></a></div>
      <p class="legende">STAGE6 Kickstarter<br />
        <a href="http://www.stage6-racing.com/" target="_new"><em>www.stage6-racing.com</em></a></p>
    </div>
    </div>


J'ai une règle:

.etiquette {
	-moz-transition: none;
	-webkit-transition: none;
	transition: none;


Actuellement je dois mettre aux ID une par une le .etiquette, je voudrais savoir comment faire ça rapidement sans le faire 1 par 1 (en fait avec cette règle .etiquette je veux désactiver un effet qui fait que mes images de rollover passent en premier plan par dessus une ombre projetée d'une div qui lui est collé:

http://img37.imageshack.us/img37/7416/capturedecran20121219a2.jpg

http://img341.imageshack.us/img341/7416/capturedecran20121219a2.jpg
Modifié par keuk (19 Dec 2012 - 21:36)
Je reprends juste ce que t'a dit gc-nomade:

Tu peux créer une règle pour tout tes Rollover"n".
Au lieu de la .etiquette tu peux faire ça:
img[id^="Rollover"] {
	-moz-transition: none;
	-webkit-transition: none;
	transition: none;
}
Super !!! Merci ! Ca marche.

J'ai ajouté cette partie de code dans ma page CSS

Bref la règle à ajouter dans le panneau règle de Dreamweaver était donc: img[id^="Rollover"] Smiley lol
Sujet clos
Aller à