Sujet Précédent Sujet Suivant

Problème d'affichage et d'insertion

Résolu/Fermé
Utilisateur anonyme - 8 déc. 2013 à 20:39
 Utilisateur anonyme - 10 déc. 2013 à 10:28
Bonjour, pourrais tu regarder mon code car j'ai un problème avec mon mini-slider ya le 1er bouton s'aligne pas a coté des boutons 2 et 3 eux qui sont alignés ensemble.

Mon 2ème problème, j'ai mes onglets ne s'affiches pas correctement entre le logo LAMYCREATION et la galerie.

Et je voudrais insérer la galerie que j'ai créer a la bonne taille pour qu'elle rentre dans le cadre que j'ai fait. Merci !

MINI-Slider



 Code 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 class="menu">
<li><a href="Contact.html">Contact</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="Index.html">Accueil</a></li>
</ul>-->


 <br/>
 
 <header>
<center><h1>Portfolio</h1></center>
</header>
<ul id="main_photo">
  <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>
</ul>
<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>
 

</footer>

                <h2> ® Copyright 2013 LAMY C'reation</h2>
             
			

 
 </body>
 </html>



Code 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 { /*Petite galerie*/
	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 {/*Grande vignette*/
	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;
}





Ma galerie d'image le faire intégrer a la bonne taille dans le cadre





<!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>
            
                

    
    

    
            

            

    

    
    

        A voir également:         
    




    

        
        

                
1 réponse

        

        
    


            

        
        
        

                        Réponse 1 / 1
        


                

                

        

                    

        


     
             

            
    
    

                
            

    


        
        

                

        


     
             

                    animostab
    
        
    
                    Messages postés
            
                


     
             

            2829
        
            
                            Date d'inscription
            jeudi 10 mars 2005
                            Statut
            Membre
                            Dernière intervention
            11 novembre 2019
            

            


     
             

                    737
    
        

                    

                     9 déc. 2013 à 20:03
                        

    


    

                        

                    Bonjour



déjà regarde ton code il y a une grosse erreur



 <div id="Box"</div> 



il faudrait faire



 <div id="Box">

 tout le code qui sera dans la div box

</div>

 

                
                

    
        

    
            
        0
                                
                
    

            



    

        
        
    


        

        

                    

    

        

                    

                    


                
        
    
    

        



    

                    

    
        
    
    

            

    


    
    

                

    Utilisateur anonyme


    

    Modifié par Fenneck901 le 10/12/2013 à 10:29

    






    Bonjour,je l'avais déjà trouvé merci quand même.
    




    
 
    
        
    0

                    
        
    
    

            



    

        
        
    



    

    
            

        

            

        

    



    
Discussions similaires

                                                    

                
                    adele
                    

                        
    
    

            

    


                        

                                                                                    marine carnet-pantier -  

                            
                                                                                    irongege - 
                        

                    

                    

                    

                        2 réponses
                    

                
            

                                                        

                
                    Leboncoin : j'ai un problème d'affichage
                    

                        
    
    

            

    


                        

                                                                                    maria1508 -  

                            
                                                                                    msi123 - 
                        

                    

                    

                    

                        5 réponses