Même style pour plusieurs id

Résolu/Fermé
dexcom
Messages postés
36
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

dexcom
Messages postés
36
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
39
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