[résolu !] Centrages menu horizontal en boutons

Question

codascii

7 May 2006 à 23:10

Bonjour,

J'ai longtemps hésité à écrire mais ça fait un moment que je suis sur ces problèmes et je n'avance plus...
Il y a quelques semaines, je me suis lancé dans le css mais étant pressé par le temps pour mon projet, j'ai un peu mélangé tableau et css. Le résultat était satisfaisant dans IE mais pas dans Mozilla (le fond des boutons ne changeait pas entièrement de couleur au passage de la souris).

Le code était le suivant :


<html>
<head>
<style type="text/css">
<!--
td.sanslien {
  font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
  background-color:FF6900;
  text-align:center;
  vertical-align:middle;
  width:124px;
  height:27px;
}

td.aveclien {
  background-color:#FF9900;
  text-align:center;
  vertical-align:middle;
  width:124px;
}

a.menuhaut1:link {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; font-weight: bold; text-decoration: none}
a.menuhaut1:visited {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; font-weight: bold; text-decoration: none}
a.menuhaut1:hover {  width:124px; height:27px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; font-weight: bold; text-decoration: none; background-color:#FFCC00;
 padding:6px}


-->
</style>
</head>
<body>
<div align="center">
  <table width="758" border="0" cellpadding="0" cellspacing="2" bgcolor="#FFFFFF">
    <tr> 
      <td class="sanslien">page 1</td>
      <td class="aveclien"><a href="#" class="menuhaut1">lien 2</a></td>
      <td class="aveclien"><a href="#" class="menuhaut1">lien 3</a></td>
      <td class="aveclien"><a href="#" class="menuhaut1">lien 4</a></td>
      <td class="aveclien"><a href="#" class="menuhaut1">lien 5</a></td>
      <td class="aveclien"><a href="#" class="menuhaut1">lien 6</a></td>
    </tr>
    <tr align="center" valign="middle"> 
      <td height="19" colspan="7" valign="top">&nbsp;</td>
    </tr>
  </table>
</div>
<div align="center">
texte de la page...
</div>
</body>
</html>

Maintenant que j'ai le temps, je souhaite reprendre le code et tout faire en css.
Je me trouve confronté à 4 problèmes :
- je ne réussis pas à centrer le texte verticalement dans les boutons, visiblement la commande vertical-align: middle; ne fonctionne pas dans un block ;
- mon menu complet n'est plus centré sur la page alors que j'ai utilisé la commande <div align="center"> ;
- mon block sans lien n'est pas aligné avec les autres blocks ;
- le texte de la page n'est pas centré en dessous du menu mais se retrouve sur la même ligne...

Mon code :


<html>
<head>
<style type="text/css">
<!--
ul {
list-style-type: none;
}
.menuhaut li {
float: left;
}
.menuhautsanslien li {
float: left;
}
.menuhaut a {
font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 2px;
width: 124px;
height: 27px;
display: block;
text-align: center;
vertical-align: middle;
text-decoration: none;
color: #FFFFFF;
background: #FF9900;
}
.menuhaut a:hover {
background: #FFCC00;
}
.menuhautsanslien {
font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 2px;
width: 124px;
height: 27px;
display: block;
text-align: center;
vertical-align: middle;
color: #FFFFFF;
background: #FF6900;
}

-->
</style>
</head>
<body>
<div align="center"> 
  <ul class="menuhautsanslien">
    <li>page 1</li>
  </ul>
  <ul class="menuhaut">
    <li><a href="#">lien 2</a></li>
    <li><a href="#">lien 3</a></li>
    <li><a href="#">lien 4</a></li>
  </ul>
</div>
<div align="center"> texte de la page... </div>
</body>
</html>

Merci d'avance pour vos réponses !
Modifié par codascii (10 May 2006 - 17:10)

blue

8 May 2006 à 13:00

Bonjour codascii,

Voici ce que j'ai apporté comme modifications à ta page :

Tout d'abord, j'ai "regroupé" ton menu sans lien avec les autres dans le css et le html, soit :
css


.menuhaut a, .menuhautsanslien {
font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 2px;
width: 124px;
height: 27px;
display: block;
text-align: center;
vertical-align: middle;
text-decoration: none;
color: #FFFFFF;
background: #FF9900;
}
.menuhautsanslien {
background: #FF6900;
}

html


  <ul class="menuhaut">
    <li class="menuhautsanslien">lien 1</li>
    <li><a href="#">lien 2</a></li>
    <li><a href="#">lien 3</a></li>
    <li><a href="#">lien 4</a></li>
  </ul>

Ce qui a permis de le mettre sur la même ligne et de réduire ton css.

Ensuite, pour centrer en hauteur le texte du menu, j'ai remplacé :


vertical-align: middle;

par :


line-height: 27px;

(lire si tu veux : http://forum.alsacreations.com/faq/#item3)

Puis, pour faire descendre le texte de ta page en dessous du menu, j'ai rajouté au css :


#page {
clear: both;
text-align: center;
}

