Aligner un texte verticalement dans un menu

je ne sais même pas si je dois expliquer mon problème: tout est dans le titre!

En fait j'ai un menu avec des Ul et Li comme ceci:

<ul class="menu">
  <li><a href="index2.php?page=accueil" class="accueil">Accueil</a></li>
  <li><a href="index2.php?#" class="activite">Notre activité</a></li>
  <li><a href="index2.php?page=sage" class="sage">Sage</a></li>
  <li><a href="index2.php?page=#" class="clipper">Clipper</a></li>
  <li><a href="index2.php?page=authentification" class="espace">Espace Client</a></li>
  <li><a href="index2.php?page=liens" class="liens">Liens utiles</a></li>
</ul>

et je voudrais centrer verticalement mon texte
Dans les tutoriels, il est expliqué comment centrer verticalement un bloc mais là il s'agit d'un lien <a> et je n'y suis pas arrivé.

Je ne met pas ma css pour l'instant si vous la voulez, demandez!
Attention je veux bien sur que le texte reste aligné même en changeant de résolution les cases du menu et le texte le font déjà mais l'alignement ne suit pas!

Bonjour,

Peut-être qu'en forcant l'élément "in-line" LI en "block" à l'aide d'un display:block. Puis en mettant un text-align:center dans ce même élément LI. Ça marcherait ?
Modifié par zzzazzz (26 Aug 2005 - 16:26)

Hello,

Un minimum de recherche est demandé avant de poster un nouveau sujet.
Voici ce que tu cherches : http://forum.alsacreations.com/faq/#item3
On y explique comment aligner un texte (<a>) dans un bloc (<li>).

Et en faisant une recherche (30sec) sur le forum :
http://forum.alsacreations.com/topic.php?fid=4&tid=35
http://forum.alsacreations.com/topic.php?fid=4&tid=1366
http://forum.alsacreations.com/topic.php?fid=4&tid=699
etc.
Modifié par Raphael (26 Aug 2005 - 16:31)

oui c'est vrai Raphael!

Mais si je peux me permettre une critique:
Je ne suis que débutant avec les css (3 mois) et je n'ai pas autant d'expérience et de qualité (en programmation) que toi pour l'instant vu ton CV mais je trouve le site un peu fouilli!
La différence entre Faq et tutoriels pour moi n'est pas très flagrante!
Il faut parfois chercher dans les 2 pour trouver ce que l'on veut et encore si on a le courage de tout lire!

Si je peux me permettre aussi de te conseiller de faire des catégories plus claires.
Je ne suis peut etre pas un pro de l'accesibilité et de la lisibilité mais c'est mon avis et il est important comme tout avis

Et autres choses la fonction recherche, je ne sais pas si c'est moi qui est idiot mais il me met souvent aucun résultat.
je sélectionne le contenu du message et n'importe quand et il me met très souvent aucun résultat.

Quand au sujet du post je vais essayer et je mettrais résolu en temps voulu
Modifié par Pops83 (26 Aug 2005 - 16:58)

Pour revenir à mon problème: ça ne fonctionne pas tout a fait comme je voudrais!
En fait j'utilise line-height: avec un pourcentage parce qu'en fait mes boutons de lenus se réduisent en fonction de la résolution.

Donc déjà je dois mettre un pourcentage de 400% pour que le texte soit centré mais ensuite lorsque je réduis la résolution, il n'est plus centré.

J'ai mis le Line-height dans le UL c'est ça?

Pops83 a écrit :
oMais si je peux me permettre une critique:
Je ne suis que débutant avec les css (3 mois) et je n'ai pas autant d'expérience et de qualité (en programmation) que toi pour l'instant vu ton CV mais je trouve le site un peu fouilli!
La différence entre Faq et tutoriels pour moi n'est pas très flagrante!

Pas de soucis, je suis très ouvert aux critiques
La différence entre les tutoriels et la FAQ est assez simple :
- les tutos sont des articles de fond et traitent un sujet global avec des explications, des illustrations et des exemples en ligne
- la FAQ regroupe simplement les questions les plus fréquemment posées, celles qui reviennent sans cesse sur le forum, et on y répond rapidement tout en laissant des pistes supplémentaires.

Pops83 a écrit :
Il faut parfois chercher dans les 2 pour trouver ce que l'on veut et encore si on a le courage de tout lire!

Oui en effet.
Mais quelle est la meilleure démarche selon toi :
- utiliser le moteur de recherche des tutos et la FAQ, chercher dans les forums ?
- ou poster sa question sans se soucier si elle a déjà été posée maintes fois ?

Personnellement, la 2ème méthode, qui indique clairement qu'on se croit ici dans un fast-food (je ne parle pas pour toi), me déplaît beaucoup.

Pops83 a écrit :
Si je peux me permettre aussi de te conseiller de faire des catégories plus claires.
Je ne suis peut etre pas un pro de l'accesibilité et de la lisibilité mais c'est mon avis et il est important comme tout avis

