Centrer un élément sans taille ou taille maximale ?

Bonsware,

Alors, voici ma question : j'aimerais centrer un élément (un <div>), en l'occurence, le menu du bas de cette page (div#menu) : http://digal.kouartz.net (n'hésitez pas à donner un rapide avis sur le code et le design du site =)).

Le problème est que cet élément #menu a un background qui doit occuper tout l'espace de la page (width:100%;, donc).

Je ne sais donc pas comment faire pour tout centrer sans rajouter d'autres <div>.

Et au passage, j'aurais voulu un avis sur la technique que j'ai utilisé pour mettre côte à côté chaque liste de menu (à savoir un rajout de <div> sans id/class encadrant le titre et la liste).*

Merci beaucoup ,

dig ^_^

Une solution à m'apporer ?

Salut

L'ensemble du menu en bas a une largeur fixe, puisque chaque colonne fait 115px de large ...

Je pense que tu devrais rajouter un div pour englober toutes les colonnes, lui donner la bonne largeur et le centrer avec

margin: 0 auto;

Bonjour

Pour centrer ton DIV tu peux faire un margin-left:auto et margin-right:auto en précisant le width de ton div

Dans ce cas tu met ton background dans le body et non dans le div.

Bonjour,
Il faudrait normalement utiliser display: inline-block avec text-align:center appliqué au parent, mais ce n'est pas pris en charge par Firefox et pas assez bien par Internet Explorer (que sur les éléments de type inline par défaut)

Le mieux est par conséquent d'ajouter un autre DIV dimensionné et centré par margin auto.

Ok je vais faire comme ça alors, mais ça devient assez lourd :

<div id="menu">
  <div id="content">
    <div>
      <h2>Titre menu</h2>
        <ul>
          <li><a href=""></a></li>
        </ul>
    </div>
    <div>
      <h2>Titre menu</h2>
        <ul>
          <li><a href=""></a></li>
        </ul>
    </div>
  </div>
</div>

Dig a écrit :
Ok je vais faire comme ça alors, mais ça devient assez lourd

Le rajout d'une simple div (élément neutre) pour encadrer un groupe d'éléments, une solution lourde ?

Lourde en quoi, lourde pour qui ?
– Lourde en code ? Non, 25 octets en tout, 30 octets avec l'indentation du code. Ça ne pèsera pas sur les temps de téléchargement.
- Lourde à traiter ? Je doute que le temps de traitement de la page soit ralongé de manière significative.
- Lourde visuellement ? Non, c'est invisible.
- Lourde à gérer du côté des feuilles de style ? Bah non, ça va.
- Lourde au niveau du rendu non visuel ? Non plus.

Les div sont prévues pour être le support :
- d'indications de langue ;
- de mise en page.

Rajouter une div n'est pas une hérésie, ni une faute !
Le tout est de bien s'y retrouver au niveau de la conception de la feuille de style, par exemple, ou encore au niveau de la structure HTML (bien fermer les div ouvertes, ne pas laisser traîner de div vide). On fera donc attention à ne pas trop multiplier les imbrications de div, par exemple.

Sinon, pour les jusqu'au-boutistes de l'anti-divite, on aurait pu placer l'image de fond (le dégradé gris/noir) sur body, par exemple, tandis que l'image en haut de la page aurait été placée sur une div d'en-tête. Mais cela demande de connaître à l'avance la hauteur du menu en bas de page.

La hauteur du menu n'est pas prédéfinie, je vais donc faire comme indiquer plus haut .

Merci ^_^.