à l'aide!!! pb création site internet
manonhtml
Messages postés
5
Date d'inscription
Statut
Membre
Dernière intervention
-
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;
}
A voir également:
- à l'aide!!! pb création site internet
- Création site internet - Guide
- Site comme coco - Accueil - Réseaux sociaux
- Site de telechargement - Accueil - Outils
- Quel site remplace coco - Accueil - Réseaux sociaux
- Url site internet - Guide
Nous aimerions plutôt plusieurs images dans le cadre (4).
Merci
http://www.css3create.com/Galerie-photo-hover-avec-transition-CSS
Sinon il reste toujours la solution du tableau avec 2 lignes et 2 colonnes mais c'est moins propre et cela s'adapte moins bien aux différents support.
Mais les images apparaissent les unes en dessous des autres, comme si elles était positionner en carte. je dois bouger les marges?
comme ça sans le code complet de la page (html/css) difficile à dire.
<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,!