28172 sujets

CSS et mise en forme, CSS3

Parfois lien, parfois pas lien. Adapter l'aspect en conséquence ?

Bonjour.
Je suis en train de travailler sur un template pour Wordpress depuis quelques semaines, et je suis en train de buter depuis plusieurs jours sur les commentaires de celui-ci, ou plus particulièrement l'aspect de ceux-ci.
En effet lorsqu'un utilisateur dépose son commentaire, son nom apparaît a côté. Le soucis que je rencontre est que l'utilisateur entre parfois l'adresse de son site web, ou non. Lorsque j'appelle le nom de l'utilisateur comme ceci :
<?php printf(__('%s'), get_comment_author_link()) ?>

, s'affiche donc son nom, soit comportant un lien vers son site, soit non. Jusque la rien de sorcier.

Le soucis c'est que j'aimerai appliquer un style CSS différent selon qu'il s'agisse d'un lien ou non. En fait, j'aimerai lorsqu'il n'y ait pas de lien que son pseudo apparaisse dans un cadre au fond noir (sans hover possible donc), et quand il s'agit d'un lien, que celui-ci apparaisse dans un cadre de couleur (avec hover qui le fait changer de couleur). Actuellement j'ai un code à peu près similaire à ceci (simplifié) :

.nom {
color: #fff;
background-color: #000;
padding: 2px 10px;
}

.nom a{
	background-color: #900;
}


Problème ici, lorsque le texte est sans lien, pas de soucis il s'affiche comme je le souhaite. En revanche dès qu'il s'agit d'un lien, je me retrouve avec le lien a l'intérieur de mon cadre noir, avec le fond (ici rouge) uniquement derrière le texte (voyez ci-dessous).
http://www.willandco.fr/probcss.png
Je me suis donc dit dans ce cas que je devais mettre le "padding: 2px 10px;" dans le ".nom a". Le soucis c'est qu'il s'additionne au premier.

La solution doit être toute bête mais je suis réellement coincé sur cette histoire. Comment faire pour que lorsqu'il s'agisse d'un lien, tout le fond devienne rouge a la place de noir, et soit cliquable (avec un hover au fond différent tant qu'à faire) ?

Merci de l'aide Smiley cligne
Rebonjour.
Alors j'ai bien lu l'article que vous m'avez donné, et j'ai essayé plusieurs configurations a base de display:block et display:inline-block, mais j'en arrive toujours au même point, à mon grand désespoir.

Par exemple lorsque je dis que mon élément a un padding de 4px, et que le lien lui qui apparait parfois est en display:block, il reste tout compact, et on voit toujours le padding de l'autre qui s'ajoute sur les côtés. J'ai beau tourner dans tous les sens je vois vraiment pas. Voilà le code que j'ai :
<span class="alignleft222"><?php printf(__('%s'), get_comment_author_link()) ?> </span>
<span class="datecom"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>" title="">le <?php comment_date('j F Y') ?> &agrave; <?php comment_time('G\hi') ?></a></span>


Et voici où j'en suis avec mon CSS :
#comment_wrap .datecom a {
	color:#a8a8a8;
	font-size:11px;
	padding: 4px 10px;
	background-color: #efefef;
}

.alignleft222 {
	font-size: 13px;
	color: #fff;
	background-color: #000;
	display: inline-block;
	padding: 1px 10px;
}

.alignleft222 a{
	background-color: #fb200e;
	color: #fff;
	display: block;
}


Malheureusement cela me donne toujours la même disposition :
http://www.willandco.fr/cssprob2.png

Toujours l'histoire du padding qui m'embête ! Que faire ?
Modifié par wab (01 Sep 2009 - 12:05)
Salut,

Je pense que tu devrait retirer inline-block et passer tes éléments en float:left; et mettre un display:block; dans ton a
Modifié par pfoofen (01 Sep 2009 - 12:27)
J'ai essayé en retirant le inline-block et en passant les éléments en float:left avec un display:block dans le a, mais ca ne change rien. Le soucis vient du padding qui me fait toujours un contour noir autour du rouge. Si je mets le padding dans le .alignleft222 j'ai le pseudo sans lien qui s'affiche correctement, mais pas celui avec le lien (en rouge), si je le mets dans le .alignleft222 a, le noir n'est pas beau, mais le lien en rouge oui, et si je le met dans les deux, le noir est bien, mais le rouge additionne les deux padding. D'où mon soucis Smiley ohwell
a écrit :
si je le mets dans le .alignleft222 a, le noir n'est pas beau, mais le lien en rouge oui


Qu'est-ce qu'il y à de pas beau ? ça peut se résoudre peut-être
Bonjour,

Voici un code d'exemple qui peut aider. Il ne reprend pas les éléments HTML et classes CSS évoquées dans ce sujet (c'est volontaire).

Avec un lien:
<p class="test"><a href="...">Glop</a></p>

Sans lien:
<p class="test"><span>Pas glop</span></p>


À partir de cette base:
- Si je mets un padding à mon élément P, je ne pourrai pas faire en sorte que mon lien prenne toute la surface du P.
- Par contre, je peux mettre un padding aussi bien sur mon A que sur mon SPAN.

CQFD.
Sujet clos
Aller à