Sujet Précédent Sujet Suivant

Même style pour plusieurs id

Résolu/Fermé
dexcom Messages postés 35 Date d'inscription mercredi 22 janvier 2014 Statut Membre Dernière intervention 20 mars 2018 - Modifié par dexcom le 29/05/2016 à 20:21
fredconv Messages postés 122 Date d'inscription mardi 25 août 2009 Statut Membre Dernière intervention 4 décembre 2017 - 23 juin 2016 à 16:10
Bonjour, je voudrais appliquer le même style css que <section id="price"> sur <section id="plat du jour">

j ai beau essayer code css : #price ,#plat du jour {
padding: 70px 0px; aussi apliquer au autre ligne #price

mais rien n'y fait merci d'avance pour vos explications

css: 

/*--
    price Start
--*/
#price ,#plat du jour{  <----exemple 1
  padding: 70px 0px;
}
#price .block > p , #plat du jour .block > p { <----exemple 2
  color: #9D9D9D;
  font-size: 16px;
  line-height: 26px;
  padding: 40px 133px 0;
  text-align: center;
}
#price .block .pricing-list {
  padding-top: 85px;
}
#price .block .pricing-list ul {
  padding: 0 0 30px;
  margin: 0;
}
#price .block .pricing-list ul li {
  padding: 21px 0px;
}
#price .block .pricing-list ul li .item .item-title {
  position: relative;
}
#price .block .pricing-list ul li .item .item-title h2 {
  display: inline-block;
  position: relative;
  z-index: 99;
  background: #fff;
}
#price .block .pricing-list ul li .item .item-title .border-bottom {
  position: absolute;
  top: 0;
  width: 100%;
  height: 1px;
  border: 1px dotted #C9C9C9;
  margin-top: 20px;
}
#price .block .pricing-list ul li .item .item-title span {
  float: right;
  color: #938463;
}
#price .block .pricing-list ul li .item p {
  padding: 12px 0 0px;
  color: #949494;
}
#price .block .pricing-list .btn {
  padding: 28px 105px;
  border-radius: 0px;
  background: none;
  color: #FF4F02;
  border: 1px solid #FF4F02;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  -webkit-transition: .3s all;
  -o-transition: .3s all;
  transition: .3s all;
}
#price .block .pricing-list .btn:hover {
  background: #ff530a;
  color: #fff;
}


html :
    <!--
    price start
    ============================ -->
    <section id="price">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="block">
                        <h1 class="heading wow fadeInUp" data-wow-duration="300ms" data-wow-delay="300ms">Notre <span>carte</span></h1>
                        <p class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="400ms"><strong>Tous nos plats sont préparés au moment même, nous vous demandons<br>
un peu de patience afin de nous laisser le temps de les confectionner. Merci.</strong></p>
                        <div class="pricing-list">
                            <div class="title">
                                <h3>Featured <span>on the week</span></h3>
                            </div>
                            <ul>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="300ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2>Menu du jour</h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 25.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p>
                                    </div>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="400ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2><a href="#situation">Menu dégustation</a></h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 10.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p> 
                                        </div>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="800ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2>Suggestions enfants -12 ans</h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 7.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p>
                                    </div>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="500ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2>Les entrées froides </h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 5.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p>
                                    </div>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="600ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2>Les entrées chaudes</h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 15.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p>
                                    </div>
                               </li>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="700ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2>Les Potages</h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 75.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p>
                                    </div>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="800ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2>Les Poissons</h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 7.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p>
                                  </div>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="800ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2>Les viandes</h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 7.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p>
                                    </div>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="800ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2>Les desserts</h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 7.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p>
                                  </div>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="800ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2>Les Vins</h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 7.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p>
                                    </div>
                                </li>
                            </ul>
                            <a class="btn btn-default pull-right wow bounceIn" data-wow-duration="500ms" data-wow-delay="1200ms" href="#" role="button">More Info</a>
                        </div>
                    </div>
                </div><!-- .col-md-12 close -->
            </div><!-- .row close -->
        </div><!-- .containe close -->
    </section><!-- #price close -->
    <!--
    plat du jour start
    ============================ -->
    <section id="plat du jour">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="block">
                        <h1 class="heading wow fadeInUp" data-wow-duration="300ms" data-wow-delay="300ms">Notre <span>carte</span></h1>
                        <p class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="400ms"><strong>Tous nos plats sont préparés au moment même, nous vous demandons<br>
un peu de patience afin de nous laisser le temps de les confectionner. Merci.</strong></p>
                        <div class="pricing-list">
                            <div class="title">
                                <h3>Featured <span>on the week</span></h3>
                            </div>
                            <ul>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="300ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2>Menu du jour</h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 25.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p>
                                    </div>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="400ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2><a href="#situation">Menu dégustation</a></h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 10.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p> 
                                        </div>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="800ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2>Suggestions enfants -12 ans</h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 7.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p>
                                    </div>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="500ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2>Les entrées froides </h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 5.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p>
                                    </div>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="600ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2>Les entrées chaudes</h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 15.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p>
                                    </div>
                               </li>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="700ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2>Les Potages</h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 75.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p>
                                    </div>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="800ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2>Les Poissons</h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 7.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p>
                                  </div>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="800ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2>Les viandes</h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 7.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p>
                                    </div>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="800ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2>Les desserts</h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 7.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p>
                                  </div>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="800ms">
                                    <div class="item">
                                        <div class="item-title">
                                            <h2>Les Vins</h2>
                                            <div class="border-bottom"></div>
                                            <span>$ 7.00</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim&&</p>
                                    </div>
                                </li>
                            </ul>
                            <a class="btn btn-default pull-right wow bounceIn" data-wow-duration="500ms" data-wow-delay="1200ms" href="#" role="button">More Info</a>
                        </div>
                    </div>
                </div><!-- .col-md-12 close -->
            </div><!-- .row close -->
        </div><!-- .containe close -->
    </section><!-- #plat du jour close -->







1 réponse

Réponse 1 / 1
dexcom Messages postés 35 Date d'inscription mercredi 22 janvier 2014 Statut Membre Dernière intervention 20 mars 2018
29 mai 2016 à 21:17
merci j ai trouver

je met les id au départ et ensuite le code
comme ceci 

#price .plat du jour{
  padding: 70px 0px;
}
 .block > p {
  color: #9D9D9D;
  font-size: 16px;
  line-height: 26px;
  padding: 40px 133px 0;
  text-align: center;
}
.block .pricing-list {
  padding-top: 85px;
}
.block .pricing-list ul {
  padding: 0 0 30px;
  margin: 0;
0
fredconv Messages postés 122 Date d'inscription mardi 25 août 2009 Statut Membre Dernière intervention 4 décembre 2017 38
23 juin 2016 à 16:10
Hello

Etonnant .

Les id ne peuvent pas prendre d' espace

tu peux utiliser des _ , des - mais pas des espace. ton id devrait etre plat-du-jour
Si en css tu utilise .plat, il cherchera un element html avec la class 'plat' et non pas l id 'plat' ...

donc ton id: plat-du-jour
dans css: #plat-du-jour
0

Discussions similaires

Choisir un bon ID en ligne
FunkyBlazz -
Fr -

5 réponses
Comment définir ma nouvelle PS4 comme PS4 principale ?
cod-alpha -
hhh -

8 réponses
c quoi Email ID
causette -
Wiem -

5 réponses
Problème authentification
Bass -
KiwiFascinant81 -

7 réponses
Activation d'une carte SIM
promolaco -
Estcequevouspouvezmaidersvp -

4 réponses