28172 sujets

CSS et mise en forme, CSS3

Afficher des petites images dans un cadre

Salut à tous,
ça fait maintenant un petit moment que je galère à mettre en forme une page.
J'essaie de faire apparaitre dans un grand cadre des miniatures se situant juste en dessous intégrées dans un "diaporama".
Le grand cadre et les petits cadres sont "arrondis" et comprennent des ombres, je souhaite que les photos incluent dans ces cadres soient automatiquement adaptées à la taille de ces cadres...
Dans le grand cadre, je souhaite qu'il y ait une image par défaut et qu'au survol des petits cadres du diaporama, elle soit remplacée par ces dernières.
Désolé pour l'explication un peu pourrie, je fais de mon mieux. Je suis un amoureux du CSS, ça fait un moment que je m'y intéresse, pour autant je me rends compte que je suis très loin d'être au top...
Je n'arrive plus à rien, je tourne en rond donc j'en appelle à vos lumières. Le code jusqu'à présent donne ça:

<style type="text/css">
body {
background-image: url(Images/background.jpg);
margin: 0;
}
.arrondie {
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
.arrondie-image {
border-radius: 11px 11px 0px 0px;
-moz-border-radius:11px 11px 0px 0px;
-webkit-border-radius:11px 11px 0px 0px;
border: 1px solid #11c1ed;
}
.arrondie-subimage {
border-radius: 0px 0px 7px 7px;
-moz-border-radius:0px 0px 7px 7px;
-webkit-border-radius: 0px 0px 7px 7px;
border: 1px solid #11c1ed;
}
#bandeau-all {
width: 1100px;
height: 256px;
}
#bandeau-top {
width: 1100px;
height: 206px;
box-shadow: 3px 5px 9px #333333;
-moz-box-shadow: 3px 5px 9px #333333;
-webkit-box-shadow: 3px 5px 9px #333333;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
#container {
position: relative;
width: 1100px;
height: 100%;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
/*** Menu Horizontal ***/
#menu {
height: 50px;
width: 1100px;
padding: 0;
margin: 0;
list-style-type: none;
}
#li {
list-style: none;
float: left;
}
#menu li a {
display: block;
float: left;
width: 275px;
height: 50px;
background-image: linear-gradient(60deg, transparent, white);
line-height: 50px;
text-decoration: none;
text-align: center;
box-shadow: 3px 3px 9px #333333;
-moz-box-shadow: 3px 3px 9px #333333;
-webkit-box-shadow: 3px 3px 9px #333333;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
color: #606060;
font-size: 1.1em;
}
#menu a:hover {
background-image: linear-gradient(60deg, white, transparent);
color: #0000FF;
font-size: 1.3em;
font-style: italic;
}
#diaporama {
width: 752px;
height: 477px;
position: relative;
margin-top: 10px;
}
#cadre {
width: 350px;
Height: 400px;
box-shadow: 3px 3px 9px #333333;
-moz-box-shadow: 3px 3px 9px #333333;
-webkit-box-shadow: 3px 3px 9px #333333;
border-radius: 11px 11px 0px 0px;
-moz-border-radius:11px 11px 0px 0px;
-webkit-border-radius:11px 11px 0px 0px;
border: 1px solid #11c1ed;
}
#diaporama span {
display: none;
}
#diaporama img {
border: none;
}
#diaporama > a img {
width: 65px;
height: 75px;
}
#diaporama span img {
width: 350px;
height: 400px;
}
#diaporama > a:hover span,
#diaporama > a:focus span,
#diaporama > a:active span {
display: inline;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="bandeau-all">
<div id="bandeau-top"><a href="http://stores.ebay.fr/pcroyaume33"><img src="Images/pcroyaume1100-206.jpg" width="100%" class="arrondie" border="0" title="Visitez notre boutique PCRoyaume33 sur Ebay"></a></div>
<ul id="menu">
<li><a href="http://stores.ebay.fr/pcroyaume33/Informatique-/_i.html?_fsub=6345596015&_sid=1196596195&_trksid=p4634.c0.m322">Informatique</a></li>
<li><a href="http://stores.ebay.fr/pcroyaume33/Telephonie-tablettes-/_i.html?_fsub=6350991015&_sid=1196596195&_trksid=p4634.c0.m322">Téléphonie & Tablettes</a></li>
<li><a href="http://stores.ebay.fr/pcroyaume33/Electromenager-/_i.html?_fsub=6350998015&_sid=1196596195&_trksid=p4634.c0.m322">Electroménage&#8203;r</a></li>
<li><a href="http://stores.ebay.fr/pcroyaume33/Jeux-video-consoles-/_i.html?_fsub=6347660015&_sid=1196596195&_trksid=p4634.c0.m322">Jeux vidéo & consoles</a></li>
</ul>
</div>
<div id="diaporama">
<div id="cadre"><img src="Images/moulinex cookeo multicuiseur ce 7011 blanc.jpg;"></div>
<a href="Images/moulinex cookeo multicuiseur ce 7011 blanc2.jpg" class= "arrondie-subimage" onclick="return false;"><img src="Images/moulinex cookeo multicuiseur ce 7011 blanc2.jpg" alt="Image 1" /><span><img src="Images/moulinex cookeo multicuiseur ce 7011 blanc2.jpg" alt="" class="arrondie-image"</span></a>
<a href="Images/moulinex cookeo multicuiseur ce 7011 blanc3.jpg" class= "arrondie-subimage" onclick="return false;"><img src="Images/moulinex cookeo multicuiseur ce 7011 blanc3.jpg" alt="Image 2" /><span><img src="Images/moulinex cookeo multicuiseur ce 7011 blanc3.jpg" alt="" class="arrondie-image"/></span></a>
<a href="Images/moulinex cookeo multicuiseur ce 7011 blanc4.jpg" class= "arrondie-subimage" onclick="return false;"><img src="Images/moulinex cookeo multicuiseur ce 7011 blanc4.jpg" alt="Image 3" /><span><img src="Images/moulinex cookeo multicuiseur ce 7011 blanc4.jpg" alt="" class="arrondie-image"/></span></a>
</div>

