28172 sujets

CSS et mise en forme, CSS3

[Resolu] Mon lien cloche :) "text-align: right"

Bonjour tout le monde,
voila, j'aurais besoin de vos conseils.
J'ai un lien dans un paragraphe que j'aimerais positionner à droite. Je n'arrive pas à trouver ce qui cloche dans mon code car apparemment ca ne marche pas comme j'aimerais.

Pouvez-vous m'aiguiller ? Smiley smile

upload/13805-aligndroit.jpg 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
<html lang="fr">
	<head>
		<title>titre</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
	
h2, h3 {margin: 0px; padding: 0px;}

.box1{
	width: 244px;
	background-color: gray;
	display: block;
}

p{
	background-color: #8EFFD3;
	padding-left: 5px;
}

p a{text-align: right; color: Blue;}	

</style>

	</head>
<body>
<!-- Box +++++++++++++++++++++++++++++++++++++++++++ -->
<div class="box1">
	<h2>Les News</h2>
	
	<!-- Article  -->
	<h3> Titre de l'article</h3>
	<p>
		Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in juston...
		<br />
		<a href="xxx">Lire la suite (...)</a>
	</p>
</div>

	</body>
</html>


Merci d'avance pour vos réponses.
Modifié par Natas (28 Jan 2009 - 18:23)
Salut Raphael,

"oups"...les joies du copier coller Smiley smile

Malheureusement, ça n'arrange pas mon problème. Le lien est toujours aligné à gauche.
Modifié par Natas (28 Jan 2009 - 18:15)
Administrateur
Le souci est que l'élément <a>, étant inline, n'occupe pas de largeur, donc lui indiquer que le contenu sera aligné à droite n'a pas vraiment de sens : le contenu occupe toute la largeur de <a>.

text-align ne peut s'appliquer efficacement que sur un élément de type bloc, ce qui n'est pas le cas ici.
Solution :
- soit l'appliquer sur <p> directement en modifiant tout l'alignement
- soit créer un bloc à l'intérieur de <p> ce qui n'est pas autorisé
- soit modifier l'affichage de <a> en indiquant qu'il s'agit d'un bloc :
p a {
display: block;
text-align: right;
color: blue;
}
yess ! merci beaucoup Raphael.
Merci pour les infos sur les éléments inline et block.

Ça marche nickel.

La preuve par l'image:

upload/13805-soluce.jpg
Administrateur
Natas a écrit :
Merci pour les infos sur les éléments inline et block.

Pas de souci, n'hésite pas à lire les articles pour bien comprendre cette notion Smiley cligne

... Et n'oublie pas de marquer ce sujet comme Résolu (ça fait augmenter mes stats Smiley biggol )

EDIT : trop tard, merci Smiley cligne
Modifié par Raphael (28 Jan 2009 - 18:27)
Sujet clos
Aller à