Je suis à bout de nerf avec mon css !

Bonjour,

Je suis limite devant la crise de nerf avec mon fichier css...

Le probleme est que je souhaite afficher des puces personnalisées.

Sur la page la, cela fonctionne: http://voilou.fr/test2.php
Par contre sur celle ci cela ne fonctionne pas: http://voilou.fr/test.php

La seule différence dans ces pages est que sur celle ou cela ne marche pas j'ai cette ligne en plus:

<link href="/css/style.css" rel="stylesheet" type="text/css" media="all" />

Avant j'avais

<link href="/css/style.css" rel="stylesheet" type="text/css" />

Mais bref, je ne sais pas pourquo il y a conflit, et je ne trouve pas, je cherche depuis plus de 3 heures !

Le probleme viendrit donc du fichier: http://voilou.fr/css/style.css

SVP aidez moi je suis à bout!!

Salut,

cela vient de ton reset global :

* {
  margin: 0px;
  padding: 0px;
}

qui s'applique en l'occurrence aux éléments UL.

A lire :
* La technique du Reset CSS.
* et en bonus : Cascade CSS et priorité des sélecteurs.

Hello,

L'erreur vient bien de la...

En fait si j'enleve ces 2 lignes, tout fonctionne correctement, j'ai juste mes menu qui se décalent comme vous pouvez le voir sur http://www.voilou.fr

Le menu est composé ainsi:

[code=html] 
<div class="element_menu">
  <div class="imageTitreMenusLeft">
     <div class="textecentre"><h2>JEUX RPG</h2></div>
  </div>
         <div class="block-menu-gauche">
            <ul>
               <li>Lien 1</li>
            </ul>
         </div>
</div>

En css:

[code=css]
.element_menu ul
{
   list-style-image: url(/images/icones/icone-liste-puce.gif); /* On change l'apparence des puces */
   padding-top:6px; /* Placement a l interieur du menu...espace haut */
   padding-bottom:12px;/* et espace bas */
   padding-left:25px;
}

.element_menu li
{
margin-top:5px; /* On crée un espacement de 5px entre chaque lien */
font-weight: bold;
}

.element_menu a
{
   color:#FFD555; /*Tous les textes des menus seront blanc */
   text-decoration:underline; /* ...et souligné */
}

.imageTitreMenusLeft
{
    background-image:  url(/images/design/rubrique-menus.PNG);
    background-repeat: no-repeat;
    height: 26px;
    width: 178px;
    margin-left:6px;
}

#menu-de-gauche
{   
   float: left;
   width: 185px; 
}

.block-menu-gauche /* contours de menus gauche */
{
border-left: 1px solid #5CB3BE;
border-right: 1px solid #5CB3BE;
border-bottom: 1px solid #5CB3BE;
margin-bottom: 8px;
width:176px; /*#055E92 */
margin-left:6px;
/*margin-top:0px;*/
background-image:url(/images/design/fondMenu.jpg);
background-repeat: repeat-x;
}

Y a t il moyen de règler le problème sans les

[code=css]* { 
  margin: 0px; 
  padding: 0px; 
}

Merci

Plop,

puisque tu as supprimé le sélecteur universel * il faut bien sûr redéclarer les valeurs de margin et padding pour les éléments qui ne sont plus ciblés et qui en ont besoin.

Je t'invite à utiliser un outil tel que l'extension Firebug et éventuellement à lire Méthodologie pour résoudre les problèmes d'affichage en CSS.
Modifié par Heyoan (09 Aug 2009 - 10:36)

Bonjour joboy,

Je rajouterai juste ceci :

- Maîtriser Firebug, l'indispensable extension Firefox pour le développement web .