[Résolu] Centrer menu

Bonjour à tous! Etant stagiaire dans une ASBL je me retrouve à mettre à jour leur site internet :

EDITION Nouveau post ouvert

- Parce que je le veux bien
- Au moins je fais quelque chose d'autres que du listing

Après quelques essais j'ai finalement trouvé quelque chose que j'apprécie au niveau design et ergonomie, le site en lui-même est loin d'être finit mais la mise en page est plus ou moins exacte

Hormis un petit détail (deux pour être exact!)

1/ Je ne parviens pas à placer mon menu au centre de ma page web, alors que dans dreamweaver elle se trouve au bon endroit...

Photos!

http://www.noelshack.com/uploads/images/12839556005991_no_decal.jpg
Au chargement pas de décalage

http://www.noelshack.com/uploads/images/8699175305469_decale.jpg
Page chargée.... décalage de quelques cm

Le menu utilise du code css & jquery (celui-ci se trouve dans ma deuxième question )

@import url(../styles/reset.css);
		
@import url(http://fonts.googleapis.com/css?family=Lobster);

#menu {
	width: 1040px;
}

#nav, #nav ul{position:relative;margin:40px auto;padding:0;font-family:'Lobster', Arial, Helvetica, sans-serif;font-size:21px;width: auto;}
#nav, #nav ul{
	padding:0;
	list-style-type:none;
	list-style-position:outside;
	position:relative;
	line-height:1.5em;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	visibility: visible;
	width: 1040px;
}
#nav a{text-decoration:none; color:#e85412; display:block; padding:10px 15px;}
#nav li{float:left;	margin:5px 10px 5px 0;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background-color: #303030;}
#nav ul {position:absolute;display:none;width:5.94em;top:-1em;}
#nav li ul a{text-align:center;font-size:0.75em; width:6em; height:1.5em;float:left;}
#nav ul ul{top:auto;}	
#nav li ul ul {left: 12em; margin: 0px 0 0 10px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{display:none;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{display:block;}

<section id="menu">
<ul id="nav" name="nav">
	<li><a href="activites.html">Actualités</a></li>
     <li><a href="asbl.html">Présentation ASBL</a></li>
     <li><a href="contact.php">Contact</a></li>
     <li><a href="artistes.html">Artistes</a></li>
     <li><a href="partenaires.html">Partenaires</a></li>
      <li><a href="#">Infos Pratiques</a>
	<ul>
	  <li><a href="manger.html">Où Manger?</a></li>
	  <li><a href="dormir.html">Où Dormir?</a></li>
	  <li><a href="covoiturage.html">Co-voiturage</a></li>
	 </ul>
     </li>
     <li><a href="#">Médias</a>
     <ul>
     <li><a href="photos.html">Photos</a></li>
	 <li><a href="videos.html">Vidéos</a></li>
     </ul>
     </li>
</ul>
</section>

Je centre tout simplement ma section et celà devrait logiquement fonctionner... la preuve quand la page se charge le menu est bien placé, une fois chargée il se décale à gauche

Charger le site en question

Deuxième question, mon menu utilisant jquerry ne peut se situer au dessus d'un autre élément car si j'ouvre un de mes menus coulissants (Images / infos pratiques) une partie de ces menus disparait derrière le contenu et devient incliquable

J'ai cherché une bonne partie de la nuit et de la journée et je ne trouve vraiment pas mon erreur, un peu d'aide serait la bienvenue

<script>
$(document).ready(function(){
    $nav_li=$("#nav li");
    $nav_li_a=$("#nav li a");
    var animSpeed=450; //fade speed
    var hoverTextColor="#fff"; //text color on mouse over
    var hoverBackgroundColor="#e85412"; //background color on mouse over
    var textColor=$nav_li_a.css("color");
    var backgroundColor=$nav_li.css("background-color");
    //text color animation
    $nav_li_a.hover(function() {
        var $this=$(this);
        $this.stop().animate({ color: hoverTextColor }, animSpeed);
    },function() {
        var $this=$(this);
        $this.stop().animate({ color: textColor }, animSpeed);
    });
    //background color animation
    $nav_li.hover(function() {
        var $this=$(this);
        $this.stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed);
    },function() {
        var $this=$(this);
        $this.stop().animate({ backgroundColor: backgroundColor }, animSpeed);
    });
});
</script>

PS: Je n'ai jamais touché au HTML/CSS/Javascript avant la fin de semaine passée, soyez indulgents

Merci à ceux désireux de m'aider et bonne soirée
Modifié par khios (11 May 2011 - 14:54)

il me semble que ceci résoudra ton problème

