Comprendre le bitcoin, l'intelligence artificielle, faire un site web... En 3 minutes en vidéo!

Mettre du texte à gauche et à droite sur la même ligne

Tutoriaux > HTML/CSS > Mettre du texte à gauche et à droite sur la même ligne

Mettre du texte à gauche et à droite sur la même ligne
Par exemple dans un footer, vous pouvez vouloir mettre votre copyright sur la gauche de la ligne, et vos liens de contacts sur la partie droite. L'astuce est très simple, un peu d'alignement avec CSS suffit!

Sur certains sites, les webmasters arrivent en pied de page (footer) à intégrer leur copyright ainsi que leur adresse e-mail sur une même ligne ! Approchez, ce n'est pas fort compliqué...

Pour effectuer cette action, nous allons devoir toucher à votre source html ainsi qu'à votre feuille de style (CSS). Tout d'abord, voici le code que l'on va utiliser. Nous allons l'expliquer par la suite.

Code HTML



<p><span class="gauche">Texte aligné à gauche</span><span class="droite">Texte aligné à droite</span></p>




Code CSS


p {
text-align: justify;
}
p span.gauche {
float: left;
}
p span.droite {
float: right;
}



Décortiquons maintenant ce petit bout de code !

Dans notre partie HTML, nous avons la balise <p> ..</p> afin d'ouvrir un paragraphe, la partie CSS étant liée à ce paragraphe est donc une simple justification de texte.
Cependant, grâce aux balises <span>, nous avons fabriqué notre propre classe afin d'aligner nos différents textes ! Nous pouvons donc positionner à différentes positions les éléments d'un même paragraphe.

Citation

p span.gauche { float: left; } pourrait s'écrire:
Dans la partie <p>..</p>, la balise span ayant pour class left doit suivre un float left. (Traduire: Alignement à gauche)



La partie droite fonctionne exactement de la même manièreSourire

N'hésitez pas à m'envoyer vos bouts de code en commentaire, je vous aiderai à les corriger et/ou vous expliquerSourire

Par Moyan , Le 08 Janvier 2010 à 09h19
Ce tutoriel est la propriété d'Aidoweb et ne peut en aucun cas être copié.

Retour à HTML/CSS

Ajouter un commentaire

Suite a un fort volume de spam, les commentaires d'invités sont pour le moment désactivés. Vous devez vous inscrire ou vous identifier pour pouvoir commenter cet article, ou demander du support.

Lectures recommandées

Commentaires sur cet article

Zaza69 - Le 02 Avril 2010 à 16h35

Jonat, ton script fonctionne très bien.

Jonat - Le 02 Mars 2010 à 16h11

Bonjour !
Je n'arrive pas à mettre un lien. Avec uniquement du texte ça fonctionne, mais pas avec un lien. A l'aideSourire
<style>
p {
text-align: justify;
}
p span.gauche {
float: left;
}
p span.droite {
float: right;
}
</style>
<p><span class="gauche">Bla bla</span><span class="droite"><A class="lien" href="mentions_legales.html" target=accueil_milieu>Mentions légales</A></span></p>

Merci d'avance !

Tutoriaux > HTML/CSS > Mettre du texte à gauche et à droite sur la même ligne