Discussion :

[grinder59]

Bonjour,

voilà, je suis en train d'éliminer la mise en forme en tableau de mon application mais je galère à 3 niveaux sur des problèmes d'alignement horizontal :

Problème 1 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
        <li><img src=sep.gif></li>
        <li>Aide</li>
        <li><img src=sep.gif></li>
        <li>Contact</li>
        <li><img src=sep.gif></li>
        <li>Paramètres</li>
        <li><img src=sep.gif></li>
        <li>Fermer ma session</li>

Les images (sep.gif) sont plus hautes que le texte

2. Sur une même ligne, je souhaiterai aligner à gauche un titre et à droite 2 boutons de contrôle (images)

3. Sur une même ligne, pour la navigation, je souhaiterai aligner à gauche le signe inférieur, au milieu un mot et à droite le signe supérieur

Voilà, et j'ai beau faire des div de liste de float de div ul etc etc, outre le fait de compliquer encore plus que la mise en forme en tableau, ça ne marche pas (rien n'est aligné, les fonds ne suivent pas le texte) !!!!!! et ça me saoule !!! alors avant que je mange mon écran, si un internaute averti pouvait m'aider ou au moins m'orienter sur la bonne partie d'un tuto que je ne manquerai pas d'ingurgiter avant de corriger mon merdier ....

Merci beaucoup....

[MasterOfChakhaL]

je ne comprends pas trop ce que tu veux...

ton code ne me parait pas coller à ta question...

sinon, une idées quand même:

les éléments images sont en inline (comme le texte) il s'aligne donc sur la ligne de base (baseline) qui permet de laisser la place pour la queue des lettres qui descendent (p, j, g, q, y )

soit tu passes tes images en bloc (il faudra aussi gérezr la largeur):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#pour_cibler img {display:block;}

soit tu leur dit de s'aligner sur le bas de la ligne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#pour_cibler img {vertical-align:bottom;}

[Candygirl]

Je ne comprends pas trop non plus

D'après le code que tu montres, je suppose que c'est la partie navigation, avec visiblement une image qui sépare (son nom est sep.gif...) les différentes rubriques?
Si c'est ça, les images ne doivent pas faire partie de la liste vu qu'elle ne sont pas un choix de menu en elles-même mais juste de la déco. Il faut donc les mettre en image de fond:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
        <li>Aide</li>
        <li>Contact</li>
        <li>Paramètres</li>
        <li>Fermer ma session</li>
 
 
li {
  background:url(sep.gif) no-repeat center left; /* url à adapter suivant ton arborescence */
  padding: 5px 0 5px 15px; /* en fonction de la taille de ton image */
}

Pour les autres questions les pistes de MasterofCHakhal devraient t'aider (les différentes valeurs de vertical-align) .

[grinder59]

Vous n'avez pas si mal compris que ça... en tous cas vous m'avez bien aidé !!!

merci beaucoup (et pis l'écran à manger, c'est pas terrible !)