Imprimer la Page

Forum-webmaster

Technique - programmation => HTML / CSS / XHTML => Message commencé par: fenneck le le 18-12-2013 a 16:47:56

Titre: Ma Galerie c'est pas integrer dans le cadre
Posté par: fenneck le le 18-12-2013 a 16:47:56

Bonjour, à toutes et à tous,
Mon problème je veux intégrer ma galerie dans le rectangle mais sa m'a tout modifier et sa ne ressemble plus du tout a une galerie.

html:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
   <title>Galerie en Jquery</title>
   <script type="text/javascript" src="jquery-1.6.2.min.js" ></script>
   <link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>

<div id="galerie">
   
   <div id="grande">
      <div id="legende">


      </div>
      <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td height="600" width="600" align="center">
         <img id="grande_img" src="logo toucan.jpg" title="Oiseau"/>
      </td></tr></table>
   </div>
   

   
   <center><div id="vignette">
      <div id="gauche"></div>
      <div id="vignette_wrapper"><ul>
         <li><a href="logo toucan.jpg" title="Oiseau"><img src="logo toucan.jpg" alt="Oiseau"/></a></li>

      </ul></div>
      <div id="droite"></div>
   </div>
   
</div>

   <script type="text/javascript" src="galerie.js" ></script>
</body></html>

CSS:

Code:

body {

margin:auto;
padding:auto;
border:1px solid black;
width:1000px;/*longueur*/
height:800px;/*largeur*/
}
#onglet{
margin: 0;
padding: 0;
list-style: none;
}

h2{
color:Silver;
font-style:italic;
font-size: 14px;

}

#onglet li a {

float:right;
padding: 5px 20px;
margin-left:2px;
background: black;
color: #fff;

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
}

}
li {
margin: 0px;
padding:20px;
list-style:none;
float: right;
font-size: 20px;

}

#banniere img {

width: 450px;/*longueur*/
height: 195px; /*largeur*/
}

}
/* Etape 06 : style de la galerie */
#galerie{

   width:500px;

   background:black;
}
#grande{
   width:100px;
   height:100px;
   text-align:center;


}
#vignette{/*Petite Vignette*/
   width:500px;
   height:82px;
   margin:25px;
   position:relative;
   padding:60px;
}

/* Etape08 : style de la légende */
#legende{
   position:absolute;

   left:0px;
}
#legende_info{
   width:32px;
   height:32px;
   float:left;
}
#legende_texte{
   background-color:black;
   height:32px;
   line-height:32px;
   padding:0px 10px;
   color:white;
   float:left;
   margin-left:10px;
   display:none;
}

/*Etape 10 : style des vignettes*/
#vignette_wrapper{
   width:400px;
   height:82px;
   overflow:hidden;
}
#vignette ul{
   list-style:none;
   width:500px;
}
#vignette img{
   width:150px;
}
#vignette li{
   float:left;
   border:2px solid #373636;
   margin:0px 5px 0px;
   width:77px;
   height:77px;
   overflow:hidden;
}
/*Etape 14 : mise en avant de la vignette cliquée : */
#vignette li.actif{
   border-color:white;
}

/*Etape 11 : style de la navigation*/
#gauche{
   width:27px;
   height:83px;
   background:black url('gauche.gif') no-repeat left 14px;
   position:absolute;
   top:0px;
   left:0px;
   cursor:pointer;
}
#droite{
   width:27px;
   height:83px;
   background:black url('droite.gif') no-repeat right 14px;
   position:absolute;
   top:0px;
   right:0px;
   cursor:pointer;
}
#gauche:hover{
   background-position:left -54px;
}
#droite:hover{
   background-position:right -54px;
}

.slider {
height: 15em;
width: 25em;
   padding: 265px;/*déplace image vers la gauche ou droite
   mais horizontalement*/

}
.slider li { /* c'est ici pour modifie le slider*/
list-style: none;
position: absolute;
   top: 290px;
   border:1px solid black;


}
.slider img {
height: 15em;
width: 25em;
vertical-align: top;

}

.slider input {
display: none;

}
.slider label {
background-color: #111;
bottom: .5em;
cursor: pointer;
display: block;
height: .5em;
position: absolute;
width: .5em;
z-index: 10;

}
.slider li:nth-child(1) label {
left: .5em;

}
.slider li:nth-child(2) label {
left: 2em;
}
.slider li:nth-child(3) label {
left: 3.5em;
}
.slider li:nth-child(4) label {
left: 5em;
}
.slider img {
opacity: 0;
visibility: hidden;

}
.slider li input:checked ~ img {
opacity: 1;
visibility: visible;
z-index: 10;

}

Titre: Re:Ma Galerie c'est pas integrer dans le cadre
Posté par: burtgummer le le 18-12-2013 a 17:57:15

bonjour,

url du site pour voir ce que ça donne à l'heure actuelle ?

Titre: Re:Ma Galerie c'est pas integrer dans le cadre
Posté par: gadsi le le 21-12-2013 a 18:34:43

Oui il faudrait voir.

On peut toutefois noter qu'il est incongru de trouver cette partie

Code:

Au milieu du diapo ... ca arrive entre deux div ? bizarre !

Et ensuite, il n'y a qu'une image dans le slider ? C'est normal ?

Bon courage ...

Titre: Re:Ma Galerie c'est pas integrer dans le cadre
Posté par: fenneck le le 25-12-2013 a 00:21:10

J'ai trouver mon problème, merci de m'avoir aidé !