La Communauté Webmaster  forum rss


  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Problème d'affichage html 5 et css3		 « Précédent Suivant »
Pages: [1] Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: Problème d'affichage html 5 et css3  (Lu 3980 fois)
Problème d'affichage html 5 et css3
« sur: le 06-11-2013 a 13:31:30 »
fenneck
Invité

E-Mail
Répondre avec citation

Bonjour, à tous et à toutes.

Mon premier problème: J'ai créer un Slider avec 3 boutons mais les boutons sont pas aligner.


Voici le html :<!DOCTYPE html>

 <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"/>

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

Voici le css: ( utiliser pour les deux images)

#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;
}

Si vous cherchez le css c'est celui qui est juste au-dessus, le même pour la ère et la 2 ème photo.

Faire rentrer la galerie dans le cadre et faire apparaître correctement les onglets entre le logo et la galerie.
Voici l'image:

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

« Dernière Édition: le 05-12-2013 a 17:13:03 par fenneck » Rapporter au modérateur  

Re:Problème d'affichage html 5 et css3
« Répondre #1 sur: le 06-11-2013 a 14:47:12 »
burtgummer
Habitué
***

Hors-Ligne

Messages: 219





Voir le Profil
Répondre avec citation

Bonjour,

vous pourriez expliquer plus en détails ce que vous souhaitez, quels sont vos pbs, ... ?

cdt
Rapporter au modérateur  
Re:Problème d'affichage html 5 et css3
« Répondre #2 sur: le 06-11-2013 a 14:53:07 »
fenneck
Invité

E-Mail
Répondre avec citation

Mon 1 problème c'est que mes onglets (Accueil,Portfolio,Contact) s'affiche pas correctement,ils .Soit sa peut etre le trait entre les onglets et le slider.
Mon 2 ème je voudrais agrandir mon slider en css3 et il m'affiche une image et pas les deux autres.
Rapporter au modérateur  
Re:Problème d'affichage html 5 et css3
« Répondre #3 sur: le 06-11-2013 a 14:55:12 »
burtgummer
Habitué
***

Hors-Ligne

Messages: 219





Voir le Profil
Répondre avec citation

Pouvez-vous donner l'url ou alors le code source des différents fichiers car ceux poster ne sont pas correct ou manquant ?
Rapporter au modérateur  
Re:Problème d'affichage html 5 et css3
« Répondre #4 sur: le 06-11-2013 a 15:18:49 »
fenneck
Invité

E-Mail
Répondre avec citation

Bonjour,
Je suis nouveau, comment on met les balises pour le code ?


Voici le code html:

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

<!-- Veut que la taille du cadre soit pareille en haut en laissant un petit peu blanc-->
<div id="Box"</div>
<img src="../Documents/photo.jpg" alt="photo.jpg"/>
<!-- Onglets en noir text blanc-->
<ul id="onglet">
<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 id="Box"</div>
<img src="../Documents/logolamy.jpg" alt="lamylogo.jpg"/>



<hr style="width: 100%;background-color: black; height: 1px;" />
<br/>
<h2>
<html>
<head>
  <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 class="wrapper">
               
                <div id="article1">
                    <div id="article2">
                        <div id="article3">
                            <div id="article4">
                                <div class="sliderContainer">
                                    <div class="content">
                                        <div class="item"><img src=".jpg" alt="logo toucan.jpg/>
                                        </div>
                                       
                               <div class="item"><img src="../Documentsphoto.jpg" alt="photo.jpg/>
                                        </div>
                                        <div class="item"><img src="http://localhost/monsite/application/images/slideshow/3.jpg" alt="3"/>
                                        </div>
                                        <div class="item"><img src="http://localhost/monsite/application/images/slideshow/4.jpg" alt="4"/>
                                        </div>
                                    </div>
                                </div>
                              <!-- <a href="#article4">4</a>-->
                            </div>
                            <a href="#article3">3</a>
                        </div>
                        <a href="#article2">2</a>
                    </div>
                    <a href="#article1">1</a>
                </div>
</div>
<h2> © Copyright 2013 LAMY C'reation</h2><!--pour faire le logo copyright maintener la touche ALT et taper 0169-->

</body>
</html>


Code css:

hr{
width: 100%;
background-color: black;
height: 1px;

}
.ligne
        {
       
      
        border-width           : 0 0 1px;
        border-style           : solid;
        }
#Box
{ background:white;
margin:auto;
padding:auto; /*auto centre la page*/
height:700px;
width:950px;
border:1px solid black;
}

img {
margin:50px;
height: 200px;/*largeur*/
width:250px; /*longeur*/
margin-left:350px;
margin-right:auto;

}
#onglet{
  margin: 0;
  padding: 0;
  list-style: none;
}


#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;

}

#content-slider { 
    width: 650px; 
    overflow: hidden; 
    height: 300px; 
} 
 
body{
    background:white;
    color:black;
    font-family:Arial, verdana;
    font-size:14px;
   
}
.wrapper{
    margin:20px 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:38px;
    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;
   
}
Rapporter au modérateur  
Re:Problème d'affichage html 5 et css3
« Répondre #5 sur: le 06-11-2013 a 15:24:48 »
burtgummer
Habitué
***

Hors-Ligne

Messages: 219





Voir le Profil
Répondre avec citation

vous avez posté la même chose qu'avant. Il manque du code (la balise html de ce qui est apparement votre 1ère n'est pas fermée par exemple)
vous utilisez deux feuilles de style mais sur votre post vous mettez tous les csss ensemble, ...

Donnez-nous l'url du site si vous souhaitez que l'on voit directement le pb et que qq vous aide

cdt
Rapporter au modérateur  
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 
Logo du forum du webmaster

Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

creation site internet strasbourg