à l'aide!!! pb création site internet
manonhtml
Messages postés
5
Statut
Membre
-
anthony -
anthony -
Bonjour à tous,
Dans le cadre d'un cours nous devons créer un site internet mais nous sommes bloquées... c'est pourquoi nous comptons sur vous! Comment mettre des images en vignette pour faire une galerie photo ? (voir image ci-dessus) Et comment faire un cadre transparent sous le texte ? (voir image également)
Merci d'avance, vous nous serez d'une grande aide !!
Voilà ce qu'on a fait:
presentation h1 {
width:783px;
height:372px;
color:white;
font-family:Seravek Regular;
font-size:24px;
margin:40px 50px 30px 70px;
}
.presentation p {
width:550px;
height:180px;
color:white;
font-family:Seravek;
font-size:24px;
margin:40px 50px 30px 70px;
text-align:center;
padding-bottom:70px
}
.right {
width:530px;
height:970px;
float:left;
color:blue;
margin:75px;
padding-bottom:70px;
}
<div class="right">
<div class="presentation">
<h1> Bienvenue à tous sur le site des Gourmets angevins!</h1>
<p>Deux passionnées de la gastronomie vous présentent ici leur sélection de restaurants situés dans la ville où il fait bon vivre. Accompagnées de leurs idées recettes, vous repartirez avec l'envie de manger, qui est, il faut se le dire, toujours un pur plaisirs. </p>
<br style="clear:both;" />
</div>
<div class="left">
<h1>Galerie photos</h1>
<div class="photos">
<a href="DSC_0023.JPG" target="_self"><img src="DSC_0023.jpg" width="100" height="100" border="0" title="cliquez pour agrandir"></a>
<a href="IMG_3363.JPG" target="_self"><img src="IMG_3363.jpg" width="100" height="100" border="0" title="cliquez pour agrandir"></a>
<a href="IMG_3930.JPG" target="_self"><img src="IMG_3930.jpg" width="100" height="100" border="0" title="cliquez pour agrandir"></a>
<a href="Apéro.JPG" target="_self"><img src="Apéro.jpg" width="100" height="100" border="0" title="cliquez pour agrandir"></a>
</div>
</div>
.left {
width:250px;
height:530px;
color:red;
}
.left h1{
width:230px;
height:530;
font-family:Seravek Regular;
font-size:30px;
color:white;
margin:20px 10px 450px 20px
}
.photos {
width:86px;
height:37px;
float:left;
}
1 réponse
-
bonjour,
Pour la galerie d'image en html/css tout dépend ce que vous souhaitez obtenir.
Si on ne voit sur votre qu'une seul vignette puis que vous cliquer sur deux flèches pour avancer à la suivante ou revenir à la précédente.
Ou si vous souhaitez en afficher plusieurs directement dans ce cadre.-
-
-
-
-
Je te montre ça :
<div class="photos">
<ul>
<li>
<a href="#">
<img src="IMG_3363.JPG" alt="IMG_3363.JPG"/>
<strong>Blabla</strong>
</a>
</li>
<li>
<a href="#">
<img src="IMG_3930.JPG" alt="IMG_3930.JPG"/>
<strong>Blabla</strong>
</a>
</li>
<li>
<a href="#">
<img src="Apéro.JPG" alt="Apéro.JPG"/>
<strong>Blabla</strong>
</a>
</li>
<li>
<a href="#">
<img src="DSC_0023.JPG" alt="DSC_00263.JPG"/>
<strong>Blabla</strong>
</a>
</li>
</ul>
</div>
.ul li {
position:relative;
float:left;
width:100px;
height:100px;
padding:10px;
style:none;
}
.ul li:nth-child(4n) {clear:left;}
.ul li a {
display:block;
overflow:hidden;
width:100px;
height:100px;
margin-top:0px;
margin-left:0px;
border:0px solid rgba(0,0,0,0.7);
transition-property:width, height, margin, z-intex, border;
transition-duration:0,4s;
}
ul li a:hover{
position:absolute;
width:200px;height:200px;
margin-top:-56px;margin-left:-56px;
z-index:100;
border:6px solid rgba(0,0,0,0.7);
}
ul li a img{
position:absolute;
width:100px;height:100px;z-index:20;
transition-property:width,height,z-index;
transition-duration:0.4s;
}
ul li a:hover img{
width:200px;height:200px;
z-index:100;
}
Mais déjà merci beaucoup,!
-
