Il y a actuellement
331 tutoriaux sur Aidoforum. Toute reproduction, partielle ou complète, est interdite.
Ajoutez vos propres tutoriaux sur Aidoforum !
- Retour aux tutoriaux
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.
<p><span class="gauche">Texte aligné à gauche</span><span class="droite">Texte aligné à droite</span></p>
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.
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ère :)
N'hésitez pas à m'envoyer vos bouts de code en commentaire, je vous aiderai à les corriger et/ou vous expliquer :)
Par Moyan, le 08 Janvier 2010 à 09h19
Commentaire de Jean3 2010-03-04 03:34:16
Bonjour Je suis un Jeune qui cherche du travail merci
Commentaire de Jonat 2010-03-02 16:11:38
Bonjour !
Je n'arrive pas à mettre un lien. Avec uniquement du texte ça fonctionne, mais pas avec un lien. A l'aide 
<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 !
