Je débute l'apprentissage de la programmation HTML et CSS pour construire mon site.
Je travaille en "GridContainer Clearfix" et class "Fluid" afin que mon site soit compatible avec toutes les dimensions d'écran.
J'en suis à la page Photo de mon site. J'ai crée une galerie photo en CSS au milieu et un menu déroulant vertical avec le nom des diverses galeries sur la gauche.
Ce que j'aimerais, c'est que la galerie n'apparaisse que lorsque je clique sur le lien du menu déroulant.
J'ai donc utilisé les propriétés de style display:none et display: block pour cacher la Div de la galerie. Ca marche, mais ce qui se passe, c'est que, dés que j'essaye de faire défiler les images à l'aide des boutons next ou prev, le slideshow disparait totalement.
Pouvez-vous m'aider ? Merci mille fois. Je débute vraiment, donc, j'ai du écrire plein de conneries...
Voici le code HTML
Et pour le CSS
Je travaille en "GridContainer Clearfix" et class "Fluid" afin que mon site soit compatible avec toutes les dimensions d'écran.
J'en suis à la page Photo de mon site. J'ai crée une galerie photo en CSS au milieu et un menu déroulant vertical avec le nom des diverses galeries sur la gauche.
Ce que j'aimerais, c'est que la galerie n'apparaisse que lorsque je clique sur le lien du menu déroulant.
J'ai donc utilisé les propriétés de style display:none et display: block pour cacher la Div de la galerie. Ca marche, mais ce qui se passe, c'est que, dés que j'essaye de faire défiler les images à l'aide des boutons next ou prev, le slideshow disparait totalement.
Pouvez-vous m'aider ? Merci mille fois. Je débute vraiment, donc, j'ai du écrire plein de conneries...
Voici le code HTML
<div class="gridContainer clearfix">
<div id="actus_defile">
<ul>
<li><a href="#">galeries photo</a>
<ul>
<li><a href="#base_slideshow">Galerie KO21</a></li>
</ul>
</li>
</ul>
</div>
<!-- Slideshow -->
<div id="base_slideshow" style="font-size:1em">Concert-Expo à la galerie KO21<span style="font-size:0.8em; padding-left:2%">24-25-26.10.2014</span>
<span id="sl_i1" class="sl_command sl_i"></span>
<span id="sl_i2" class="sl_command sl_i"></span>
<span id="sl_i3" class="sl_command sl_i"></span>
<span id="sl_i4" class="sl_command sl_i"></span>
<span id="sl_i5" class="sl_command sl_i"></span>
<span id="sl_i6" class="sl_command sl_i"></span>
<span id="sl_i7" class="sl_command sl_i"></span>
<span id="sl_i8" class="sl_command sl_i"></span>
<section id="slideshow">
<a class="commands prev commands1" href="#sl_i8"><</a>
<a class="commands next commands1" href="#sl_i2">></a>
<a class="commands prev commands2" href="#sl_i1"><</a>
<a class="commands next commands2" href="#sl_i3">></a>
<a class="commands prev commands3" href="#sl_i2"><</a>
<a class="commands next commands3" href="#sl_i4">></a>
<a class="commands prev commands4" href="#sl_i3"><</a>
<a class="commands next commands4" href="#sl_i5">></a>
<a class="commands prev commands5" href="#sl_i4"><</a>
<a class="commands next commands5" href="#sl_i6">></a>
<a class="commands prev commands6" href="#sl_i5"><</a>
<a class="commands next commands6" href="#sl_i7">></a>
<a class="commands prev commands7" href="#sl_i6"><</a>
<a class="commands next commands7" href="#sl_i8">></a>
<a class="commands prev commands8" href="#sl_i7"><</a>
<a class="commands next commands8" href="#sl_i1">></a>
<div class="container">
<div class="c_slider">
</div>
</div>
</section>
</div>
Et pour le CSS
#actus_defile {
float:left;
font-size: 0.5em;
margin-top: -1%;
width: 20%;
padding:0 0 0 0; /* marges intérieures */
font-family:arial; /* police de caractère arial */
font-weight: normal; /* caractères gras */
}
#actus_defile ul { /* liste des rubriques visibles par défaut */
margin:0; /* annulation de toute marge externe */
padding:0; /* annulation de toute marge interne */
list-style-type:none; /* mise à l'horizontale des éléments de la liste */
text-align:center; /* alignement au centre des éléments de la liste */
}
#actus_defile li { /* style pour les élements de la liste principale */
margin:auto; /* centrage de l'élément de liste */
padding:0; /* annulation de toute marge interne */
background-color: #437E97;
}
#actus_defile li a { /* lien présent dans la liste principale */
display:block; /* détection du lien sur toute la surface */
color: #F9F5F5; /* couleur noire du texte */
text-decoration: none; /* suppression du soulignement sous le lien */
padding:0%; /* marge interne autour du lien */
}
#actus_defile li a:hover { /* survol du lien de la première liste */
text-decoration:underline;
}
#actus_defile ul li ul { /* sous-liste */
display:none; /* cachée par défaut */
}
#actus_defile ul li:hover ul { /* affichage de la sous-liste quand on passe la souris sur la liste principale */
display:block; /* attention : ne marche pas sous IE sans le bout de code mis au début de menu.php */
}
#actus_defile li:hover ul li { /* correction nécessaire pour IE */
float:none;
}
#actus_defile li ul li { /* trait de séparation sous chaque item du menu déroulant */
border-top:dotted 1px #eeeeee;
background-color: #9BBFCE;
color:#3E3E3E;
}
#actus_defile li ul li a:hover { /* changement de couleur du menu déroulant lors du survol de chaque item */
background-color: #5C96AF;
color:#000000;
}
#base_slideshow {
float:left;
width: 58%;
margin-left: 21%;
margin-top: -1%;
position:absolute;
color:#FBFBFA;
text-align:center;
display:none;
}
#base_slideshow:target {
display: block;
}
/* Slideshow */
#slideshow {
position: relative;
width: 640px;
height: 480px;
padding: 0px;
border: 1px solid #100F10;
margin: 0% auto 2%;
background: #100F10;
-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-ms-border-radius: 2px 2px 2px 2px;
-o-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;
}
#slideshow .container {
position:relative;
width: 640px;
height: 480px;
overflow: hidden;
}
#slideshow .commands {
position: absolute;
top: 45%;
padding: 5px 13px;
font-family: 'Amaranth', Arial, Verdana, sans-serif;
font-size: 0.5em;
color: #FAF9F8;
text-decoration:none;
background-color: #161616;
text-shadow: 0 0 1px #aaa;
}
#slideshow .prev {
left: -48px;
}
#slideshow .next {
right: -48px;
}
#slideshow .prev,
#slideshow .next {
display: none;
}
#slideshow .commands1 {
display: block;
}
.sl_i:target ~ #slideshow .c_slider {
-webkit-transition: background 1s;
-moz-transition: background 1s;
-ms-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
.sl_command { display: none; }
/* A modifier dans chaque Slideshow */
#slideshow .c_slider {
position: absolute;
left:0; top:0;
width: 900%;
height: 480px;
background: url(elements/images/KO21real_1.jpg) 0 0 no-repeat, url(elements/images/KO21real_2.jpg) 640px 0 no-repeat, url(elements/images/KO21real_3.jpg) 1280px 0 no-repeat, url(elements/images/KO21real_4.jpg) 1920px 0 no-repeat, url(elements/images/KO21real_5.jpg) 2560px 0 no-repeat, url(elements/images/KO21real_6.jpg) 3200px 0 no-repeat, url(elements/images/KO21real_7.jpg) 3840px 0 no-repeat, url(elements/images/KO21real_8.jpg) 4480px 0 no-repeat;
}
#sl_i1:target ~ #slideshow .commands{ display: none; }
#sl_i1:target ~ #slideshow .commands1{ display: block; }
#sl_i1:target ~ #slideshow .c_slider{ background-position: 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0; }
#sl_i2:target ~ #slideshow .commands{ display: none; }
#sl_i2:target ~ #slideshow .commands2{ display: block; }
#sl_i2:target ~ #slideshow .c_slider{ background-position: -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0; }
#sl_i3:target ~ #slideshow .commands{ display: none; }
#sl_i3:target ~ #slideshow .commands3{ display: block; }
#sl_i3:target ~ #slideshow .c_slider{ background-position: -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0; }
#sl_i4:target ~ #slideshow .commands{ display: none; }
#sl_i4:target ~ #slideshow .commands4{ display: block; }
#sl_i4:target ~ #slideshow .c_slider{ background-position: -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0; }
#sl_i5:target ~ #slideshow .commands{ display: none; }
#sl_i5:target ~ #slideshow .commands5{ display: block; }
#sl_i5:target ~ #slideshow .c_slider{ background-position: -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0; }
#sl_i6:target ~ #slideshow .commands{ display: none; }
#sl_i6:target ~ #slideshow .commands6{ display: block; }
#sl_i6:target ~ #slideshow .c_slider{ background-position: -3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0; }
#sl_i7:target ~ #slideshow .commands{ display: none; }
#sl_i7:target ~ #slideshow .commands7{ display: block; }
#sl_i7:target ~ #slideshow .c_slider{ background-position: -3840px 0, -3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0; }
#sl_i8:target ~ #slideshow .commands{ display: none; }
#sl_i8:target ~ #slideshow .commands8{ display: block; }
#sl_i8:target ~ #slideshow .c_slider{ background-position: -4480px 0, -3840px 0, -3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0; }