Deux paragraphes sur la même ligne

[Nullette]

Bonjour, bonjour,

Sur certains bas de pages je voudrais mettre

à gauche : page précédente et

à droite : page suivante.

Pour ce faire j'ai appliqué les classes

.left { float: left; }
.right { float: right; }

Mes questions :

1) Faut-il garder dans la page html : <p align="left" > Page avant</p> et la même chose pour la droite ?

2) Si je retire la feuille de style, un paragraphe est bien à droite et l'autre à gauche, mais pas sur la même ligne. Y a-t-il une solution ?

[mick38]

Bonjour Nullette,

Idéalement les styles ne devraient pas être dans le code HTML.

Ci-dessous un exemple de solution, à tester bien sûr.

Le code HTML:

<p class="pleft">
	<a href="#">Page précédente</a>
</p>
<p class="pright">
	<a href="#">Page suivante</a>
</p>

Le code CSS:

.pleft { float: left; width: 40%; }
.pright { float: right; text-align: right; width: 40%; }

Mick

[Nullette]

Merci mick38 pour votre réponse rapide.

Sauriez-vous me dire quelle est la différence entre le code css que j'avais mis :

.left { float: left; }
.right { float: right; }

et celui que vous m'avez indiqué :

.pleft { float: left; width: 40%; }
.pright { float: right; text-align: right; width: 40%; }

?

Les paragraphes s'affichent de la même façon avec l'un ou l'autre code ...

Et concernant ma deuxième question :

2) Si je retire la feuille de style, un paragraphe est bien à droite et l'autre à gauche, mais pas sur la même ligne. Y a-t-il une solution ?

Elle reste ouverte ... (la question).

[mick38]

On se tutoie hein, si ça ne te dérange pas

Sauriez-vous me dire quelle est la différence entre le code css que j'avais mis :

.left { float: left; }
.right { float: right; }

et celui que vous m'avez indiqué :

.pleft { float: left; width: 40%; }
.pright { float: right; text-align: right; width: 40%; }

?

Les paragraphes s'affichent de la même façon avec l'un ou l'autre code ...

Pourrais-tu nous fournir plus de code, ou idéalement un lien vers ta page en travaux?

Et concernant ma deuxième question :

2) Si je retire la feuille de style, un paragraphe est bien à droite et l'autre à gauche, mais pas sur la même ligne. Y a-t-il une solution ?

Elle reste ouverte ... (la question).

Normalement, si tu ne mets de style dans ta balise html, alors les paragraphes devraient être l'un en dessous de l'autre quand tu retires la feuille de style, et non "en ligne".

D'ailleurs, pourquoi souhaites-tu qu'ils soient alignés lorsque la feuille de style est désactivée?

Mick

Modifié 27 Octobre 2008 par mick38

[yuston]

2) Si je retire la feuille de style, un paragraphe est bien à droite et l'autre à gauche, mais pas sur la même ligne. Y a-t-il une solution ?

Non. Sauf si tu spécifie le style CSS directement dans le code HTML (soit entre la balise head, soit dans l'attribut style). En effet, un paragraphe p est de type bloc.

[mick38]

J'ai peut être compris pourquoi on se comprend pas

Si tu mets un

align="right"

dans la balise html de ton 2ème paragraphe, alors c'est normal que son contenu se retrouve à droite et non sur la même ligne.

Le paragraphe occupe toute ta largeur (c'est un élément de type bloc comme le souligne yuston, donc il occupe toute la largeur de son contenant), donc si tu appliques ce style dans la balise html alors "tu dis" au contenu de ce paragraph de se positionner à droite.

Ce qui donne au final l'impression d'un bloc en float right alors que ce n'est pas le cas.

Tes 2 paragraphes sont bien l'un en dessous de l'autre, et occupe chacun, en largeur, la totalité de l'élément contenant.

Pour reprendre:

1) Faut-il garder dans la page html : <p align="left" > Page avant</p> et la même chose pour la droite ?

Non, c'est bien mieux de regrouper les style dans la CSS (facilite grandement la maintenance).

Ton style devrait donc s'appliquer, dans la css, uniquement au 2ème paragraphe afin de modifier sa valeur par défaut (text-align: left;).

2) Si je retire la feuille de style, un paragraphe est bien à droite et l'autre à gauche, mais pas sur la même ligne. Y a-t-il une solution ?

J'en reviens à ma question, sauf bien sur si tu pense qu'elle n'a pas lieu d'être, pour quelle raison souhaites tu qu'ils soient alignés lors de la désactivation de la feuille de style?

Mick

[Nullette]

Merci yuston et merci Mick.

Oui, Mick je suis d'accord pour le tutoiement ;-)

J'aurai encore plein de questions sur les css

Avec mon site actuel structuré en tableaux avec une feuille de style toute simple, je ne me posais pas de questions et n'avais pas de problèmes !

Pour la réfection de mon site ça ne me facilite pas du tout la maintenance, car je suis incapable de me rappeler à quel endroit j'ai utilisé tel ou tel code et, malgré le Hub et un livre, je ne retiens pas les règles des margin, padding, bloc et autres.

Mais je persévère.

J'en reviens à ma question, sauf bien sur si tu pense qu'elle n'a pas lieu d'être, pour quelle raison souhaites tu qu'ils soient alignés lors de la désactivation de la feuille de style?

Mick

Parce que je me demande comment la page va se positionner pour la personne qui désactive la feuille de style ou pour les éventuels utilisateurs de Lynx.

Mes questions sont toutes bêtes

Voici la page concernant les paragraphes à gauche et à droite en bas (j'ai mis des tableaux, car je ne sais pas comment faire autrement pour les photos).

La page en question

A plus tard pour d'autres questions et merci encore.

[mick38]

Parce que je me demande comment la page va se positionner pour la personne qui désactive la feuille de style ou pour les éventuels utilisateurs de Lynx.

Ce qui importe pour un utilisateur de lynx, c'est que l'information que tu lui fournis soit correctement structurée, et présentée dans un ordre logique.

En gros cela nécessite "un peu" de technique et beaucoup de bon sens (Nul besoin d'être expert pour travailler sur l'accessiblité de son site).

En général, si ta page est lue sans feuille de style, c'est que tu auras bien souvent à faire à un internaute mal-voyant ou non-voyant. Donc la question que tu te poses sur l'alignement des paragraphes n'a plus vraiment d'importance étant donné que le contenu de ta page html sera retranscrite sous forme vocale ou via un clavier braille.

J'aurai encore plein de questions sur les css.

A plus tard pour d'autres questions et merci encore.

A très bientot

Mick

[Nullette]

Merci

[Nullette]

Bonjour,

sur une page j'ai appliqué le style suggéré par mick38 et tout va bien.

Un autre problème cependant se présente, je voudrais qu'il y ait un espace après ces deux paragraphes.

J'ai mis :

en html :

 <p class="both"> </p>

css

.both {
clear : both;
}

Mais l'espace est trop grand. Y aurait-il une autre solution ?

Le code HTML:

<p class="pleft">
	<a href="#">Page précédente</a>
</p>
<p class="pright">
	<a href="#">Page suivante</a>
</p>

Le code CSS:

.pleft { float: left; width: 40%; }
.pright { float: right; text-align: right; width: 40%; }

Mick

[Dan]

Je prends le train en route...

Je mettrais par exemple :

.both {
clear : both; line-height: 20%;
}

en essayant plusieurs valeurs, inférieures à 100% pour le line-height.