Cela m'intéresse en effet. De quelles catégories parles-tu ?
Le Plan du site ne te paraît pas assez clair ?
Merci de m'en dire un peu plus.

Pops83 a écrit :
Et autres choses la fonction recherche, je ne sais pas si c'est moi qui est idiot mais il me met souvent aucun résultat.
je sélectionne le contenu du message et n'importe quand et il me met très souvent aucun résultat.

Quelle recherche as-tu fait exactement ?

As-tu bien lu les indications en début de page ? "Faire correspondre le terme exact" sur "A B" fait une recherche sur la présence du terme global "A B" et non de "A" et "B" séparément.

En tout cas, ma recherche avec "alignement vertical" renvoie une 20aine de réponses.

Pops83 a écrit :
Pour revenir à mon problème: ça ne fonctionne pas tout a fait comme je voudrais!
En fait j'utilise line-height: avec un pourcentage parce qu'en fait mes boutons de lenus se réduisent en fonction de la résolution.

Donc déjà je dois mettre un pourcentage de 400% pour que le texte soit centré mais ensuite lorsque je réduis la résolution, il n'est plus centré.

J'ai mis le Line-height dans le UL c'est ça?

Le principe du centrage vertical d'une ligne de texte est assez simple :
- il faut appliquer un line-height égal à la valeur height du conteneur.
- il faut bien sûr éviter les données qui provoquent des soucis de modèles de boite (padding et border) sur ce même conteneur.

pour le sujet pricipal, je vais tester ça lundi mais est ce que le line-height peut recevoir un % car ma hauteur de conteneur est en %



Pour les catégories du FAQ, moi j'aurais choisi des thèmes plus généraux (Texte,Image,Mise en page,technique,accesibilité,outils,...)
Pour ensuite pourquoi pas rediviser en sous-catégories.
Ou même pourquoi pas faire une liste de balises <div> <a> <b> etc et en cliquant dessus on a les tuto et faq correspondant.

Car moi personnellement (vu mon niveau) je sais comment il faut faire, la méthode, les balises à utiliser mais pas forcément les petits astuces, les propriétés "cachées",...

Parce que si on reprend les catégories des tuto:
-Bases et indispensables
-Faire une mise en page sans tableaux
-Construction de menus en css
-divers
-javascript
-php

Si j'ai un problème avec ma css, comment je sais si mon problème fait parti des bases et indispensables?
Si je ne sais pas, c'est que c'est pas indispensable (je joue le candide )

c'est pas un problème de mise en page,ni de menus,c'est pas du javascript ni du php alors je vais voir dans divers:
Et pour moi divers c'est le fourre-tout, le reste!
Donc pour l'instant la liste n'est pas extrémement longue mais quand il y aura plusieurs tutos ce sera illisible!

Voilà c'est mon avis de développeurs et visiteurs de ce site! j'aurais peut etre du te le dire par MP parce que ça fait un peu hors sujet mais bon: tu m'as répondu ici donc je fais de même.

Désolé mais je n'y arrive pas.
D'habitude avec le faq et le forum je résoud mes problèmes mais là...

Donc je vais mettre ma css pour être plus clair:

ul.menu {
list-style-type: none;
margin:0;
padding:0;
margin-top: 24%;
margin-left: auto;
margin-right: auto;
width: 75%;
height:70%;
background-color:transparent;

}

li {
float:left;
width:92%;
height:12%;
margin:0;
padding:0;
background-color:transparent;
font: bold 90%/12% verdana;
}

.menu a {
float: left;
display: block;
padding:0;
background-position:left;
background-color:#2b2b91;
font-size:90%;
text-decoration: none;
text-align:center;
color: #ffffff;
border:2px outset #9499ff;
width:85%;
height:100%;

}

.menu a:visited {

float: left;
display: block;
padding:0;
background-position:left;
background-color:#2b2b91;
font-size:1em;
text-decoration: none;
text-align:center;
color: #ffffff;
border:2px outset #9499ff;
}

.menu a:hover {
color: #19196a;
border:0;
padding:0;
background-position:left;
background-color:#3052a7;
border:2px inset #9499ff;

}

et le xhtml

<ul class="menu">
  <li><a href="index2.php?page=accueil" class="accueil">Accueil</a></li>
  <li><a href="index2.php?#" class="activite">Notre activité</a></li>
  <li><a href="index2.php?page=sage" class="sage">Sage</a></li>
  <li><a href="index2.php?page=#" class="clipper">Clipper</a></li>
  <li><a href="index2.php?page=authentification" class="espace">Espace Client</a></li>
  <li><a href="index2.php?page=liens" class="liens">Liens utiles</a></li>
</ul>

Mon texte est toujours pas aligné.
Est-ce que line-height fonctionne avec des pourcentages?
est-ce que je le met dans la bonne balise <li>?