fenneck
Invité
|
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>
|
Auteur 
