28234 sujets

CSS et mise en forme, CSS3

Bonjour a tous,

voila j'ai un p d'une largeur connue (width: 600px).
Dans ce p, qui ne fait qu'une seule ligne, j'ai 3 mots a mettre avec des style differents pour chacun.
J'ai mis un span autour de chaque mot pour lui appliquer une classe differente.

Jusque la aucun probleme.
Mon probleme se situe dans le fait que les 2 premiers mots doivent etre coller a la gauche de mon p et le troisieme mot, doit etre coller a fond a droite de mon p, donc coller a la bordure droite pour avoir les trois mots sur une seule et meme ligne mais les deux premiers a gauche et le troisieme aligne a droite.

J'ai bien essayer en mettant la position "absolue" pour ce troisieme mot et mettre right: 0px mais comme le p (donc le conteneur) n'est pas positionne en absolu, mon mot se colle a droite de la page et non de mon p.

D'avance merci pour votre aide.
Modifié le 08 Dec 2004 - 17:36
Administrateur
Salut,

a écrit :
J'ai bien essayer en mettant la position "absolue" pour ce troisieme mot et mettre right: 0px mais comme le p (donc le conteneur) n'est pas positionne en absolu, mon mot se colle a droite de la page et non de mon p.
Dans ce cas, il suffit de positionner le <p> pour que ça fonctionne (position relative par exemple) Smiley cligne

Plutôt que d'utiliser un positionnement absolu, il est bien plus simple de :
- appliquer un alignement à droite sur <p> (text-align: right)
- appliquer un positionnement flottant à gauche sur tes deux premiers mots (float left)

Ainsi le texte par défaut (3è mot) sera à droite et les deux autres seront à gauche.
Administrateur
Cranky a écrit :
Ok merci ca marche en rajoutant une position relative a mon p

;)

Bon, tu as choisi la méthode compliquée. Soit.

Si tu considères que le problème est réglé, n'oublie pas de rajouter un [Résolu] en éditant le titre de ton sujet Smiley smile

Et si le coeur t'en dit, n'hésite pas à te présenter au Bar du forum Smiley cligne
Ben c'est la methode qui fonctionnait direct...

J'ai du faire encore un peu de bricolage mais maintenant ca va aussi avec les float.

Mais niveau compatibilite, est ce la meme chose ?
Il me semblait avoir lu que IE avait des petits problemes avec des float non ?
Administrateur
Cranky a écrit :

Mais niveau compatibilite, est ce la meme chose ?
Il me semblait avoir lu que IE avait des petits problemes avec des float non ?

En règle générale, il n'est pas conseillé d'utiliser les positionnements absolus pour des éléments de contenu, mais plutôt pour les grands blocs généraux.
Ceci parce que c'est souvent moins fluide et pratique que le positionnement flottant par exemple.

Il est vrai que IE a - dans certains cas - des petits bugs avec les éléments flottants.

Mais en règle générale les deux méthodes sont très compatibles.