Centre horizontalement un <ul id="navlist"> [Résolut]

Bonjour à tous , je n'arrive pas à centrer horizontalement un "<ul id="navlist">" j'ai essayé
pas mal de choses :

#navlist {
[b]text-align:center;[/b]
  margin:0 0; 
  padding: 0 0;
  position: absolute;
  top: 162px;
  margin-left: 0;
  font-family: Verdana,sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: normal;
  font-size-adjust: none;
  font-stretch: normal;
}
#navlist li {
[b]text-align:center;[/b]
  border-top: 1px solid gray;
  margin: 0;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  display: inline;
}
#navlist li a {
  border-left: 1em solid #aaaabb;

j'ai pas trouvé d'info spécifique à ça dans "recherche" ( nouveau , peut être mal cherché)
qq'un à une idée ?
Merci d'avance, JP
ps: petits pb avec la selection des mots en gras ( <b></b>)
Modifié par jpr (22 Oct 2008 - 19:01)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Bonjour Modo, j'ai bien utilisé les balises "codes" et " gras" mais elles ne s'affichent pas correctement. Sélection de la zone à coder -> clic sur "code" comme dans tout les forums,
mais il ne se passe rien.
Pour ce qui est de " gras" même scénario mais le résultat est sur la dernière ligne !
(je voulais utiliser <b> sur "text-align:center".
Pense tu que ça vienne de mon navigateur ?
Ou mettre les codes à la main ? plus sur?

jpr a écrit :
Ou mettre les codes à la main ?

C'est en effet plus sûr et pas excessivement compliqué. Je l'ai fait pour ton message ci-dessus mais penses-y pour ton prochain message.

Ok no problème,
Et pour ma question t'a une idée ?

Bonjour,

2 possibilités pour centrer le menu:

- donner une largeur à #navlist et utiliser les marges automatiques:

#navlist {
  margin:   0 auto;
  width:     XXXpx;
}

- utiliser display: inline sur les li avec text-align:

#navlist {
  text-align: center;
}
#navlist li {
  display:   inline;
}

Plus de détails dans ce tutoriel.

Salut Thomas, j'avais déjà fait des essais infructueux avec ça mais ne sachant pas l'utiliser correctement j' avais tout mélangé.
Je vais essayer ça et je vous tien au courant.
Merci à +

Ça marche pas si je fait ça j'ai un decalage vers la droite , et le nav descent de 5px environ.

#navlist {
margin: 0 auto;
width:850px;
  position: absolute;
  top: 162px;


  font-family: Verdana,sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: normal;
  font-size-adjust: none;
  font-stretch: normal;
}
#navlist li {
  border-top: 1px solid gray;
  text-align: center;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  display: inline;
}
#navlist li a {
  border-left: 1em solid #aaaabb;
  padding: 0.1em 0.3em 0.1em 0.05em;
  background: #9797e8 none repeat scroll 0%;
  text-decoration: none;
  display: inline;
}

ps: j'ai aussi essayé width: 100%
Modifié par jpr (22 Oct 2008 - 16:51)

si je comprend bien le tuto sur les menus simple il est dit:

a écrit :
La propriété "text-align: center" aura pour effet de centrer toutes les balises de type inline à l'intérieur de la liste.

Moi ce que je veux c'est centrer tout le conteneur #nav sur la largeur de la page.
dois-je nettoyer mon code (trop de tags) dans navlist?

edition: je viens de réduir les dégâts en supprimant " padding: 0.1em 0.3em 0.1em 0.05em; "

 list-style-image: none;
  list-style-position: outside;
  display: inline;
}
#navlist li a {
  border-left: 1em solid #aaaabb;
                                                         <-------
  background: #9797e8 none repeat scroll 0%;
  text-decoration: none;
  display: inline;
}
#navlist li a:link {
  color: #444488;

Mais le #nav reste à droite (à l'intérieur de la page)
Modifié par jpr (22 Oct 2008 - 17:20)

bonjour,

Le positionnement en 'absolute' et le centrage par les marges automatique n'est pas compatible.

En fait que cherche tu as faire ?

1) centré des li dans un ul ?
2) centré un <ul> qui se retracte sur son contenu ?
3) 2 mais en absolu !

Par exemple
si 1) :
ul {text-align:center} li {display:inline;} et si + position:absolute ; alors width:100% et coordonnées de positionement

si 2 )
a) (Not IE ) : ul {display:table;margin:auto;} li {display:inline;/* ou float:left; pour dimensionner */ }
b) IE en CC : ul li {display:inline;zoom:1;} li {/*pas de flottement*/float:none;} , Pour le centrage , prevoir un conteneur div pour ul avec text-align:center ; .

si 3) conteneur div en absolue et ul dedans comme 2 .

Ce ne sont que des exemples théoriques qui devraient etre adaptés ou ecartés selon le but recherché et le contexte de ta page
... menu qui passe sur 2 lignes , menu deroulant , <ul> transparent ou avec un fond , en position static ou absolute , <li> a dimension ou fluide , etc ....

Un screen de ce que tu obtient et de ce que tu recherche , une page en ligne , le code html de ton menu ainsi que le doctype de ta page aiderait grandement a cerné ton but et les problemes que tu rencontres.

Cordialement , GC

Effectivement la page :www.fuerteventura-losaloes-apartamentos.com/homefr.html
Le menu horizontal est à gauche et je voudrait qu'il soit au centre peut importe si il touche les bords de la page ou pas .
Je suppose que tu a les moyens de voir le code html et css ?

Probleme resolut:

#navlist {
 [b] text-align: center;[/b]
  width: 100%; 
  margin:0 0; 
  padding: 0 0;
  position: absolute;
  top: 130px;

en local je ne voyait pas les changements ( même avec webdeveloper)après redémarrage de FF ,tout fonctionne bizarre non ?
Je vous remerci à tous dàvoir consacré tout ce temps à mon pb.
a+ JP