28172 sujets

CSS et mise en forme, CSS3

Salut la compagnie Smiley lol

Je cherche actuellement à faire un menu horizontal, jusque là, tout vas bien.
Je souhaite aussi que celui-ci se trouve au milieu vertical de mon container parent.
Encore une fois, jusqu'ici, tout vas bien.

Là ou ça coince, c'est que je ne parviens pas, en utilisant la propriété display:inline sur ma liste à faire en sorte que celle-ci se colle au bord droit de l'écran, tout en gardant une partie à gauche.

Par exemple:


<ul>
<li class='left'>toto</li>
<li class='right'>tata</li>
</ul>


Avec donc le block toto a gauche de l'écran et le block tata a droite Smiley lol
Donc si vous avez des trucs et astuces à ce sujet, je suis preneur Smiley lol
Modifié par DR I (31 May 2012 - 13:26)
Modérateur
Ah bon ben j'avais pas les règles…

Sinon on doit pouvoir avec des diplay: table-cell et des text-align. Ou dans le futur avec les futur modules css3 de positionnement. Mais en inline, non ce n'est pas le principe (On ne peut pas couper une ligne d'un paragraphe pour en mettre un bout à gauche et un bout à droite…)
Oui, je vais expliciter un peu Smiley lol

J'ai un premier bloc qui contient un logo de 128*16.
J'ai un second bloc qui contient des titres de menu de font-size: 1em; et font-family:arial;

ces deux blocs se trouvent à l’intérieur d'un container (fond du menu) de hauteur 32px et largeur 100% de l’écran.

Le but est de les positionner tel que suit:

Bloc 1 (image) a gauche de l’écran, au milieu du container.
Bloc 2 (liens) a droite de l'écran au milieu du container.

Donc, j'ai pensé à faire deux listes, avec une en text-align: left;, et une en text-align:right;

Le truc, c'est que je ne sais pas comment faire pour que liste 1 prenne uniquement la largeur de l'image et liste 2 le reste de la place afin de pouvoir pousser le texte a droite Smiley lol