Problème de centrage (résolu)

Bonjour,

J'ai un probleme et niveau de la création d'une barre de navigation contenant un logo, des onglets, et une zone de recherche.

J'aurais voulu que cette barre soit centrée et donc j'ai voulu mettre ces trois éléments (qui sont en div) dans une autre div centrée.

J'ai fait en gros une div comme celle ci:

#fond {
        background: url() no-repeat center top;
        position: relative;
	width: 794px;
        height: 34px;
        margin: 0 auto;
}

et les 3 autres div, encore toutes en relative. En additionnant leur largeur, cela fait exactement 794 (et la hauteur est pour toutes 34).

Elles sont de ce type;

#logo {
        background: url(styles/logo.png) no-repeat;
        position: relative;
	width: 144px;
        height: 34px;
        margin: 0 auto;
}

Mais voilà, elles sont chacune centrées (et non pas les trois qui se suivent) et du coup l'unes au dessus des autres (non superposées, mais on niveau de la hauteur de la page).



Avez-vous un idée de la source du problème?

Merci d'avance
Modifié par Docxell (07 Jul 2009 - 17:27)

Bonjour Docxell

Un petit peu de lecture sur les positions en CSS ne ferait pas de mal, je pense

Donc pour toi le relative n'est pas un choix judicieux? Tout ce que je veux c'est center par rapport au navigateur..

Je crois que la lecture du premier article sur le positionnement (avant d'attaquer la deuxième partie) serait bien aussi. Et pour une vue d'ensemble, on peut lire le Guide de survie du positionnement CSS.

Docxell a écrit :
Donc pour toi le relative n'est pas un choix judicieux?

Effectivement. Il n'a en fait strictement aucun effet ici, vu ton code CSS. Cf. ce qui est dit du positionnement relatif dans les ressources indiquées (notamment le guide de survie).

Parfait, j'ai viré les position, et joué avec les float, tout fonctionne