et au html :


<div id="page"> texte de la page... </div>

Après, pour centrer ton menu, j'ai rajouté dans le css :


#menuhaut {
width: 514px;
margin-left: auto;
margin-right: auto;
}

Pour finir, j'ai rajouté :


margin: 0;
padding: 0;

à :


ul {
list-style-type: none;
}

afin d'éviter les espaces autour de ton menu sous IE et Opéra.

codascii

8 May 2006 à 19:05

Bonjour Blue,

Merci pour tes réponses efficaces !

J'ai appris le css à travers OpenWeb, AlsaCréations et le livre Compétence Micro, CSS, le web avec du style. Je pense acheter le livre de Raphaël Goetter pour structurer mes connaissances...
J'apprécie ce forum dans lequel les réponses sont pertinentes. Je ne connaissais pas la page http://forum.alsacreations.com/faq/#item3, c'est vrai que c'est une véritable mine !

Il me reste un détail à résoudre... Mon menu est bien centré dans Mozilla... Et c'est très bien Smiley smile

mais pas dans IE... Je cherche de mon côté aussi et dès que c'est fait, je viens écrire la réponse.


<html>
<head>
<style type="text/css">
<!--

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#page {
clear: both;
text-align: center;
}

.menuhaut li {
float: left;
}
.menuhautsanslien li {
float: left;
}

#menuhaut {
width: 758px;
margin-left: auto;
margin-right: auto;
}

.menuhaut a, .menuhautsanslien {
font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 2px;
width: 124px;
height: 27px;
display: block;
text-align: center;
line-height: 27px;
text-decoration: none;
color: #FFFFFF;
background: #FF9900;
}
.menuhautsanslien {
background: #FF6900;
}
.menuhaut a:hover {
background: #FFCC00;
}
-->
</style>
</head>
<body>
<div id="menuhaut"> 
  <ul class="menuhaut">
    <li class="menuhautsanslien">page 1</li>
    <li><a href="#">lien 2</a></li>
    <li><a href="#">lien 3</a></li>
    <li><a href="#">lien 4</a></li>
  </ul>
</div>
<div id="page"> texte de la page </div>
</body>
</html>

Merci encore,
Thierry

blue

9 May 2006 à 13:01

Bonjour Thierry,

C'est normal que ton menu ne soit pas centré, car tu lui a donné une largeur de 758px, hors, il fait 514px.

Tu peux lire si tu veux : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS
Smiley cligne

codascii

10 May 2006 à 09:43

Bonjour Blue,

la largeur ne change rien et j'avais lu cette page sur alsacreation, j'avais même choisi la dernière solution avec les marges négatives mais le résultat est le même.
J'ai l'impression que le code :


.menuhaut li {
float: left;
}

prime sur le centrage de la page dans IE mais pas dans Mozilla...
En fait il ne manque plus grand chose, j'essaie plein de solutions, j'ai parfois des résultats surprenants !
Je continue de chercher...

blue

10 May 2006 à 12:29

Bonjour codascii,

Je crois savoir ce qu'il se passe.

Tu n'as pas du mettre de DOCTYPE à ta page.

Ce sujet t'aidera Smiley cligne

codascii

10 May 2006 à 17:09

Bonjour Blue,

Merci pour ton aide précieuse !!!
Je n'aurais pas trouvé tout seul !

Pour ceux que ça intéresse voici mon code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<style type="text/css">
<!--

#centrer {
width: 514px;
margin-left: auto;
margin-right: auto;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.menuhaut li {
float: left;
}
.menuhautsanslien li {
float: left;
}

.menuhaut a, .menuhautsanslien {
font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 2px;
width: 124px;
height: 27px;
display: block;
text-align: center;
line-height: 27px;
text-decoration: none;
color: #FFFFFF;
background: #FF9900;
}
.menuhautsanslien {
background: #FF6900;
}
.menuhaut a:hover {
background: #FFCC00;
}
-->
</style>
</head>
<body>
<div id="centrer">
<div>
  <ul class="menuhaut">
    <li class="menuhautsanslien">page 1</li>
    <li><a href="#">lien 2</a></li>
    <li><a href="#">lien 3</a></li>
    <li><a href="#">lien 4</a></li>
  </ul>
</div>
<div>
texte de la page
</div>
</div>
</body>
</html>

Merci encore !
Thierry

codascii

10 May 2006 à 19:15

C'est encore moi Smiley smile

Juste une question, comment as-tu calculé 514px ? Moi j'avais calculé 4x124 + 4*2*2 = 512px...

Bonne soirée

blue

10 May 2006 à 19:56

J'ai vu que ça passait pas à 512, ni a 513, donc j'ai mis 514 Smiley lol

codascii

10 May 2006 à 20:57

ça c'est un calcul qui me plait bien Smiley err

Sujet clos