Forums Webou.net - Hébergement gratuit et sans publicités avec PHP/MySQL

Programmation => PHP/MySQL - (x)HTML - ... => Discussion démarrée; par: 007phenix le 28 Janvier 2009, 00:18:47



Titre: CSS pour liste a puces
Posté par: 007phenix le 28 Janvier 2009, 00:18:47
Bonsoire,

Je voudrais savoir commen on fait pour diminuer l'avancer de texte dans les listes a puces :

Code:

<h3>titre de la liste</h3>
<ul>
     <li>texte</li>
     <li>texte</li>
     <li>texte</li>
     <li>texte</li>
</ul>


Mercie.




Titre: Re: CSS pour liste a puces
Posté par: K@cem le 28 Janvier 2009, 15:16:57
Salut,
Pour le code html :
Code:
<ul class="test">
     <li>texte</li>
</ul>
Il faut mettre ce code CSS :
Code:
.test {
    padding: 0;
}
++


Titre: Re: CSS pour liste a puces
Posté par: Arkhena le 28 Janvier 2009, 15:23:36
Bonjour,

Il suffit de modifier la valeur de la propriété css "left" pour tes balises <li>. Tu peux mettre une valeur négative pour rapprocher ton texte du marqueur de ta liste ou mettre une valeur positive pour l'éloigner.

Cordialement,

Arkhena


Titre: Re: CSS pour liste a puces
Posté par: 007phenix le 28 Janvier 2009, 22:34:49
Mercie pour  vos reponses,

mais il semblerait que les valeurs négatives (padding: -15;) ne soit pas acceptées par les padding
et la valeur "0" (padding: 0;) crée deja une avancée de a peut pres 1 cm.

Si vous avez d'autres sugestions ?

Mercie,

007phenix.


Titre: Re: CSS pour liste a puces
Posté par: K@cem le 29 Janvier 2009, 19:06:04
mais il semblerait que les valeurs négatives (padding: -15;) ne soit pas acceptées par les padding

Tu l'as testé ?


Titre: Re: CSS pour liste a puces
Posté par: chrmag le 29 Janvier 2009, 19:38:13
En tout cas chez moi le padding: 0 marche (je l'ai meme essaye sous IE).


Titre: Re: CSS pour liste a puces
Posté par: 007phenix le 29 Janvier 2009, 22:31:41
Oui, j'ai essayer mais rien a faire sa ne fonctionne pas.  :'(


Titre: Re: CSS pour liste a puces
Posté par: chrmag le 30 Janvier 2009, 12:07:31
Tu utilises quel navigateur?
Pourrais-tu faire une page de test et donner le lien?


Titre: Re: CSS pour liste a puces
Posté par: 007phenix le 02 Février 2009, 22:41:00
Bonsoire,

desoler pour l'attente.

J'utilise IE mais je verifie generalement mes sites sur Mozilla (c'est le cas pour ce pb).

Et voici un petit lien : http://www.lemondedelafantasy.webou.net (http://www.lemondedelafantasy.webou.net)

J'en profite pour poser une autre question qui n'a pas vraiment de raport:
Je suis en train de crer un autre site et j'ai un tres gros pb de compatibilité IE vs Mozilla : voyer par vous meme.

(http://www.lemondedelafantasy.webou.net/images/IE.JPG)

(http://www.lemondedelafantasy.webou.net/images/Mozilla.JPG)

Mercie d'avance.


Titre: Re: CSS pour liste a puces
Posté par: chrmag le 03 Février 2009, 12:01:06
Je voulais le lien de la page ou ca marche pas, pas les screen shots. Donc, la je peux seulement demander quelle bidouille a tu utilise pour creer tes menus.

PS: Sinon sur ton site, il faut un margin: 0 dans le style .menu_horizontal, car sous mon FF, le menu est decale vers le bas.


Titre: Re: CSS pour liste a puces
Posté par: 007phenix le 03 Février 2009, 16:45:39
Salut,

Pour ce qui est de la marge, ca fonctionne sous FF mais pas sous IE. Mais c'est pas grave, je vais faire autrement.

Si non, voici le code du probleme de compatibilité IE vs FF que j'ai manifiquement illuster par deux grandes et belles photos :

Code:
<div id="menu_horizontal" >

<script type="text/javascript" src="menu.js">
</script>

<ul id="menu">
<li>
<a href="index.php">Accueil</a>
</li>

<li>
<a href="#">Le groupe</a>
<ul>
<li> <a href="histoire.php">Histoire</a> </li>
<li> <a href="#"></a> </li>
</ul>
</li>

<li>
<a href="#">Les scouts</a>
<ul>
<li> <a href="patrouilles.php">Les patrouilles</a></li>
<li> <a href="chefs.php">Les chefs</a> </li>
<li> <a href="camps_scouts.php">Photos des camps</a> </li>
</ul>
</li>

<li>
<a href="#">Les louveteaux</a>
<ul>
<li> <a href="sizaines.php">Les sizaines</a> </li>
<li> <a href="cheftaines.php">Les cheftaines</a> </li>
<li> <a href="camps_louveteaux.php">Photos des camps</a> </li>
</ul>
</li>
<li>
<a href="administratif.php">Administratif</a>
</li>
</ul>

</div>

et le Javascript :

Code:
sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);



Titre: Re: CSS pour liste a puces
Posté par: 007phenix le 04 Février 2009, 15:22:11
Houra !!!!! :D

J'ai trouver le pb :
en faite j'avais inserer deux feuilles de styles et il semblerait que Mozilla FF ne lisait que la première !!!!!  ???
Je sait pas pq ? mais c'est resolu (une seul feuille dorenavant).

Mercie de votre aide.


Titre: Re: CSS pour liste a puces
Posté par: Arkhena le 04 Février 2009, 18:04:16
Pour les styles, les navigateurs appliquent généralement celui qui est déclaré le plus près de la balise à styler...


Titre: Re: CSS pour liste a puces
Posté par: 007phenix le 05 Février 2009, 08:25:19
 
Vouila le code que j'avais mis, IE l'accepte mais FF me prenait en compte que le premier.

Code:
<head>
      <title>Accueil</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link rel="stylesheet" media="screen" type="text/css" title="design_du_site" href="design_du_site.css"/>
      <link rel="stylesheet" media="screen" type="text/css" title="css_menu" href="css_menu.css"/>
</head>