Structurer une liste à puce (CSS)
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Structurer une liste à puce (CSS)
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
Re: Structurer une liste à puce (CSS)
Bonjour,
Par défaut, lors de l'affichage initial, toutes vos balises div sont visibles.
Remplacer le code de vos balises div par ceci
note: ajout de l'attribut style à vos div pour corriger l'affichage initial.
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.
Re: Structurer une liste à puce (CSS)
Bonjour,
Tout d'abord, merci beaucoup pour ton aide? Cela résout déjà un souci
Ensuite, comment faire un menu horizontale avec les <li> et <ul> avec du css ?
Bonne journée.
Tout d'abord, merci beaucoup pour ton aide? Cela résout déjà un souci
Ensuite, comment faire un menu horizontale avec les <li> et <ul> avec du css ?
Bonne journée.
Re: Structurer une liste à puce (CSS)
Bonjour Archimus,
Ajouter ceci à votre CSS
et ceci avant la première div
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 />
Re: Structurer une liste à puce (CSS)
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 Pourquoi ne puis-je pas insérer ce code css entre les balises
Bonne journée.
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 Pourquoi ne puis-je pas insérer ce code css entre les balises
- Code:
<script></script>
Bonne journée.
Re: Structurer une liste à puce (CSS)
Bonjour Archimus,
Il s'agit d'ajouter un id pour limiter le code CSS à la page HTML boutique.
1) remplacer votre balise
2) remplacer le code CSS fournit dans un précédent message par
Il s'agit d'ajouter un id pour limiter le code CSS à la page HTML boutique.
1) remplacer votre balise
- Code:
<ul>
- 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;
}
Re: Structurer une liste à puce (CSS)
Bonjour,
Un grand merci pour votre aide J'ai réussi à faire des modifications dans votre code pour l'adapter à mes besoins.
Bonne journée.
Un grand merci pour votre aide J'ai réussi à faire des modifications dans votre code pour l'adapter à mes besoins.
Bonne journée.
Sujets similaires
» Problème avec ma liste à puce
» Liste : changer l'image de la puce
» structurer les forums en tableau sous les catégories
» Mettre puce devant sous-catégorie
» Décalage entre l' en-tête et les colonnes ( liste des annonces et liste des sujets )
» Liste : changer l'image de la puce
» structurer les forums en tableau sous les catégories
» Mettre puce devant sous-catégorie
» Décalage entre l' en-tête et les colonnes ( liste des annonces et liste des sujets )
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum