Probleme de "puce"

[XHTML/CSS]

Sujet résolu

24 juillet 2006 à 20:47:54

Bonjour à tous,
Alors j'écrit mon 1er message concernant la création de site internet. J'ai étudié les cours du SdZ jusq'au TP "Créons le design de votre site web". Avec les connaissances apprises avant, j'ai commencer à faire mon site mais un petit probleme survient au niveau des puces du menu. Enfaite, ce n'est pas un probleme car j'arrive à faire ce que je veux mais le code CSS est super lourd.
Le but est de pourvoir avoir des puces differentes pour chaque onglet tout en gardant les mises en forme pour les liens des puces (a; a:hover etc...).
Le seul moyen que j'ai trouver est d'avoir ceci:
dans le index.html:

<div id="menu">
<div class="element_menu0">
<ul>
<li><a href="index.html">Accueil</a></li>
</ul>
</div>

<div class="element_menu1">
<ul>
<li><a href="zik.html">La musique que j'aime</a></li>
</ul>
</div>

etc....
et dans le CSS:

/********** element du menu N°0 : accueil ******************/
.element_menu0
{
border: none; /*Sans bordure */
margin-bottom: 20px; /* Pour ne pas coller les sous menus */
}

/* Concerne la puces du sous menu */
.element_menu0 ul
{
list-style-image: url("../images/bouteille_bleue.png");
padding: 0px;
padding-left: 20px;
margin: 0px; /* Tout les marges sont à 0 PUIS */
margin-bottom: 5px; /* La marge du bas est à 5px */
}

/* Concerne les liens */
/* A l'affichage */
.element_menu0 a
{
color: green;
}

/* Au passage de la souris */
.element_menu0 a:hover /* Lorsque l'on pointe dessus */
{
color:red;
}
/**********FIN element du menu N°0 : accueil ******************/

/********** element du menu N°1 : accueil ******************/
.element_menu1
{
border: none; /*Sans bordure */
margin-bottom: 20px; /* Pour ne pas coller les sous menus */
}

/* Concerne la puces du sous menu */
.element_menu1 ul
{
list-style-image: url("../images/musi.gif");
padding: 0px;
padding-left: 20px;
margin: 0px; /* Tout les marges sont à 0 PUIS */
margin-bottom: 5px; /* La marge du bas est à 5px */
}

/* Concerne les liens */
/* A l'affichage */
.element_menu1 a
{
color: green;
}

/* Au passage de la souris */
.element_menu1 a:hover /* Lorsque l'on pointe dessus */
{
color:red;
}
/********** FIN element du menu N°1 ******************/

donc c'est exactement la même chose sauf l'image de la puce et sa alourdit beaucoup trop le CSS.
J'ai essayé de mettre une insertion d'image dans le index.html mais l'image se retrouve au dessus de la puce "par defaut".
Je n'ai pas encore étudier la suite des cours mais si la réponse est dedans, je m'en excuse. J'ai effectué des recherches sur le site mais je n'ai pas trouver de reponses precises à ma question.
J'espere que j'ai étais assez clair dans mes explications.
Merci de votre aide!!!
Long vie au site

Deeder

24 juillet 2006 à 20:54:30

Bonjour et bienvenue à toi.

Ce forum a des règles, il est ainsi demandé de faire des titres explicites, et d'utiliser les balises de mise en forme telles que <code> afin de rentre ce topic plus lisible.

Personnellement je ne sais pas me concentrer sur un code qui n'est pas mis en forme. N'y vois aucune persécution, il s'agit juste ici de règles communes à tous pour la clareté du forum. En les respectant, tu auras de l'aide plus rapidement et plus ciblée.

W0lf

24 juillet 2006 à 20:58:00

JE suis désolé

J'ai mis les balises codes mais j'arrive pas à changer mon titre car je me suis trompé, je voulais faire apparaitre "probleme de puce" en gros et non en sous titre....

Deeder

24 juillet 2006 à 21:02:31

Tu peux faire ainsi :

.element_menu0, element_menu1
{
border: none; /*Sans bordure */
margin-bottom: 20px; /* Pour ne pas coller les sous menus */
}

/* Concerne la puces du sous menu */
.element_menu0 ul, element_menu1 ul
{

padding: 0px;
padding-left: 20px;
margin: 0px; /* Tout les marges sont à 0 PUIS */
margin-bottom: 5px; /* La marge du bas est à 5px */
}

.element_menu0 ul
{
list-style-image: url("../images/bouteille_bleue.png");
}
.element_menu1 ul
{
list-style-image: url("../images/musi.gif");
}

/* Concerne les liens */
/* A l'affichage */
.element_menu0 a, .element_menu1 a
{
color: green;
}

/* Au passage de la souris */
.element_menu0 a:hover, .element_menu1 a:hover /* Lorsque l'on pointe dessus */
{
color:red;
}

Le poids du code est ainsi presque divisé par deux, par le simple fait de regrouper les styles identiques.
Le fait d'avoir une feuille de style lourde importe peu, car elle n'est chargée qu'une seule fois, puis elle est mise en cache par le navigateur. Il faut simplement regrouper les styles identiques au possibles pour éviter qu'elle fasse une taille trop exagérée tout de même.

EDIT : tu ne peux pas modifier ton titre toi même, je viens de le faire. Ce n'est pas bien grâve tant que tu ne recommences pas à chaque post comme certains...

W0lf

24 juillet 2006 à 21:34:43

Si j'y reflechi bien, je ne crois pas l'avoir lu dans les tutos jusqu'a maintenant.
En tout cas, merci de ta réponse rapide. Je viens d'essayer et sa marche

Et désolé pour les balises oubliées...
Merci et bonne nuit

Probleme de "puce"

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Probleme de "puce"

[XHTML/CSS]

Probleme de "puce"

Supprimer

Modérer

Signaler le message aux modérateurs