[gravatar] aligner à droite et verticalement

chilperikchilperik Member
dans Entraide et S.A.T
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:
capturedecran20100204a0.jpg
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 ! :)

Réponses

  • HamtaroHamtaro Member
    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 ;)
  • chilperikchilperik Member
    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 ;)
  • danielsandanielsan Member
    salut,

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

    ou le code du bloc commentaire

    Cordialement,

    _____
    D.San
  • danielsandanielsan Member
    septembre 2011 modifié
    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 :D

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

    Cordialement,
    _____
    D.San
  • chilperikchilperik Member
    septembre 2011 modifié
    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.
  • danielsandanielsan Member
    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 ...
  • chilperikchilperik Member
    septembre 2011 modifié
    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 :
    1315319593.png


    Un grand merci danielsan !! :D



    edit : Si un gentil admin pouvait mettre résolu dans le titre ^^
  • danielsandanielsan Member
    septembre 2011 modifié
    de rien :P
    quand la recherche devient longue, le bourrinage est bienvenu :D 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.
  • chilperikchilperik Member
    Pour les mises a jour ça devrait aller vu que c'est uniquement du "thème", on est sain d'esprit et de core :D

    Mais je vais nettoyer tout ça ^^ encore merci pur le coup de main ;)
  • StéphaneStéphane Member, Former PluXml Project Manager
    chilperik a écrit:
    ... on est sain d'esprit et de core :D
    Joli !!! :D

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

Connectez-vous ou Inscrivez-vous pour répondre.