Bonjour à tous,
Je me débrouille en CSS et HTML... mais je n'ai jamais appris alors j'ai BEAUCOUP de lacunes. Bref, je bidouille.
J'ai eu envie de m'attaquer à un nouveau projet.
J'ai intégré un calendrier de l'avent sur une page de mon blog.
J'aimerais que, par exemple, le 1er décembre, seule soit cliquable la case 1.
Le 2, les cases 1 et 2 cliquables... le 3, les cases 1,2 et 3... etc.
Comment puis-je faire ?
Voici mon code :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Calendrier de l'avent 2014 !!</title>
<style type="text/css">
body{
background:url('http://bullesetbottillons.com/wp-content/uploads/2012/12/Cadeaux-de-No%C3%ABl.jpg') no-repeat top center;
background-size:100%;
}
div#calendrier{
width:600px;
height:400px;
background:url('http://bullesetbottillons.com/wp-content/uploads/2012/12/Cadeaux-de-No%C3%ABl.jpg') no-repeat top center;
position: relative;
left:0%;
top:0%;
}
.cadre{
width:80px;
height: 80px;
border:3px red solid;
margin-top:10px;
margin-left: 5px;
margin-right: 1px;
float:left;
text-decoration: none;
color:green;
font-family:georgia;
font-size: 30px
}
.cadre:hover{
background:url('http://bullesetbottillons.com/wp-content/uploads/2012/12/Cadeaux-de-No%C3%ABl.jpg');
color:red;
}
</style>
</head>
<body>
<div id="calendrier">
<!-- fenetre 1er decembre -->
<a href="
http://www.untibebe.com/les-matins" class="cadre">1</a>
1
</a>
<!-- fenetre 2 decembre -->
<a href="" class="cadre">
2
</a>
<!-- fenetre 3 decembre -->
<a href="" class="cadre">
3
</a>
<!-- etc.. -->
<a href="" class="cadre">
4
</a>
<a href="" class="cadre">
5
</a>
<a href="" class="cadre">
6
</a>
<a href="" class="cadre">
7
</a>
<a href="" class="cadre">
8
</a>
<a href="" class="cadre">
9
</a>
<!-- fenetre 10 decembre -->
<a href="" class="cadre">
10
</a>
<a href="" class="cadre">
11
</a>
<a href="" class="cadre">
12
</a>
<a href="" class="cadre">
13
</a>
<a href="" class="cadre">
14
</a>
<!-- fenetre 15 decembre -->
<a href="" class="cadre">
15
</a>
<a href="" class="cadre">
16
</a>
<a href="" class="cadre">
17
</a>
<a href="" class="cadre">
18
</a>
<a href="" class="cadre">
19
</a>
<a href="" class="cadre">
20
</a>
<a href="" class="cadre">
21
</a>
<a href="" class="cadre">
22
</a>
<a href="" class="cadre">
23
</a>
<!-- fenetre 24 decembre -->
<a href="" class="cadre">
24
</a>
</div>
</body>
</html>