Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Structurer une liste à puce (CSS)

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Structurer une liste à puce (CSS)

Message par Archimus le Dim 15 Nov 2015 - 8:27

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Plusieurs utilisateurs
Lien du forum : http://toadius-dmh.forumactif.be/

Description du problème

Bonjour,

Je suis occupé à "coder" une page avec plusieurs onglets avec du Jquery. Toutefois, j'ai plusieurs questions concernant le CSS, afin que la liste à puce que j'ai créée, devienne un menu horizontale avec un effet "Hover" (surbrillance lorsqu'on passe la souris sur le bouton). Pouvez-vous m'aider à structurer une feuille CSS pour que cette liste à puce devienne plus jolie.

A côté, j'ai un léger souci, lorsqu'on visualise la première fois la page, les 3 contenus apparaissent. Ai-je fait une erreur quelque part ?

Code:
<script type="text/javascript">
jQuery(document).ready(function(){
        jQuery('.Tabs li').click(function(){
                jQuery('.Tabs li').removeClass('active');
                jQuery(this).addClass('active');
                jQuery(this).find('a');
 return false;
        });
jQuery('a.all_itens').click(function(){
                    jQuery('.abas').hide();
                    jQuery('#abas1').show();
                });
jQuery('a.all_pay').click(function(){
                    jQuery('.abas').hide();
                    jQuery('#abas2').show();
                });
jQuery('a.coffre').click(function(){
                    jQuery('.abas').hide();
                    jQuery('#abas3').show();
                }); 
jQuery('a.packsspéciaux').click(function(){
                    jQuery('.abas').hide();
                    jQuery('#abas4').show();
                });
jQuery('a.panier').click(function(){
                    jQuery('.abas').hide();
                    jQuery('#abas5').show(); 
                });
}); 
</script>



 <ul>
 <li class="active">
 <a href="#" title="Voir tous les articles" class="all_itens">Consommables</a>
 </li>
                <li>
 <a href="#" title="Panier d'achat" class="all_pay">Costumes / Montures</a>
 </li> 
 <li class="active">
 <a href="#" title="coffre" class="coffre">Loterie</a>
 </li> 
                <li>
 <a href="#" title="packsspéciaux" class="packsspéciaux">Packs spéciaux</a>
 </li>
                <li>
 <a href="#" title="panier" class="panier">Conclure la vente</a>
 </li> 
 </ul>

 <div id="abas1" class="abas"> Ceci est un test 1
    </div>
 
  <div id="abas2" class="abas"> Ceci est un test 2
    </div>
 
  <div id="abas3" class="abas"> Ceci est un test 3
    </div>
    <div id="abas4" class="abas"> Ceci est un test 4
    </div>
  <div id="abas5" class="abas"> Ceci est un test 5
    </div>

Bonne journée et merci d'avance.


Dernière édition par Archimus le Mar 17 Nov 2015 - 23:58, édité 1 fois
avatar

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Structurer une liste à puce (CSS)

Message par MasDan le Dim 15 Nov 2015 - 23:07

Bonjour,

Par défaut, lors de l'affichage initial, toutes vos balises div sont visibles.

Remplacer le code de vos balises div par ceci
Code:
  <div id="abas1" class="abas" style="display: block">
    Ceci est un test 1
  </div>
  <div id="abas2" class="abas" style="display: none">
    Ceci est un test 2
  </div>
  <div id="abas3" class="abas" style="display: none">
    Ceci est un test 3
  </div>
  <div id="abas4" class="abas" style="display: none">
    Ceci est un test 4
  </div>
  <div id="abas5" class="abas" style="display: none">
    Ceci est un test 5
  </div>

note: ajout de l'attribut style à vos div pour corriger l'affichage initial.
avatar

MasDan
Aidactif
Aidactif

Masculin
Messages : 1251
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Structurer une liste à puce (CSS)

Message par Archimus le Lun 16 Nov 2015 - 0:23

Bonjour,

Tout d'abord, merci beaucoup pour ton aide? Cela résout déjà un souci Smile

Ensuite, comment faire un menu horizontale avec les <li> et <ul> avec du css ?

Bonne journée.
avatar

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Structurer une liste à puce (CSS)

Message par MasDan le Lun 16 Nov 2015 - 7:55

Bonjour Archimus,

Ajouter ceci à votre CSS
Code:
ul {
  list-style-type: none;
}

li {
  margin-left: 20px;
  float: left;
}

ul li a {
  display: block;
  color: #04b404;
}

ul li a:hover {
 color:#0404b4;
}

et ceci avant la première div
Code:
<br /><br />
avatar

MasDan
Aidactif
Aidactif

Masculin
Messages : 1251
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Structurer une liste à puce (CSS)

Message par Archimus le Lun 16 Nov 2015 - 16:14

Bonjour MaDan,

Un grand merci, cela fonctionne parfaitement, MAIS Cela s'applique aussi sur toutes mes pages HTML. Que puis-je faire pour que cela ne s'applique qu'à la page HTML que j'ai nommé boutique Smile Pourquoi ne puis-je pas insérer ce code css entre les balises
Code:
<script></script>
?

Bonne journée.
avatar

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Structurer une liste à puce (CSS)

Message par MasDan le Mar 17 Nov 2015 - 6:14

Bonjour Archimus,

Il s'agit d'ajouter un id pour limiter le code CSS à la page HTML boutique.


1) remplacer votre balise
Code:
<ul>
par
Code:
<ul id="btq">

2) remplacer le code CSS fournit dans un précédent message par
Code:
ul#btq {
  list-style-type: none;
}

ul#btq li{
  margin-left: 20px;
  float: left;
}

ul#btq li a {
  display: block;
  color: #04b404;
}

ul#btq li a:hover {
 color:#0404b4;
}
avatar

MasDan
Aidactif
Aidactif

Masculin
Messages : 1251
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Structurer une liste à puce (CSS)

Message par Archimus le Mar 17 Nov 2015 - 23:57

Bonjour,

Un grand merci pour votre aide Smile J'ai réussi à faire des modifications dans votre code pour l'adapter à mes besoins.

Bonne journée.
avatar

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum