Forum d'entraide PHPFrance

[arthur77]

Bonjour,

voila, aujourd'hui est un jour terrible car j'ai honte de poser cette question Eh oui les malheureux <li> d'une liste se décalent à chaque fois sur leur droite, malrés toutes mes tentatives de CSS !

Une capture d'écran :



Le CSS qui intervient dans cette zone :

Tout sélectionner

#menu, #menu ul /* Liste */     
 {         position: relative;
          float: right;
          padding : 0;
          margin : 0;
        text-align: right;
          list-style : none;
          line-height : 21px;
          text-align : center;
 }
 

 #menu /* Ensemble du menu */
 {
         font-weight : bold;
         font-family : Arial;
         font-size : 12px;
 }

 #menu a /* Contenu des listes */
 {
         padding : 0;
         background : #fff;         
         color : #000;
         text-decoration : none;
         width : 144px;
 }

 #menu li /* Elements des listes */     
 {
         float : left;
         /* pour IE qui ne reconnaît pas "transparent" */
         border-right : 1px solid #fff;
 }

 /* IE ne reconnaissant pas le sélecteur ">" */
 html>body #menu li
 {
         border-right: 1px solid transparent ;
 }

 #menu li ul /* Sous-listes */
 {
         position: absolute;
         width: 144px;
         left: -999em;
 }


 #menu li ul li /* Éléments de sous-listes */
 {
         /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
         border-top : 1px solid #fff;
 }

 /* IE ne reconnaissant pas le sélecteur ">" */
 html>body #menu li ul li               
 {
         border-top : 1px solid transparent;
 }

 #menu li ul ul
 {
         margin    : -22px 0 0 144px ; 
         /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
         border-left     : 1px solid #fff ; 
 }

 /* IE ne reconnaissant pas le sélecteur ">" */
 html>body #menu li ul ul               
 {
         border-left     : 1px solid transparent ;
 }

 #menu a:hover /* Lorsque la souris passe sur un des liens */   
 {
         color: #194898;
         background: #fff;
 }

 #menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
 {
         left: -999em;
 }

 #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
 {
         left: auto;
         min-height: 0;
 }

Et le HTML de cette liste :

Syntaxe: [ Télécharger ] [ Masquer ]

Syntaxe: [ Télécharger ] [ Afficher ]

Code html

<ul id="menu" >
       
                        <li>a</li>
                        <li>b</li>
                        <li>c</li>
                        <li>
                        d
                        <ul>   
                                <?php
                                //recuperation des notifs de l'user
                                $sql = 'SELECT * FROM notifications WHERE id_user='.$_SESSION['id'].' ORDER BY timestamp DESC LIMIT 0, 10';
                                $reqf = $connexion->query($sql);
                                $reqf->setFetchMode(PDO::FETCH_OBJ);
                                        while ($dataf = $reqf->fetch())
                                                {
                                                echo '<li><a href="'.$dataf->lien.'" >'.$dataf->texte.'</a></li><br />';
                                                }
                                ?>
                        </ul>
                        </li>

Je m'en remet à vos âmes charitables, merci !

[momox]

Pas besoin d'un
après un <li>

[arthur77]

Désolé ton message n'est pas bien passé je ne vois pas ce dont il n'y a pas besoin justement

[momox]

Syntaxe: [ Télécharger ] [ Masquer ]

Syntaxe: [ Télécharger ] [ Afficher ]

Code html

<br />

J'ai oublié de mettre les balises...
Tu as mis un saut de ligne après ton li dans ta boucle.

[arthur77]

Maintenant tous les liens sont collés sur une seule ligne ...

[momox]

Parces que tu appliques un float à tous les li contenus dans ton ul#menu
Soit tu utilises le selecteur d'ascendant direct ">", soit tu définis une classe pour les elements de ton menu, que les li de tes notifications n'auront pas.

[arthur77]

Je suis désolé mais je ne m'y connais presque pas en CSS (d'habitude c'est mon designer qui s'en occupe) et je ne vois pas trop comment faire ...

[momox]

Lis le tutoriel css du site du zéro, ca va t'aider.

[arthur77]

Une classe comme tu as dit et un "clear: both;" dessus et le tour est joué, merci