Sujet Précédent Sujet Suivant

Les images de ma galerie s'affiche mal

Fermé
Utilisateur anonyme - 29 nov. 2013 à 11:16
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 29 nov. 2013 à 13:56
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;
}

1 réponse

Réponse 1 / 1
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 29/11/2013 à 13:57
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
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
Tainavictor -

9 réponses
calcule nombre des pixels "noir" dans un image (noir/blanc)
neji55 -
nath84150 -

3 réponses
Quel fonction faire en b1 par rapport à a1
Aziz -
Frenchie83 -

1 réponse
Dissocier les photos de ma galerie sur Google Photos
BourrinOman83 -
Pierr10 -

9 réponses
Comment enlever le rouge sur la photo svp ?
lucas0909 -
bazfile -

11 réponses