Titre: Problème de Slider et d'une Galerie d'image
Posté par: fenneck le le 05-12-2013 a 17:36:47
Bonjour, à tous et à toutes, mon premier problème aligner 3 boutons car j'ai créer un slider.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LAMY C'reation</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="coda-slider-2.0.css" type="text/css" media="screen" />
</head>
<body>
<div id="Box"</div>
<img src="../Documents/logolamy.jpg" alt="lamylogo.jpg"/>
<div class="wrapper">
<div id="article1">
<div id="article2">
<div id="article3"></a></li>
<div class="sliderContainer">
<div class="content">
<div class="item"><img src="logo toucan.jpg" alt="logo toucan.jpeg"/>
</div>
<div class="item"><img src="logo toucan.jpg" alt="logo toucan.jpg"/>
</div>
<div class="item"><img src="logo toucan.jpg" alt="logo toucan.jpg"/>
</div>
</div>
</div>
<a href="#article1">1</a>
</div>
<a href="#article2">2</a>
</div>
<a href="#article3">3</a></div>
<h2> ® Copyright 2013 LAMY C'reation</h2>
</div>
</div>
</body>
</html>
Le CSS: #onglet{
margin: 0;
padding: 0;
list-style: none;
}
#onglet li a { /* modifie la taille des onglets*/
height: 20px;/*largeur*/
width:20px;
float:right;
background: black;
color: #fff;
}
li {
margin: 0px;
list-style:none;
float: right;
font-size: 20px;
}
img {/*modifier la taille du logo LAMY C'retion*/
margin:0px;
height: 150px;/*largeur*/
width:250px; /*longeur*/
margin-left:200px;
margin-right:auto;
}
#Box/*la forme du site rectangulaire*/
{ background:white;
margin:auto;
padding:auto; /*auto centre la page*/
height:616px;
width:650px;
border:1px solid black;
}
h2{ /* Copyright*/
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: 200px;/*descend le bloc vers le bas*/
bottom:40px;
}
/* Du wrapper: ligne 51 à 185 le SLIDER mini-galerie*/
.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;
}
#article1, #article2, #article3, #article4{
overflow:hidden;
background:white;
width:300px;
height:305px;
margin:0 auto;
position:relative;
}
#article1:target .content{
left:-10px;
}
.sliderContainer{
position:relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border:1px solid black; /*contour du slider ou du cadre*/
height:220px;
width:280px;
overflow:hidden;
}
#article2:target .content, #article3:target .content, #article4:target .content{
-webkit-transform: translate(-300px, 0px);
-moz-transform: translate(-300px, 0px);
-o-transform: translate(-300px, 0px);
-ms-transform: translate(-300px, 0px);
transform: translate(-300px, 0px);
}
#article3:target .content{
-webkit-transform: translate(-600px, 0px);
-moz-transform: translate(-600px, 0px);
-o-transform: translate(-600px, 0px);
-ms-transform: translate(-600px, 0px);
transform: translate(-600px, 0px);
}
#article4:target .content{
-webkit-transform: translate(-900px, 0px);
-moz-transform: translate(-900px, 0px);
-o-transform: translate(-900px, 0px);
-ms-transform: translate(-900px, 0px);
transform: translate(-900px, 0px);
}
a{
margin: auto 50px;
color:white;
text-decoration: none;
text-indent:-5000px;
background-color:white;
width:3px;
height:18px;
padding:8px;
padding-top:0px;
-moz-border-radius: 50%;
-webkit-border-radius: 390px;
border-radius: 390px;
}
#article4 a,#article3 a, #article2 a, #article1 a{
width:22px;
height:15px;
padding:8px 0;
padding-top:0px;
-moz-border-radius: 50%;
-webkit-border-radius: 390px;
border-radius: 390px;
position:absolute;
bottom:40px;
left:55px;
}
#article2 a{
position:absolute;
bottom:10px;
left:105px;
}
#article3 a{
position:absolute;
bottom:10px;
left:155px;
}
#article4 a{
position:absolute;
bottom:10px;
left:205px;
}
#article1:target> a, #article2:target> a, #article3:target> a, #article4:target> a{
background:black;
color:black;
}
/*change les cercles ou boutons de couleurs*/
a:hover{
background:blue;
color:white;
}
.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;
}
Le CSS et le meme pour les deux images.
Mon deuxième problème: faire apparaitre les onglets entre le logo et la galerie.
Mon 3ème: Mettre la galerie dans le cadre rectangulaire.le html en dessous.
Le html: <!DOCTYPE html>
<html>
<head>
<title>LAMY C'reation</title>
<meta charset="utf-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/logolamy.jpg" alt="lamylogo.jpg"/>
<ul id="onglet"> <!--Grande Vignette-->
<li><a href="Contact.html">Contact</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="Index.html">Accueil</a></li>
</div>
<center><h1>Portfolio</h1></center>
<ul id="main_photo"><!--Petite Vignette-->
<li><img src="logo toucan.jpg" 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>
<footer>
<div id="thumb_center">
<div id="cadre"> <a href="#0"> <img src="logo toucan.jpg" 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 id="cadre"> <a href="#5"> <img src="img/5.jpg" /></a> </div>
</div>
</footer>
<h2> ® Copyright 2013 LAMY C'reation</h2>
</body>
</html>
|
Titre: Re:Problème de Slider et d'une Galerie d'image
Posté par: gadsi le le 05-12-2013 a 18:40:02
Tu n'as pas un lien pour voir ?
Je ne sais pas si j'ai compris ton besoin, mais apparemment, tu cherches à aligner des zones (div) qui sont parentes ou filles ?
Tu as des position:absolute partout ... c'est bizarrement monté tout ca.
Il faut chercher à avoir un conteneur (un div qui va contenir tes trois boutons) et des éléments filles (d'autres div pourquoi pas) qui vont contenir et te permettent de définir tes boutons. Mais surtout tes 3 boutons doivent être au même niveau html ... du style :
Code:
<div class="conteneur">
<div class="button">Mon lien 1</div>
<div class="button">Mon lien 2</div>
<div class="button">Mon lien 3</div>
</div>
|
|
Tu trouves plein de tuto sur le sujet dans lesquels l'architecture html est plutôt réalisée avec un liste (ul, li ...)
|
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|