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

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.

MasDan
*****

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

http://projetaum2.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.

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

MasDan
*****

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

http://projetaum2.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.

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

MasDan
*****

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

http://projetaum2.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.

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