5549 sujets

Sémantique web et HTML

Problème d’intégration de ma galerie

Bonjour, à toutes et à tous,

Voila, mon problème je veux que les Grandes Vignettes rendre dans le cadre rectangulaire et que les petites vignettes soit en dessous des petites vignettes.

Code HTML: 
<!DOCTYPE html>
<html>
<head>
   <title></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="logo.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>
                
 </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;
}



*les balises de colorisation syntaxique, mangez-en c'est bon Smiley cligne
Modifié par fenneck (28 Apr 2016 - 20:17)
Bonjour,

Alors petite question ... as tu récupéré le fichier css sur un template? ou une page web déjà toute faite?
Je te demande ça parce que déjà si on compare ton html et ton css, il y a des class et id css qu'on ne retrouve pas dans ton html! ex #wrapper, .item ...

Ton id "cadre" est dupliquée dans tes thumbnails... Une class serait plus appropriée.

Une div de type block devrait entourer ta liste #main_photo ,comme pour tes thumbnails. Et pourquoi ne pas utiliser une liste pour ces thumbnails? ce serait plus logique.

Enfin pourquoi appliquer Top:10px; sur tes thumbnails?

C'est un peu en vrac mais ce sont les premières réflexions que je me suis fait en survolant ton code
Bonjour,

En plus des commentaires de Perter-L, ta déclaration de charset me semble curieuse, ta division portant l'identifiant "box" est mal construite, la balise <center> est obsolète, et ton h2, en fin de document, me semble bien seul et arrive comme un cheveu sur la soupe...

Tu ne vas pas de faire beaucoup d'ami en "cross postant" ainsi, et en y mettant si peu de forme (tant sur le respect des règles propres à chaque forum, qu'au niveau de la bienséance)... Smiley ohwell

Bref, aides-toi, le ciel t'aidera comme disait l'autre; présentation du code en bonne et due forme (je l'ai fait pour toi...), fournir une page en ligne pour permettre à ceux qui voudraient te venir en aide, de ne pas se taper le boulot pour toi (en plus d'avoir accès aux images, au reste du code s'il y en a, etc...)

Cdt,
Sylvain
Sujet clos
Aller à