[gravatar] aligner à droite et verticalement

chilperik · septembre 2011

Bonjour à tous,

Je cherche désespérément depuis tout à l'heure à aligner mon avatar fourni avec gravatar à droite de l'auteur et en plus aligner verticalement comme sur l'image du wiki en fait :

wiki a écrit:

text-align et vertical-align me rendent fou !! J'ai toujours un décalage d'une ligne vers le bas ou les alignements ne fonctionnent carrément pas... Malgré plusieurs combinaisons je n'arrive pas au même résultat

Pouvez vous m'aider pour résoudre ce problème de positionnement d'image ?

D'avance merci !

Hamtaro · septembre 2011

Un truc du genre ?

#avatar p {
text-align: right;
vertical-align: top;
float: right;
}

Sinon, il faudrait revoir un peu la structure du bloc pour bien le caler en haut à droite

chilperik · septembre 2011

humm y'a du mieux et j'étais parti dans cette direction sans le float ^^ mais c'est toujours pas ça je pense que c'est la structure des commentaires qui va pas mais honnêtement je vois pas oO

<div id="avatar">					

		<a href="<?php $plxShow->ComUrl() ?>" title="#<?php echo $plxShow->plxMotor->plxRecord_coms->i+1 ?>">#<?php echo $plxShow->plxMotor->plxRecord_coms->i+1 ?></a>• Le <?php $plxShow->comDate('#num_day #month #num_year(4) à #hour:#minute'); ?>, <?php $plxShow->comAuthor('link'); ?> a dit :

			<p><?php if($plxShow->plxMotor->plxRecord_coms->f('type')=='admin') : # si commentaire de type admin ?>

                        <img src="http://www.gravatar.com/avatar.php?gravatar_id=<?php echo md5(strtolower('chilperik@free.fr')) ?>&default=http://www.gravatar.com/avatar/3b3be63a4c2a439b013787725dfce802.jpg" alt="Avatar Gravatar"/></p>

                    <?php else: # si commentaire d'un visiteur ?>

                        <p><img src="http://www.gravatar.com/avatar.php?gravatar_id=<?php echo md5( strtolower($plxShow->plxMotor->plxRecord_coms->f('mail')) ) ?>&default=http://www.gravatar.com/avatar/3b3be63a4c2a439b013787725dfce802.jpg" alt="Avatar Gravatar" />

                    <?php endif; ?>
			</p>
				   

	</div>

En tout cas thx bro

danielsan · septembre 2011

salut,

il existe plusieurs solutions, tu as une adresse pour voir un peu ?

ou le code du bloc commentaire

Cordialement,

_____
D.San

danielsan · septembre 2011

re,

si c'est le template commentaire par défaut soit:

<div id="<?php $plxShow->comId(); ?>" class="comment">
	<blockquote>
		<p class="info_comment"><?php $plxShow->comDate('#day #num_day #month #num_year(4) à #hour:#minute'); ?> <?php $plxShow->comAuthor('link'); ?> <?php $plxShow->lang('SAID') ?> : <a class="num-com" href="<?php $plxShow->ComUrl() ?>" title="#<?php echo $plxShow->plxMotor->plxRecord_coms->i+1 ?>">#<?php echo $plxShow->plxMotor->plxRecord_coms->i+1 ?></a></p>
		<p class="content_com type-<?php $plxShow->comType(); ?>"><?php $plxShow->comContent() ?></p>
	</blockquote>
</div>

et l'intégration de gravatar ( je n'ai gardé que les balises d'images en leur ajoutant la class img_avatar )

<?php if($plxShow->plxMotor->plxRecord_coms->f('type')=='admin') : # si commentaire de type admin ?>
	<img src="http://www.gravatar.com/avatar.php?gravatar_id=<?php echo md5(strtolower('mon_adresse@email.com')) ?>&default=http://www.gravatar.com/avatar/3b3be63a4c2a439b013787725dfce802.jpg&size=32" alt="Avatar Gravatar" class="img_avatar"/>
<?php else: # si commentaire d'un visiteur ?>
	<img src="http://www.gravatar.com/avatar.php?gravatar_id=<?php echo md5( strtolower($plxShow->plxMotor->plxRecord_coms->f('mail')) ) ?>&default=http://www.gravatar.com/avatar/3b3be63a4c2a439b013787725dfce802.jpg&size=32" alt="Avatar Gravatar" class="img_avatar"/>
<?php endif; ?>

voir ce que donnerai dans la CSS:

div.comment {position: relative;}
div.comment img.img_avatar{position: absolute; top: 0px; right: 0px;}

ça c'est pour la méthode bourrin

est-ce que Gravatar est régulièrement utilisé ? ( ça vaut le coup de le mettre en place ou pas ? )

Cordialement,
_____
D.San

chilperik · septembre 2011

Pour un exemple : http://www.chilperik.fr/index.php?article25/maj-et-activite#comments

L'idée c'est de coller le gravatar dans le soin supérieur droit :P

Le code de commentaires.php :