#menu { 
    width: 1040px; 
	margin:0 auto;
} 

waik a écrit :
il me semble que ceci résoudra ton problème

#menu { 
    width: 1040px; 
	margin:0 auto;
} 

Merci, mais j'avais déjà testé et hélàs non

Je vais tenter de prendre un screen au chargement de la page pour vous montrer

EDIT: Opening Post mis à jour!
Modifié par khios (10 May 2011 - 19:17)

Bonjour,

En fait, les éléments de ton menu étant flottant, ils ne peuvent être centré. L'élément ul, lui est centré dans la page.

Il y a plusieurs solutions possible : 1. s'assurer que les éléments de ton menu prennent tout l'espace disponible dans ul (tailles fixes)
2. utiliser un tableau (oui c'est moche)
3. utiliser le rendu table / table-cell (ne fonctionnera pas avec IE < 8, mais la dégradation reste possible (rendu actuel)).

ps. 1024 comme largeur de site, ce n'est pas vraiment une bonne idée. Les visiteurs en résolution 1024 sont encore très nombreux (et avec les mini-pc, je me demande s'ils n'augmentent pas) et auront un ascenseur vertical pas très agréable. Il est préférable, pour les site de largeur fixe, de se limiter à 990px.

bonjour,

Pour centrer juste ul (du premier niveau/parent), il faudrait eliminer width de #nav ul .
puis lui donner
- un display:table; et margin:auto;
ou
- un display:inline-block; avec text-align:center a #menu.

Pour IE7 et moins, c'est en commentaire conditionnel:

#nav ul {zoom:1;display:inline;}
#menu {text-align:center;}

Pour les sous menu qui disparaissent , si ce n'est pas du a du Flash ou des formulaire, un z-index est tout a fait adapter.

Cordialement

Laurie-Anne a écrit :
Bonjour,

En fait, les éléments de ton menu étant flottant, ils ne peuvent être centré. L'élément ul, lui est centré dans la page.

Il y a plusieurs solutions possible : 1. s'assurer que les éléments de ton menu prennent tout l'espace disponible dans ul (tailles fixes)
2. utiliser un tableau (oui c'est moche)
3. utiliser le rendu table / table-cell (ne fonctionnera pas avec IE &lt; 8, mais la dégradation reste possible (rendu actuel)).

ps. 1024 comme largeur de site, ce n'est pas vraiment une bonne idée. Les visiteurs en résolution 1024 sont encore très nombreux (et avec les mini-pc, je me demande s'ils n'augmentent pas) et auront un ascenseur vertical pas très agréable. Il est préférable, pour les site de largeur fixe, de se limiter à 990px.

.....bon, j'ai tester de rentrer tout les éléments au pixel près pour les centrer grâce a l'élément ul eeeeet pas de chance ça rentre toujours pas! Ce qui est le plus étrange c'est que comme montré dans les screens les éléments sont centrés jusqu'à l'exécution du javascript (je pense) mais pas moyen de le prouver...

Pour l'ascenseur horizontal, je n'y vais absolument pas penser... J'utilise généralement des résolutions bien supérieures mais il est vrai que les mini-pc/tablettes se répandent comme une trainée de poudre je repasserai donc le body en 750 pour avoir un peu "d'air" autour de la page!

gc-nomade a écrit :
bonjour,

Pour centrer juste ul (du premier niveau/parent), il faudrait eliminer width de #nav ul .
puis lui donner
- un display:table; et margin:auto;
ou
- un display:inline-block; avec text-align:center a #menu.

Pour IE7 et moins, c'est en commentaire conditionnel:

#nav ul {zoom:1;display:inline;}
#menu {text-align:center;}

Pour les sous menu qui disparaissent , si ce n'est pas du a du Flash ou des formulaire, un z-index est tout a fait adapter.

Cordialement

Merci! Celà a résolu le problème de centrage du menu

Sinon simple question, le fait d'utiliser le html5 et css3 dès le début de son expérience, celà n'est pas handicapant? J'ai encore du mal à comprendre toutes les règles même si je vois clairement la structure d'une page dans ma tête et je pense que ce ne sera pas le dernier site que je ferai en html5

Maintenant testé pour le z-index sur les menus (ils sont en CSS3 & JavaScrip) (gogo tuto ) et mettre à jour le code pour IE

EDIT: Si on pouvait éviter de mettre résolu pour l'instant Je dois encore poser une question sur le menu animé mais je cherche comment la poser sans paraître stupide (autrement dis je regarde d'abord les tutos!)
Modifié par khios (10 May 2011 - 20:00)