CSS - balise span - text-align [Fermé]

Signaler
-
Messages postés
3549
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
-
Bonjour,
J'ai un petit problème avec le css ...En fait, je voudrais ecrire une partie du texte a droite et l'autre a gauche :

HTML :
<p> Salut!! <span class="droite"> C'est moi ! </span> </p>

CSS:
.droite{
text-align : right;
}

Ps : J'ai essayer par exemple de mettre color=red dans le css et ca marche ! Je vois pas trop ou est le probleme ...

MERCI!

9 réponses

Messages postés
3549
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
447
<span> n'est pas une balise de type bloc. Tu ne pourra donc pas lui attribuer de placement avec text-align.
Tu pourra le faire sur les balises <div> ou <p> par contre. Je dirai que <p> serai plus approprié dans ton cas.
Les balises de type bloc prennent automatiquement la largeur maximal selon l'espace qu'elle ont. C'est pour ça que tu peux lui donné une valeur d'alignement.
Si t'a 700px de place elle va prendre cette place (sauf si tu lui attribut une largeur avec un width). Le texte se placera donc dedans.
<span> permet juste de mettre du style du texte sélectionné. Il n'y aucune notion de largeur (width) ou hauteur (height).

J'espère t'avoir éclairé sur le sujet.
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 57353 internautes nous ont dit merci ce mois-ci

Ok mon css reste inchangé, HTML:

<span>Salut!<p class="droite">C'est moi</p></span>

Mais toujours pas a droite ... Et je voudrais que sa soit sur la meme ligne pas d'idee?
Merci!!!
Oui oui ! Mais il faut ce soit sur la même ligne, et si je met <p id="droite">text</p>
ca revient a la ligne;)
Mais ca marche tres tres bien avec la table
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 57353 internautes nous ont dit merci ce mois-ci

Messages postés
56
Date d'inscription
vendredi 16 janvier 2009
Statut
Membre
Dernière intervention
24 février 2010
23
essai sa sinon :
HTML :
<div id="gauche">a ma gauche</div>
<div id="droite">a ma droite</div>

CSS:
#gauche{
float: left;
color: blue;
}

#droite{
float: right;
color: red;
}

voila ^^
Utilisateur anonyme
Pas besoin du " float:left; " ... Ça déforme la mise en page dans certains cas.
Ca marche pas vraiment, en plus avec la balise div, tu reviens a la ligne, je voudrais que sa soit sur la meme ligne ... C'est bizzar ...
Messages postés
3549
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
447
Si ton css est:
#droite{ 
float: right; 
color: red; 
}

il te faut:
<p id="droite">C'est moi>/p>
Sinon met
.droit{}
Je tiens juste à rappeler à Bibs que les table NE servent PAS à faire de la mise en forme de page.
Utilise bien les div et autres balises de placement.

JM
Messages postés
3549
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
447
Et du coup tu utilises 15 balises HTML alors que tu peux le faire avec une seule...

As tu essayé le code CSS que je t'ai mis précédemment ?
Messages postés
3549
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
447
J'ai fait un test concret. En fait il y a une petite subtilité pour utiliser le float;right visiblement.
J'ai testé:
<div>
<p class="text">text</p>
<p class="droite">ceci est a droite</p>
</div>

Avec ce code CSS:
div{width:300px;margin:10px auto;}
p{margin:0px;padding:0px;}
p.text{margin-right:100px;}
p.droite{float:right;width:70px;}

Le texte de droite était effectivement en dessous.

Toutefois, avec le même code CSS, j'ai essayé ceci:
<div>
<p class="droite">ceci est a droite</p>
<p class="text">text</p>
</div>


L'affichage se fait correctement et le texte est bien à droite comme voulu et sur la même ligne.
ça doit venir de la manière dont est géré le float.
Essai de réadapter ça à ce que tu veux faire.

Voici le lien de ma page de test: http://arthezius.fr/ccm/position.php
Le CSS: http://arthezius.fr/ccm/style_position.css
Salut!
En fait j'ai trouver une solution tres simple
CSS :
.droite{
text-align=right;
}
HTML :
<table border="0" width="100%">
<tr><td width=50%> TEXT</td>
<td width=50% class="droite"> TEXT</td>
</tr>
</table>
Messages postés
195
Date d'inscription
dimanche 2 août 2009
Statut
Membre
Dernière intervention
6 mars 2019
15
il vaut mieux quinze balises qui fonctionnent que une qui ne marche pas
Messages postés
3549
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
447
Tu fais remonter un topic vieux de plus de deux ans juste pour dire ça?

Le fait est là: les tableaux ne sont pas fait pour faire de la mise en page.
N'importe quel webmaster te le dira.
Après s'il te faut 15 balises au lieu d'une seule par que tu n'arrives pas à en faire marcher une seule, c'est un autre problème. Rien d'insurmontable...