Les images de ma galerie s'affiche mal
Utilisateur anonyme
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
Bonjour, à toutes et à tous,
voilà mon problème je voudrais que la grande vignette s'intégrer dans le rectangle du site.
Mon 2 ème c'est que les petites vignettes rentre dans le site et en dessous de la grande vignette.
Code HTML: <!DOCTYPE html>
<html>
<head>
<title>LAMY C'reation</title>
<meta charset="tutf-8">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="coda-slider-2.0.css" type="text/css" media="screen" />
</head>
<body>
<div id="Box"</div>
<img src="../Documents/" alt="lamylogo.jpg"/>
<br/>
<header>
<center><h1>Portfolio</h1></center>
</header>
<ul id="main_photo">
<li><img src="" alt="logo toucan.jpg" id="0" /></li>
<li><img src="img/1.jpg" alt="1" id="1" /></li>
<li><img src="img/2.jpg" alt="2" id="2" /></li>
<li><img src="img/3.jpg" alt="3" id="3" /></li>
<li><img src="img/4.jpg" alt="4" id="4" /></li>
<li><img src="img/5.jpg" alt="5" id="5" /></li>
</ul>
<footer>
<div id="thumb_center">
<div id="cadre"> <a href="#0"> <img src="" alt="logo toucan.jpg" /></a> </div>
<div id="cadre"> <a href="#1"> <img src="img/1.jpg" /></a> </div>
<div id="cadre"> <a href="#2"> <img src="img/2.jpg" /></a> </div>
<div id="cadre"> <a href="#3"> <img src="img/3.jpg" /></a> </div>
<div id="cadre"> <a href="#4"> <img src="img/4.jpg"/></a> </div>
</div>
</footer>
<h2> ® Copyright 2013 LAMY C'reation</h2>
</body>
</html>
Code CSS:
img {
margin:0px;
height: 150px;/*largeur*/
width:250px; /*longeur*/
margin-left:200px;
margin-right:auto;
}
/*.menu li{
background:black;
margin:2px;
color:white;
float:right;
}*/
#Box
{ background:white;
margin:auto;
padding:auto; /*auto centre la page*/
height:616px;
width:650px;
border:1px solid black;
}
h2{
color:Silver;
font-style:italic;
font-size: 14px;
top:90px;
}
#content-slider {
width: 650px;
overflow: hidden;
height: 300px;
}
body{
background:white;
color:black;
font-family:Arial, verdana;
font-size:14px;
margin: 80px;/*descend le bloc vers le bas*/
}
.wrapper{
margin:50px auto;
width:350px;
text-align:center;
}
.content{
position:absolute;
background:white;
top:0px;
left:-10px;
height:200px;
width:1200px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
clear:both;
}
.item{
float:left;
width:300px;
height:200px;
position:relative;
}
.item img{
margin:auto;
margin-top:22px;
width:200px;
height:150px;
}
ul#main_photo {
overflow:hidden;
width:550px;
height:950px;
margin:1em auto;
position:relative;
list-style:none;
}
ul#main_photo img {
opacity:0;
width:588px;
height: 200px;
margin:auto;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
ul#main_photo img:target {
opacity:1;
}
footer {
height:95%;
position:fixed;
width:75%;/*longueur*/
bottom:0;
left:0;
}
div#thumb_center {
width:70%;
margin:auto;
text-align:center;
top:10px;
}
div#cadre {
padding:5px;
width: 14%;
text-align:center;
margin:5px;
float:left;
}
div#cadre img {
width: 100%;
opacity:0.7;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
div#cadre img:hover {
opacity:1;
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
padding:0px;
z-index:3;
}
voilà mon problème je voudrais que la grande vignette s'intégrer dans le rectangle du site.
Mon 2 ème c'est que les petites vignettes rentre dans le site et en dessous de la grande vignette.
Code HTML: <!DOCTYPE html>
<html>
<head>
<title>LAMY C'reation</title>
<meta charset="tutf-8">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="coda-slider-2.0.css" type="text/css" media="screen" />
</head>
<body>
<div id="Box"</div>
<img src="../Documents/" alt="lamylogo.jpg"/>
<br/>
<header>
<center><h1>Portfolio</h1></center>
</header>
<ul id="main_photo">
<li><img src="" alt="logo toucan.jpg" id="0" /></li>
<li><img src="img/1.jpg" alt="1" id="1" /></li>
<li><img src="img/2.jpg" alt="2" id="2" /></li>
<li><img src="img/3.jpg" alt="3" id="3" /></li>
<li><img src="img/4.jpg" alt="4" id="4" /></li>
<li><img src="img/5.jpg" alt="5" id="5" /></li>
</ul>
<footer>
<div id="thumb_center">
<div id="cadre"> <a href="#0"> <img src="" alt="logo toucan.jpg" /></a> </div>
<div id="cadre"> <a href="#1"> <img src="img/1.jpg" /></a> </div>
<div id="cadre"> <a href="#2"> <img src="img/2.jpg" /></a> </div>
<div id="cadre"> <a href="#3"> <img src="img/3.jpg" /></a> </div>
<div id="cadre"> <a href="#4"> <img src="img/4.jpg"/></a> </div>
</div>
</footer>
<h2> ® Copyright 2013 LAMY C'reation</h2>
</body>
</html>
Code CSS:
img {
margin:0px;
height: 150px;/*largeur*/
width:250px; /*longeur*/
margin-left:200px;
margin-right:auto;
}
/*.menu li{
background:black;
margin:2px;
color:white;
float:right;
}*/
#Box
{ background:white;
margin:auto;
padding:auto; /*auto centre la page*/
height:616px;
width:650px;
border:1px solid black;
}
h2{
color:Silver;
font-style:italic;
font-size: 14px;
top:90px;
}
#content-slider {
width: 650px;
overflow: hidden;
height: 300px;
}
body{
background:white;
color:black;
font-family:Arial, verdana;
font-size:14px;
margin: 80px;/*descend le bloc vers le bas*/
}
.wrapper{
margin:50px auto;
width:350px;
text-align:center;
}
.content{
position:absolute;
background:white;
top:0px;
left:-10px;
height:200px;
width:1200px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
clear:both;
}
.item{
float:left;
width:300px;
height:200px;
position:relative;
}
.item img{
margin:auto;
margin-top:22px;
width:200px;
height:150px;
}
ul#main_photo {
overflow:hidden;
width:550px;
height:950px;
margin:1em auto;
position:relative;
list-style:none;
}
ul#main_photo img {
opacity:0;
width:588px;
height: 200px;
margin:auto;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
ul#main_photo img:target {
opacity:1;
}
footer {
height:95%;
position:fixed;
width:75%;/*longueur*/
bottom:0;
left:0;
}
div#thumb_center {
width:70%;
margin:auto;
text-align:center;
top:10px;
}
div#cadre {
padding:5px;
width: 14%;
text-align:center;
margin:5px;
float:left;
}
div#cadre img {
width: 100%;
opacity:0.7;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
div#cadre img:hover {
opacity:1;
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
padding:0px;
z-index:3;
}
A voir également:
- Les images de ma galerie s'affiche mal
- Galerie photo en ligne gratuite - Guide
- Des images - Guide
- Le clavier de mon telephone ne s'affiche plus - Guide
- Comment masquer une photo dans la galerie - Guide
- Photos disparues de ma galerie samsung ✓ - Forum Téléphones & tablettes Android
1 réponse
Bonjour
déjà on ne peux pas te répondre car quand tu parle de grande vignette et petite vignette et rectangle du site on ne sat pas a quoi cela correspond au niveau du code donc a préciser nom des images etc car ici on ne joue pas aux devinettes.
Ensuite il y a une grosse erreur de code qui est peut être la cause de ton problème
<div id="Box"</div>
<img src="../Documents/" alt="lamylogo.jpg"/>
la div box n'est pas fermée par > et l'image n'a pas d'extention (jpg png ...) et elle n'est pas imbriquée dans la div box
autre chose
tes div cadre : une id ne doit être mise a une div que si la div est unique dans la page. A la place mets une class
Certaines img src sont vides. Exemple <img src="" alt="logo toucan.jpg" /></a>
une url de la page aurait aidé
Un petit merci vaut mieux qu'une grande ignorance
déjà on ne peux pas te répondre car quand tu parle de grande vignette et petite vignette et rectangle du site on ne sat pas a quoi cela correspond au niveau du code donc a préciser nom des images etc car ici on ne joue pas aux devinettes.
Ensuite il y a une grosse erreur de code qui est peut être la cause de ton problème
<div id="Box"</div>
<img src="../Documents/" alt="lamylogo.jpg"/>
la div box n'est pas fermée par > et l'image n'a pas d'extention (jpg png ...) et elle n'est pas imbriquée dans la div box
autre chose
tes div cadre : une id ne doit être mise a une div que si la div est unique dans la page. A la place mets une class
Certaines img src sont vides. Exemple <img src="" alt="logo toucan.jpg" /></a>
une url de la page aurait aidé
Un petit merci vaut mieux qu'une grande ignorance