| Problème avec mon menu vertical | |
|
Kawaïpub
{ Membre }
Messages : 169
| Bonjour à tous,
Alors voilà , j'ai actuellement installer le menu horizontal et je les mis en vertical tout
ce passe bien , le problème c'est la largeur du texte qui m'énerve, je voudrais que sa
soit identique pour la taille en largeur si vous voyez ce que je veux dire ?
Merci d'avance | | |
|
| |
Fire-Fly
{ Membre actif }
Messages : 429
| Ça nous prendrait le code de ta PA pour mieux t'aider Mais en bref, c'est que tu dois mettre une largeur, soit cette propriété ci: - Code:
-
width: Xpx;
dans ton CSS | | |
|
| |
Kawaïpub
{ Membre }
Messages : 169
| Coucou, pardon je le mais ou exactement voici mon code de css du menu : - Code:
-
#navigation ul{ list-style-type: none; text-align: center; } #navigation li{ display: inline; text-align: center; margin: 0 10px 0 0; } #navigation li a { padding: 2px 7px 2px 7px; color: #ffffff; background-color: #C1E8F7; border: 1px dotted #ccc; text-decoration: none; } #navigation li a:hover{ background-color: #49B7FC; color: #FFFFFF; } | | |
|
| |
Espeon
Administrateur
Messages : 1819
| Bonsoir !
Voici une version qui devrait te fixer la taille de tes éléments. Au pif j'ai mis 150px, mais tu peux choisir toi-même la taille en fonction de ce qui est nécessaire. Pour cela il suffit de modifier la valeur de width (comme l'a expliqué Fire-Fly) que j'ai mis dans #navigation li a. - Code:
-
#navigation ul{ list-style-type: none; text-align: center; } #navigation li{ display: inline; text-align: center; margin: 0 10px 0 0; } #navigation li a { padding: 2px 7px 2px 7px; color: #ffffff; background-color: #C1E8F7; border: 1px dotted #ccc; text-decoration: none; width: 150px; } #navigation li a:hover{ background-color: #49B7FC; color: #FFFFFF; } | | |
|
| |
Kawaïpub
{ Membre }
Messages : 169
| Bonsoir cela ne marche pas | | |
|
| |
Espeon
Administrateur
Messages : 1819
| J'avais pas vu le display: inline;. Je l'ai changé par un type block, est-ce-que ça donne l'effet recherché ? - Code:
-
#navigation ul{ list-style-type: none; text-align: center; } #navigation li{ display: block; text-align: center; margin: 0 10px 0 0; } #navigation li a { padding: 2px 7px 2px 7px; color: #ffffff; background-color: #C1E8F7; border: 1px dotted #ccc; text-decoration: none; width: 150px; } #navigation li a:hover{ background-color: #49B7FC; color: #FFFFFF; } |
Dernière édition par Espeon le Jeu 24 Fév 2011, 14:39, édité 1 fois | |
|
| |
Fire-Fly
{ Membre actif }
Messages : 429
| Théoriquement, si elle l'id s'applique à une div, le display:block est inutile donc tant qu'à y être, juste l'enlever réglerais le problème , non?
| | |
|
| |
Kawaïpub
{ Membre }
Messages : 169
| Marche pas non plus | | |
|
| |
Fire-Fly
{ Membre actif }
Messages : 429
| |
| |
Espeon
Administrateur
Messages : 1819
| - Fire-Fly a écrit:
- Théoriquement, si elle l'id s'applique à une div, le display:block est inutile donc tant qu'à y être, juste l'enlever réglerais le problème , non?
Normalement oui ^_^ Et effectivement avec le HTML ce serait plus simple pour nous (ne serait-ce-que pour être sûrs de la structure) | | |
|
| |
Kawaïpub
{ Membre }
Messages : 169
| Le html c'est ce que j'ai mis dans mon tableau ? Que vous souhaitez avoir ? | | |
|
| |
Fire-Fly
{ Membre actif }
Messages : 429
| Oui exactement! Si tu pourrais nous le fournir, c'est tout ton codage on serait plus en mesure de voir ce qui ne tourne pas rond | | |
|
| |
Kawaïpub
{ Membre }
Messages : 169
| D'accord le voici : - Code:
-
<tr><td style="text-align: center;" class="row3" colspan="1" rowspan="1" valign="top"><br><div id="navigation"> <ul> <li><a href="Lien">S'inscrire sur le forum </a><br><br> </li><li><a href="Lien">Le Règlement du forum </a><br><br> </li><li><a href="Lien">La Gazette du forum</a><br><br> </li><li><a href="Lien">Rejoindre l'équipe</a><br><br> </li><li><a href="Lien">Présentation</a><br><br> </li><li><a href="Lien">Partenariat</a></li></ul></div><br></td> | | |
|
| |
Fire-Fly
{ Membre actif }
Messages : 429
| - Code:
-
<tr><td align="center" class="row3" colspan="1" rowspan="1" valign="top"><br> <div id="navigation"> <ul> <li><a href="Lien">S'inscrire sur le forum </a></li><br><br> <li><a href="Lien">Le Règlement du forum </a></li><br><br> <li><a href="Lien">La Gazette du forum</a><br><br></li> <li><a href="Lien">Rejoindre l'équipe</a></li><br><br> <li><a href="Lien">Présentation</a></li><br><br> <li><a href="Lien">Partenariat</a></li></ul></div><br></td>
- Code:
-
#navigation ul{ list-style-type: none; text-align: center; }
#navigation li{ display:block; text-align: center; margin: 0 10px 0 0; width:150px; }
#navigation li a { padding: 2px 7px 2px 7px; color: #ffffff; background-color: #C1E8F7; border: 1px dotted #ccc; text-decoration: none; }
#navigation li a:hover{ background-color: #49B7FC; color: #FFFFFF; }
Tient essaie ça, j'ai pas changé beaucoup car je dois quitter mais si Espeon n'est pas passé avant moi, je reviens plus tard! | | |
|
| |
Kawaïpub
{ Membre }
Messages : 169
| Coucou, d'accord je vais voir cela. | | |
|
| |
Espeon
Administrateur
Messages : 1819
| J'ai pas regardé le code de Fire-Fly mais sinon ce code devrait donner la même largeur à tous tes blocs.
En revanche il faudra probablement les écarter du bord, pour ça il faut rajouter un margin-left: Xpx; (avec X plus ou moins grand) dans le #navigation li a (par exemple) pour que ça fonctionne. Voilou ! - Code:
-
#navigation ul{ list-style-type: none; text-align: center; } #navigation li{ text-align: center; margin: 0 10px 0 0; } #navigation li a { display: block; padding: 2px 7px 2px 7px; color: #ffffff; background-color: #C1E8F7; border: 1px dotted #ccc; text-decoration: none; width: 200px; } #navigation li a:hover{ background-color: #49B7FC; color: #FFFFFF; } | | |
|
| |
L
{ Membre actif }
Messages : 867
| Bonsoir
Votre problème est-il toujours d'actualité ? S'il est maintenant résolu,veuillez cocher l'icône résolu en éditant votre premier message.
Merci. | | |
|
| |
Contenu sponsorisé
| |
| |
| Problème avec mon menu vertical | |
|