Voilà, y a plusieurs trucs qui clochent quelque part, même si dans le fond ça fonctionne à peu près, sur la forme c'est pas terrible.
Merci par avance.
Bonjour,

à la lecture de ton code, je vois plusieurs petites choses :
* en ajoutant les dimensions de ton image par défaut (width et height à ajouter dans ta balise img incluse dans la div cadre) tu auras une image par défaut qui occupera ton grand cadre dans sa totalité.

* dans cette même div cadre, tu as 
<img src="Images/moulinex cookeo multicuiseur ce 7011 blanc.jpg;">
, il me semble que le point virgule est de trop.

* enfin à la ligne juste en dessous, la deuxième balise image n'est pas fermée
<a href="Images/moulinex cookeo multicuiseur ce 7011 blanc2.jpg" class= "arrondie-subimage" onclick="return false;"><img src="Images/moulinex cookeo multicuiseur ce 7011 blanc2.jpg" alt="Image 1" /><span><img src="Images/moulinex cookeo multicuiseur ce 7011 blanc2.jpg" alt="" class="arrondie-image"</span></a>


Voilà, ensuite, je viens de faire les tester et j'ai bien un cadre situé à gauche de ta page. Par défaut, il a une image. Au survol des vignettes situées dessus, l'image du cadre change pour prendre celle de la vignette survolée.

Pour une meilleure finition, rajoute ceci :
Pour avoir les angles arrondis à ton image par défaut, ajoute la classe .arrondie-image à la balise img comme ceci :
<div id="cadre"><img class="arrondie-image" src="http://localhost/testcode/img/04.png" width="350" height="400"></div>


Pour les angles de tes vignettes, enlève la classe "arrondie-subimage" de tes liens a et mets la dans la première balise img comme ceci :
<a href="http://localhost/testcode/img/01.png"  onclick="return false;"><img class= "arrondie-subimage" src="http://localhost/testcode/img/01.png" alt="Image 1" /><span><img src="http://localhost/testcode/img/01.png" alt="" class="arrondie-image"/></span></a>


A ce stade, tu verras les images de tes vignettes avec des angles arrondis. La bordure ne s'appliquera pas car tu as mis 
#diaporama img {
border: none;
}

Donc à supprimer si tu veux que les bordures de la classe .arrondie-image s'affiche.

Voilà en espérant t'avoir été utile,
Sujet clos
Aller à