Bonsoir,
Je souhaiterais savoir comment faire pour coller un tas d'image vers le haut quand il on de la place au dessus, un exemple de mon souhait:
http://www.noelshack.com/2017-07-1487408873-tmp-2962-2017-02-18-10-07-251691786119.png
http://www.noelshack.com/2017-07-1487408879-tmp-2962-2017-02-18-10-05-59244731238.png
(J'ai masqué deux photos car ce sont des images que j'ai pris sur le net au hasard pour le développement)
Html:
<div class="panneau"><a href="http://Google.fr/" rel="nofollow noopener noreferrer" target="_blank"><img class="unimage" src=""quot;https://i.ytimg.com/vi/-157HBpPZ24/maxresdefault.jpg" style="width: 30px; height: 15px;"\></a><a href=""><img class="unimage" src=""quot;http://www.icone-png.com/png/52/52126.png" style="width: 80px; height: 70px;"\></a><a href=""><img class="unimage" src=""quot;http://0.media.collegehumor.cvcdn.com/10/85/0c1ea147af465b27b7ca6f5222560667.jpg" style="width: 60px; height: 80px;"\></a><a href=""><img class="unimage" src=""quot;http://0.media.collegehumor.cvcdn.com/10/85/0c1ea147af465b27b7ca6f5222560667.jpg" style="width: 60px; height: 80px;"\></a><a href=""><img class="unimage" src=""quot;http://cdn2.boothedog.net/wp-content/uploads/2011/07/Boo-Dog-Christmas.jpg" style="width: 120px; height: 80px;"\></a><a href=""><img class="unimage" src=""quot;https://sophosnews.files.wordpress.com/2014/12/lollipop-250.png?w=250" style="width: 15px; height: 15px;"\></a><a href=""><img class="unimage" src=""quot;http://cdn2.boothedog.net/wp-content/uploads/2011/07/Boo-Dog-Christmas.jpg" style="width: 120px; height: 80px;"\></a><a href=""><img class="unimage" src=""quot;http://cdn2.boothedog.net/wp-content/uploads/2011/07/Boo-Dog-Christmas.jpg" style="width: 120px; height: 80px;"\></a><a href=""><img class="unimage" src=""quot;http://cdn2.boothedog.net/wp-content/uploads/2011/07/Boo-Dog-Christmas.jpg" style="width: 120px; height: 80px;"\></a><a href=""><img class="unimage" src=""quot;http://cdn2.boothedog.net/wp-content/uploads/2011/07/Boo-Dog-Christmas.jpg" style="width: 120px; height: 80px;"\></a><a href=""><img class="unimage" src=""quot;http://cdn2.boothedog.net/wp-content/uploads/2011/07/Boo-Dog-Christmas.jpg" style="width: 120px; height: 80px;"\></a><a href=""><img class="unimage" src=""quot;https://sophosnews.files.wordpress.com/2014/12/lollipop-250.png?w=250" style="width: 15px; height: 15px;"\></a><a href=""><img class="unimage" src=""quot;https://sophosnews.files.wordpress.com/2014/12/lollipop-250.png?w=250" style="width: 15px; height: 15px;"\></a><a href=""><img class="unimage" src=""quot;https://sophosnews.files.wordpress.com/2014/12/lollipop-250.png?w=250" style="width: 15px; height: 15px;"\></a></div>
Css:
a {
text-decoration: none;
}
html {
height: 100%;
width: 1000px;
}
.war {
color: #C4000E;
margin: 40px;
}
p {
font-size: 26px;
margin: 40px;
}
form {
margin-left: 20px;
text-align: center;
}
.ens{
margin: 10px;
}
.panneau {
width: 1000px;
height: 1000px;
background-color: white;
padding: 0;
}
.right {
float: right;
margin-top: 10px;
}
.unimage {
margin: 0;
display: inline-block;
vertical-align: top;
}
a {
margin: 0;
}
#url {
width: 90%;
height: 40px;
font-size: 20px;
}
#submit {
height: 40px;
font-size: 20px;
}
.titre {
font-size: 50px;
font-weight: bold;
}
.center {
text-align: center;
}
.soustitre {
font-size: 35px;
}
h4 {
text-align: center;
}
body {
position: relative;
min-height: 100%;
margin: 0;
padding: 0;
padding-bottom: 20px;
background-color: #CACACA;
}
#content {
}
.img {
width: 95%;
}
#header {
display: inline-block;
margin-bottom: -6px;
width: 100%;
}
.title {
font-size: 23px;
}
#footer {
z-index: 3;
padding: 0;
text-align: center;
display: inline-block;
position: absolute;
bottom: 0;
width: 100%;
}
.button {
padding: 2px 8px;
margin: 8px 8px;
display: inline-block;
color: #ffffff;
font-size: 17px;
cursor: pointer;
background: #999999;
background: linear-gradient(top, #999999 0%, #808080 100%);
background: -moz-linear-gradient(top, #999999 0%, #808080 100%);
background: -webkit-linear-gradient(top, #999999 0%, #808080 100%);
background: -o-linear-gradient(top, #999999 0%, #808080 100%);
border: 1px solid #2B2B2B;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-o-border-radius: 15px;
box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0);
-moz-box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0);
-webkit-box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0);
-o-box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0);
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.50);
}
.button:hover {
background: linear-gradient(top, #b3b3b3 0%, #999999 100%);
background: -moz-linear-gradient(top, #b3b3b3 0%, #999999 100%);
background: -webkit-linear-gradient(top, #b3b3b3 0%, #999999 100%);
background: -o-linear-gradient(top, #b3b3b3 0%, #999999 100%);
}
.button:active{
opacity:0.8;
}
Merci :D
Afficher la suite