Bouton décalé suivant la longueur du tweet sur la sidebar de mon site

Bonjour à tous

Voilà sous mon wordpress (http://www.next-conseil.fr), j'utilise le script de twitter pour afficher mon tweet sur ma sidebar, juste en dessous, j'utilise un plug-in d'inscription à ma newsletter.

le problème qui se pose est simplement que suivant la longueur de mon tweet, le bouton envoyer de ma newsletter se décale.

en bref, si mon tweet est sur 2 lignes, mon bouton envoyer se décale vers le bas, si mon tweet fais 1 ligne, il ne se déplace pas.

le code css de mon bouton envoyer :

.wpsb_form_btn {
	
	position:absolute;
	top: 511px;
	margin-left: 158px;
}

le code de mon plugin Newsletter :

<li>
	<ul class="sb-tools clearfix">
		<li class="news-icon">
		<span><?php _e('NEWSLETTER', 'default'); ?></span>
			<?php wpsb_opt_in(); ?>
		</li>
	</ul>
</li>

Voilà, ça ne fait pas très classe de voir un bouton se balader. J'aimerais régler le problème vraiment rapidement, je sais que c'est une petit erreur, mais je n'ai pas le temps cette semaine de voir le problème.
Merci de m'informer si vous savez quelle est la solution.

Salut,

C'est un comportement tout à fait normal et non pas un problème, un contenu prendra la place dont il a besoin, et le contenu qui suit lui fera suite. C'est un comportement logique et naturel.

Maintenant si tu souhaite le contourner il te faudra définir une hauteur à l'élément qui englobe ton tweet. Seulement cela va poser des problème vis à vis de se contenu, s'il dépasse de la hauteur qui lui est accordée. L'overflow permet de régler ce genre de cas, mais une information (ou une part) pourra alors ne pas être visible pour le visiteur.

Ok,
Twitter étant limité en nombre de caractères, je pense qu'en dimensionnant mon <div> contenant mon tweet d'une hauteur d'un peu plus de 140 caractères, environ 2-3 lignes pour moi ça devrais faire l'affaire non ?

Oui et non, car si ta colonne latérale est peu large, et que ton tweet contient des mots longs (ou une URL) en fin de ligne, ceux ci sont susceptibles de passer à la ligne. En revanche, avec des mots courts cela devrait fonctionner. Donc à toi d'envisager la hauteur en fonction d'un tweet comportant beaucoup de mots longs.

J'ai réussi c'est bon,

j'ai donc créer un nouveau div qui englobe le tweet ainsi que mon image, j'ai mis une hauteur fixe, assez grande pour contenir le nombre de caractère maximum et j'ai ajouté un text-align :justify; pour la clarté de mon tweet et j'ai laissé en position:absolute pour mon bouton envoyer à 535px du top de la page.

Va voir ce que t'en penses (http://www.next-conseil.fr), pour me dire si c bon.

Après c'est vrai que si j'écris de petits tweets, il va y avoir un espace blanc de quelques pixels (le manque de contenu du tweet)
Merci en tout cas.

Salut,

J'aurais du regarder d'un peu plus près, j'avais mal compris quelque chose...

Si tu fais un agrandissement de la taille de texte (zoom texte uniquement), tu pourras constater des chevauchements entre ton tweet et ce qui suit. Cela vient bien sur de la hauteur que tu as fixé.

En fait idéalement, tu n'as pas besoin de fixer de hauteur à ton tweet et il vaut mieux même l'éviter. Dans ton cas, tu as fixé cette hauteur uniquement pour que ton bouton "envoyer" placé en absolu, soit bien calé par rapport au champ de l'email de la newsletter.

Sauf qu'en fait tu ne t'y es pas bien pris. Cet absolu est utile pour que le bouton et le champ soient alignés (même si avec la propriété float il aurait été possible de le faire, ce qui serait certainement encore mieux).

Cependant, un élément absolu se place en fonction du dernier élément positionné. En regardant vite fait, il semble qu'aucun élément englobant ce bouton ne soit positionné. Donc celui ci se positionne naturellement par rapport à la fenêtre du navigateur (les coordonnées 0;0 correspondant au coin supérieur gauche).

Il est donc préférable d'ajouter un position: relative; à l'élément qui englobe le bloc de la newsletter, et d'ajuster la marge supérieure de ton bouton par rapport au haut de ce bloc. Et d'enlever la hauteur à ton bloc twitter.

Bon idéalement je disais, cela peut se régler avec un float.

Un peu de révision sur le positionnement grâce au Guide de survie du positionnement CSS
Modifié par Mikachu (07 Dec 2010 - 14:08)

Ok merci du conseil, je vais regarder ça de suite.
Donc j'enlève la hauteur que j'ai fixé pour mon tweet, et je mets une position relative pour mon bouton envoyer par rapport à l'élément qui englobe mon bouton, c'est ça ?

Salut,

Non ton bouton peut être placé en absolu, dans un englobant qui lui sera positionné aussi, vraisemblablement en relatif, pour qu'il reste dans le flux entre les différents éléments de la colonne.