Slt Jérome,
Voici la totalité des styles :
<style>
body {
width: 100%;
padding: 0;
font: 100%/150% Verdana,sans-serif;
margin-left: auto;
margin-right: auto;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-image: url(images/1_b.jpg);
}
h1 {
color:#069;
}
#nav {
text-align: center;
padding: 0;
margin: 0;
position: relative;
}
#nav li {
display:inline-block;
}
#nav a {
display: block;
text-decoration: none;
border-bottom: 5px solid transparent;
margin-bottom: 0;
margin-top: 0;
}
#nav li:hover>a {
color:#069;
border-bottom:5px solid #48B;
}
#content {
width: 100%;
overflow: hidden;
position: relative;
margin-left: auto;
margin-right: auto;
}
#slide { /* initialisé en javascript */
/* position:relative; /**/
/* width:400%; /* contient 4 éléments donc 4x100 = 400% */
}
.article { /* initialisé en javascript */
/* width:25%; /* il y a 4 éléments donc 100/4 = 25% */
/* float:left;/**/
}
.fleche {
position:absolute;
position:fixed;
top:50%;
font-size:3em;
line-height:1em;
color:#ABC;
color:#DDD;
cursor:pointer;
z-index:1000;
}
.fleche:hover {
color:#000;
color:#BCD;
}
.droite {
right:0;
}
.gauche {
left:0;
}
.button {
background-color: #222;
color: #FFFFFF;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-collapse: separate;
border-spacing: 0px 0px;
border-right-color: #FFFFFF;
border-left-color: #FFFFFF;
/* [disabled]border-right-width: 2px; */
/* [disabled]border-left-width: 2px; */
/* [disabled]border-right-style: solid; */
/* [disabled]border-left-style: solid; */
position: static;
margin-left: 2px;
text-align: center;
/* [disabled]margin-top: 20px; */
display: inline-block;
opacity: 1;
top: 0px;
bottom: 0px;
padding: 2px 10px;
font: 20px/20px Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
margin-bottom: -2px;
margin-right: 2px;
}
.button:hover {
background-color: #FF6633;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
Pour ce qui est du body (de cette page de travail, ce qui explique le faux texte), il n'est composé que d'ancres dont le contenu est identique :
<ul class="button" id="nav">
<li><a href="#ancre_1">Ancre #1</a></li>
<li><a href="#ancre_2">Ancre #2</a></li>
<li><a href="#ancre_3">Ancre #3</a></li>
<li><a href="#ancre_4">Ancre #4</a></li>
</ul>
<div class="fleche gauche">◄</div>
<div class="fleche droite">►</div>
<div id="content">
<div id="slide">
<div id="ancre_1" class="article">
<p>Quod repperit esse melius</p>
<p>Cibos vehementer vehementer solitarum quod propinquantis Isauri per solitarum quae.</p>
<p>Antequam in provincia toto fuerit pervenire denique provincia nascetur antequam.</p>
</div>
Là, c'est une page où j'ai supprimé les backgrounds des "div ancre", le seul background est dans le body que j'aimerais changer selon l'ancre.
Pour te donner une idée, voici les CSS des ancres avant que je leur supprime leurs backgrounds pour tout recommencer à zéro :
#ancre_1 {
width: 100%;
background-image: url(../LDDC/img/bg.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 1250px;
}
#ancre_2 {
background-image: url(../LDDC/img/bgg2.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 800px;
background-attachment: fixed;
}
Merci pour ton aide,
dh
