28172 sujets

CSS et mise en forme, CSS3

Bonjour,

je fais actuellement un système de news, dont chaque news est encadré par une div (class="news").

J'affiche l'image sur la gauche, grâce à un float:left, et j'encadre le texte par un <p></p>.

Jusque là, tout va bien. Sauf que je souhaite ajouté un lien "Lire la suite" en dessous de chaque suite, et qu'il soit centré!

j'ajoute donc une div clear:both, pour nettoyer le flottant, comme ça le lien s'affichera bien en dessous de l'image, si le texte est plus petit que l'image.

Ensuite j'affiche le lien, et pour le centré j'ai tout essayé :

div.news a.lien-suite { text-align:center; }
div.news span.lien-suite { text-align:center; }
div.news p.lien-suite { text-align:center; }

Aucun ne marche... sauf div.news div.lien-suite{ text-align:center; } !
Mais il me semble que c'est pas très sémantique d'encadrer un lien par une div, non ?



Pareil pour affiché "News posté le ..." à droite, j'ai dû faire un float:right, car text-align:right ne fonctionné pas Smiley bawling

En espérant avoir de l'aide Smiley lol
Modifié par Syntaxlb (25 Mar 2010 - 14:13)
Salut,

Au lieu de nous "raconter", ton code, ne crois tu pas qu'il serait plus simple de nous fournir idéalement une page en ligne, ou au moins l'intégralité du code html et css ? Il serait plus simple d'avoir une bonne vision du problème pour pouvoir t'y apporter réponse. Smiley cligne
Essaye de rajouter, dans ton CSS, la ligne display:block sur le sélecteur de ton lien.

Cordialement
Merci aztuk, ca régle le problème si j'utilise <a> ou <span>,

<p> étant déjà de type block, j'ai trouvé d'où venait le problème, les news se trouve dans une div qui englobe le tout :
div#contenu p{
text-align:justify;
text-indent: 2em ;
line-height: 1.7em ;
margin-right:10px;
}

Donc même en faisant :

div.news p.lien-suite { text-align:center; }

Il prend le text-align:justify, y a t-il moyen d'annulé le text-align:justify juste pour cette classe ?


--

Et, est-il mieu d'utiliser un <span> ou un <p>, ou autre? pour ce type de cas?
Modifié par Syntaxlb (25 Mar 2010 - 13:38)
Perso j'aurai sélectionner le lien :


div#contenu a.lien-suite{
text-align:center;
display:block;
clear:both;
}


Cordialement.
C'est pas recommandé de mettre des div vide qui serve de clear.

Vaut mieux utiliser la balise qui suit. Je pense que c'est plus approprié et ça t'enlève une balise.