<?php if(!defined('PLX_ROOT')) exit; ?>
<?php # Si on a des commentaires ?>
<?php if($plxShow->plxMotor->plxGlob_coms->count): ?>
	<div id="comments">
		<h2>Commentaires</h2>
		<?php while($plxShow->plxMotor->plxRecord_coms->loop()): # On boucle sur les commentaires ?>
			<div id="<?php $plxShow->comId(); ?>" class="comment type-<?php $plxShow->comType(); ?>">
				<div class="meta">
	<div id="avatar">					
		<a href="<?php $plxShow->ComUrl() ?>" title="#<?php echo $plxShow->plxMotor->plxRecord_coms->i+1 ?>">#<?php echo $plxShow->plxMotor->plxRecord_coms->i+1 ?></a>• Le <?php $plxShow->comDate('#num_day #month #num_year(4) à #hour:#minute'); ?>, <?php $plxShow->comAuthor('link'); ?> a dit :

			<p><?php if($plxShow->plxMotor->plxRecord_coms->f('type')=='admin') : # si commentaire de type admin ?>
                        <img src="http://www.gravatar.com/avatar.php?gravatar_id=<?php echo md5(strtolower('chilperik@free.fr')) ?>&size=50" alt="Avatar Gravatar"/></p>
                    <?php else: # si commentaire d'un visiteur ?>
                        <p><img src="http://www.gravatar.com/avatar.php?gravatar_id=<?php echo md5( strtolower($plxShow->plxMotor->plxRecord_coms->f('mail')) ) ?>&default=http://www.chilperik.fr/data/images/avatar.jpg&size=50" alt="Avatar Gravatar" />
                    <?php endif; ?>
			</p>
				   

	</div>
				</div>
				<blockquote>
					<p><?php $plxShow->comContent() ?></p>
				</blockquote>
			</div>
		<?php endwhile; # Fin de la boucle sur les commentaires ?>
		<div class="feed"><?php $plxShow->comFeed('rss',$plxShow->artId()); ?></div>
	</div>
<?php endif; # Fin du if sur la prescence des commentaires ?>
<?php # Si on autorise les commentaires ?>
<?php if($plxShow->plxMotor->plxRecord_arts->f('allow_com') AND $plxShow->plxMotor->aConf['allow_com']): ?>
	<div id="comments-form">
		<h2>Ecrire un commentaire</h2>
		<p class="message"><?php $plxShow->comMessage(); ?></p>
		<form action="<?php $plxShow->artUrl(); ?>#comments-form" method="post">
			<fieldset>
				<p>
					<label>Nom</label>
					<input name="name" type="text" size="20" value="<?php $plxShow->comGet('name',''); ?>" maxlength="30" /><br />
				</p>
				<p>
					<label>Site (facultatif)</label>
					<input name="site" type="text" size="20" value="<?php $plxShow->comGet('site',''); ?>" /><br />
				</p>
				<p>
					<label>E-mail (facultatif)</label>
					<input name="mail" type="text" size="20" value="<?php $plxShow->comGet('mail',''); ?>" /><br />
				</p>
				<p>
					<textarea name="content" cols="35" rows="6"><?php $plxShow->comGet('content',''); ?></textarea>
				</p>
				<p class="button">
					<?php # Affichage du capcha anti-spam
					if($plxShow->plxMotor->aConf['capcha']): ?>
						<?php $plxShow->capchaQ(); ?> <input name="rep" type="text" size="10" />
						<input name="rep2" type="hidden" value="<?php $plxShow->capchaR(); ?>" />
					<?php endif; # Fin du if sur le capcha anti-spam ?>
					<span class="buttons"><input type="reset" value="Effacer" />   <input type="submit" value="Envoyer" /></span>
				</p>
			</fieldset>
		</form>
	</div>
<?php endif; # Fin du if sur l'autorisation des commentaires ?>

C'est sûrement pas propre ^^' pour le CSS c'est celui donné par hamtaro

Pour le système gravatar je trouve que ça rajoute un peu de vie dans les commentaires et je me rend compte que sur pas mal de blog c'est utilisé...

Moi même je trouve ça très simple et léger pour une gestion dynamique de ses avatar, l'effet de bord c'est qu'on voit d'un coup d'oeuil les intervenants récurrents sur un post.

danielsan · septembre 2011

oki,

tu sauras adapter mon dernier message avec ton template ?
l'idée est d'attribuer une position relative au bloc parent, et une position absolute à l'enfant choisi ...

chilperik · septembre 2011

La méthode dite "du bourrin" fonctionne à merveille et fait exactement ce que je veux ! J'aurai pu chercher encore des heures lol...

J'ai mis une marge de 5px pour que se soit plus jolie ^^ et voici le résultat en image :

Un grand merci danielsan !!

edit : Si un gentil admin pouvait mettre résolu dans le titre ^^

danielsan · septembre 2011

de rien :P
quand la recherche devient longue, le bourrinage est bienvenu

mais temporaire !
car au prochain bourrinage, ça passera plus ou ça compliquera l'affaire.

D'ailleurs, tu peux enlever ton <p></p> qui encadre l'image et le style associé.
Et si on part du principe que la seule image pouvant être présente dans un commentaire est l'avatar,
on n'est même pas obligé de lui attribuer une class.
Un simple appel div.comment img{} suffit.

chilperik · septembre 2011

Pour les mises a jour ça devrait aller vu que c'est uniquement du "thème", on est sain d'esprit et de core

Mais je vais nettoyer tout ça ^^ encore merci pur le coup de main

Stéphane · septembre 2011

chilperik a écrit:

... on est sain d'esprit et de core

Joli !!!

[gravatar] aligner à droite et verticalement

Réponses