Discussion :

[Lost In Translation]

Coucou,

Sous ce titre à rallonge se cache en fait un petit problème de rien du tout.

Mon menu est constitué de 4 boutons, le fond des boutons est géré par le CSS, sauf que "la taille du bouton" à priori est définie par la taille du texte... et ça me créé un espacement "foireux" alors que le bouton est assez grand pour "tous mots" (de mon menu j'entends... essayez pas d'y caler anticonstitutionnellement )

Mais bon, des visuels valent 100 discours...

Donc voici l'image.


Remarquez donc le grand espacement entre Collection et Histoire

Le code HTML du menu

Code :

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

1
2
3
4
5
6
7
8
9
 
<div id="nav_wrap">
        <ul>
          <li id="active_nav"><a href="index.php"><span class="test">{$Index_Langue}</span></a></li>
          <li ><a href="collection/"><span>{$Collection_Langue}</span></a></li>
          <li ><a href="informations.php"><span>{$Infos_Langue}</span></a></li>
          <li ><a href="contact/"><span>{$Contact_Langue}</span></a></li>
        </ul>
      </div>

Le CSS du menu

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
#nav_wrap
{
  background-image: url("../images/arrow.png");
  background-repeat: no-repeat;
  width: 510px;
  padding-top: 85px;
  padding-left:450px;
}
 
#nav_wrap ul
{
  list-style-type: none;
}
 
#nav_wrap ul li
{
  display: inline;
  float:left;
}
 
#nav_wrap * a
{
  color:white;
  text-decoration:none;
}
 
#nav_wrap * span
{
  background-image: url("../images/fond_bouton_mini.png");
  background-repeat: no-repeat;
  padding: 8px 30px 13px 27px;
}

[c_s_s]

Bonjour,

L'espace à droite de collection est tout simplement dû au padding droit de 30 pixels de ton élément span.

Ca ne se voit que sur collection car le texte est long (on voit bien qu'il dépasse presque du l'image de fond du bouton).

Si tu mets un mot plus court à la place de collection, tu verras qu'il n'y aura plus de problème.

Il faut faire une image de fond plus grande pour tes boutons.

[Lost In Translation]

Ah bah voilà.

Effectivement, en mettant une image plus grande.
En passant le padding-right de 30 à 0 et en mettant un display:block; sur le span, j'ai pu jouer avec width:100px (longueur du bouton) et mettre un text-align:center pour les liens...

et c'est au poil.

Donc merci pour le coup de main car tu avais effectivement raison.

Ca marche sous Moz, Opéra et Safari... et du coup, ça merdouille sous IE. (J'en ai marre de ces compatibilités...). Aurais-tu une idée ? (ou quelqu'un d'autre hein, on est pas exclusif non plus )

Voici le rendu IE.


Et voici la nouvelle version du CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
#nav_wrap
{
  background-image: url("../images/arrow.png");
  background-repeat: no-repeat;
  width: 510px;
  padding-top: 85px;
  padding-left:450px;
}
 
#nav_wrap ul
{
  list-style-type: none;
}
 
#nav_wrap ul li
{
  display: inline;
  float:left;
}
 
#nav_wrap * a
{
  color:white;
  text-decoration:none;
  text-align:center;
}
 
#nav_wrap * span
{
  display:block;
  background-image: url("../images/fond_bouton_mini.png");
  background-repeat: no-repeat;
  padding: 8px 0px 13px 10px;
  width:100px;
}

[Lost In Translation]

Bon j'ai un petit soucis...

Le fait d'avoir fait de mes span des block, ils ne s'affichent plus en ligne mais les uns dessous les autres.

J'ai tenté de remédier à ça en collant un "float:left;" à mes li... et là d'un coup mon diaporama (en dessous du menu) devient un truc miniature qui se colle à droite de mes boutons...

Je vous fais suivre 3 captures...

Image -> pas de float left dans mes menus


CSS du menu

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
#nav_wrap
{
  background-image: url("../images/arrow.png");
  background-repeat: no-repeat;
  width: 510px;
  padding-top: 85px;
  padding-left:450px;
}
 
#nav_wrap ul
{
  list-style-type: none;
}
 
#nav_wrap ul li
{
  display: inline;
}
 
#nav_wrap * a
{
  color:#942165;
  text-decoration:none;
  text-align:center;
}
 
#nav_wrap * span
{
  display:block;
  background-image: url("../images/fond_bouton_mini.png");
  background-repeat: no-repeat;
  padding: 8px 0px 13px 10px;
  width:100px;
}

Image -> ajout du float left pour aligner les menu (ajout de float:left; dans #nav_wrap ul li)



Donc là on voit mon diapora qui s'est réduit et qui s'affiche derrière les boutons... (je suis tenté de dire wft ^^)

Et donc...
Dernière image. Mes span ne sont pas des blocks, et donc pas besoin de float left. Il manque une partie du bouton.



CSS associé

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
#nav_wrap
{
  background-image: url("../images/arrow.png");
  background-repeat: no-repeat;
  width: 510px;
  padding-top: 85px;
  padding-left:450px;
}
 
#nav_wrap ul
{
  list-style-type: none;
}
 
#nav_wrap ul li
{
  display: inline;
  /*float:left;*/
}
 
#nav_wrap * a
{
  color:#942165;
  text-decoration:none;
  text-align:center;
}
 
#nav_wrap * span
{
  /*display:block;*/
  background-image: url("../images/fond_bouton_mini.png");
  background-repeat: no-repeat;
  padding: 8px 0px 13px 10px;
/*   width:100px; */
}

[Bisûnûrs]

Essaie de mettre un clear:both sur ton élément contenant le diaporama.

Ou sinon, un overflow:hidden sur ton ul contenant tes liens.

[Lost In Translation]

Ah bah, là effectivement, ça marche tout de suite mieux.

*/me le note sur son petit calpin

Bon ben comment dire, rapide, précis, clair net et sans bavure...

Merci Bisûnûrs pour le clear et Merci à c_s_s pour le le menu.

Sujet résolu, merci pour tout. (C'est entre autre pourquoi j'adore ce forum, car ça respire la compétence et les gens compétents et ça fait plaisir)