[RESOLU] Grouper le css

Eléphanteau du PHP | 19 Messages

04 janv. 2018, 12:30

Bonjour à tous,

Alors voila, je viens vers vous pour savoir si c'est possible de faire un tel groupe.
Pour le moment, mon code est comme ceci :
#tabs-container-event, #tabs-container-event2, #tabs-container-event3, #tabs-container-event4,
#tabs-container-ehpad, #tabs-container-ehpad2, #tabs-container-ehpad3, #tabs-container-ehpad4,
#tabs-container-news, #tabs-container-news2, #tabs-container-news3, #tabs-container-news4,
#tabs-container-com, #tabs-container-com2, #tabs-container-com3, #tabs-container-com4,
#tabs-container-lapresse, #tabs-container-lapresse2, #tabs-container-lapresse3, #tabs-container-lapresse4 {
	margin:10px 0px;
	width:720px;
	min-height:300px;	
}
mais serait-il possible de dire que de tel à tel nombre, car je dois tout les ans rajouter un un id de chaque, du genre
#tabs-container-event - #tabs-container-event10

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 7701 Messages

04 janv. 2018, 15:57

Bonjour,

Non ce n'est pas possible en CSS de demander de traiter des id différents avec un suffixe compris entre tel et tel numéro.

Mais la façon dont tu le fais n'est pas la bonne.
A priori pour ce genre de cas on ne se base pas sur l'id (qui est unique par document) mais sur la class qui a l'avantage de pouvoir être partagé par plusieurs éléments HTML.
Du coup tu donne juste une class identique à tes éléments qui doivent avoir le même style et tu applique ton css juste sur cette class.
A noter que c'est le dieze pour représenter un ID mais le point pour une CLASS.

Exemple
<style>.tabs-container-event, .tabs-container-ehpad, .tabs-container-news {
  margin:10px 0px;
  width:720px;
  min-height:300px;	
}</style>

<div id="tabs-container-event1" class="tabs-container-event">DIV tabs-container-event1</div>
<div id="tabs-container-event2" class="tabs-container-event">DIV tabs-container-event2</div>
<div id="tabs-container-event3" class="tabs-container-event">DIV tabs-container-event3</div>
<div id="tabs-container-ehpad2" class="tabs-container-ehpad">DIV tabs-container-ehpad2</div>
<div id="tabs-container-news3" class="tabs-container-news">DIV tabs-container-news3</div>
Quand tout le reste a échoué, lisez le mode d'emploi...