Bonjour à tous !

J'ai un problème que je tente de résoudre depuis quelques heures maintenant et je ne trouve pas la solution.
Mon code HTML contient deux paragraphes distincts <p2> et <p3> contenant chacun une phrase et tous deux contenus dans une div "footer". Je souhaiterais que <p2> soit sur la gauche et <p3> sur la droite, tout cela en étant sur une même ligne.

Voici mon CSS, je suis débutant donc je ne sais pas du tout si j'ai mis ce qu'il faut:

#footer p2 {
	float:left;
	margin-left:5%;
	position:relative;
}

#footer p3 {
	float:right;
	position:relative;
}

Ainsi que le code HTML, plutôt basique:

<div id=footer>


<p2>Phrase 1</p>

<p3>Phrase 2</p>

</div>

Merci pour le temps accorder à mon petit problème !

-
Edité par josueschultz 23 juillet 2013 à 0:17:13

Bonsoir,

Peut-on avoir aussi ton code html, juste pour vérifier.

Sinon mettre tes "paragraphes" dans un <div> conteneur et les placer avec un inline-block , voir un flottant.

Voilà, j'ai éditer mon message en ajoutant le code HTML

-
Edité par josueschultz 23 juillet 2013 à 0:18:25

p2 et p3 n'existent pas. Il n'y a pas de hiérarchie pour les paragraphes, mais que pour les titres (h1, h2, h3...)

Bonjour,

Si je comprends bien : un élément footer contient deux paragraphes (ayant du contenu).

Par défaut, le W3C préfere que l'élément paragraphe soit affiché en display block. A ma connaissance, tous les navigateurs du marché appliquent ce style par défaut.

Or, display block implique par définition un retour-chariot avant et après l'élémznt auquel il s'applique. Cela explique pourquoi tes éléments p ne sont pas sur la même ligne.

Si tu leur applique (à chacun) un display inline ou un display inline-block, tu n'auras plus ce problème. En effet, par définition, inline retire les retours-chariot et ne permet pas le redimenssionnement de l'élément auquel il est appliqué. En revanche, par définition, inline-block permet de redimenssionner l'élément auquel il est appliqué et retire lui aussi les retours-chariot.

Avec ça, ça devrait le faire ! Bonne continuation mon ami,

-
Edité par Nohak_ 23 juillet 2013 à 1:20:48

13lucky13 a tout dit, tu ajoute la remarque de roxforts et tu as tout les éléments en main. 

A moins d'avoir un but précis, retire les position relative.

(Trompé de message.)

-
Edité par Nohak_ 23 juillet 2013 à 11:18:57

Comme l'a dit Nohak_, un simple

display:inline-block;

sur les 2 div permet de les aligner sur la même ligne.

Ne reste plus, ensuite, qu'à jouer avec les margin afin de décaler les divs l'un par rapport à l'autre.

Sur les 2 paragraphes, veux-tu dire ?

Ensuite, utiliser un float sur chacun d'eux peut permettre de les placer aux extrémités du footer.

Edit important : il faudra penser à leur renseigner une largeur maximale afin d'éviter qu'ils ne se télescopent (à cause du float) non ?

Edit 2 : en général, il faut éviter d'avoir recours à du float si ce n'est pas pour gérer l'affichage d'une image. Si quelqu'un a une autre solution, je pense qu'elle sera la bienvenue.

-
Edité par Nohak_ 23 juillet 2013 à 11:27:11

Nohak_ a écrit:

Sur les 2 paragraphes, veux-tu dire ?

En fait, je faisait allusion à ce qu'à dit 13lucky13 plus haut. 

13lucky13 a écrit:

Sinon mettre tes "paragraphes" dans un <div> conteneur et les placer avec un inline-block , voir un flottant.

Finalement, le flottant ne permet pas du tout de régler le problème. En effet, il va forcer les paragraphes à sortir du flux (et donc du footer). Rah, ça fait du bien de se remettre à l'intégration Web

Visiblement le message de lucky13 est transparent.

Et si on reprend la question (mais on a pas toutes les infos) :

josueschultz a écrit:

Mon code HTML contient deux paragraphes distincts <p2> et <p3> contenant chacun une phrase et tous deux contenus dans une div "footer". Je souhaiterais que <p2> soit sur la gauche et <p3> sur la droite, tout cela en étant sur une même ligne.

Ici je comprends qu'il veut que ses 2 paragraphes soient chacun a un côté opposé du contenant. Si c'est ça, alors la solution "float" me semble plus appropriée.

Edit : d'autre post avant que j'ai fini celui-la. grrr....

Nohak_ a écrit:

Ensuite, utiliser un float sur chacun d'eux peut permettre de les placer aux extrémités du footer.

Non sur un seul.

Ensuite, même si float fait sortir du flux, il est simple de le faire rester dans le "footer". 

-
Edité par rigs 23 juillet 2013 à 11:36:50

"Ici je comprends qu'il veut que ses 2 paragraphes soient chacun a un côté opposé du contenant. Si c'est ça, alors la solution "float" me semble plus appropriée."

Non, le float fait sortir l'élément auquel il est appliqué du flux. Donc les deux paragraphes sortiront du footer. Donc ça ne va pas du tout.

Par ailleurs, avoir recours à un div en plus du footer ça sert à rien.

-
Edité par Nohak_ 23 juillet 2013 à 11:37:18

Non pour le débordement des flottant et le div dont je parle est le footer. L'op utilise "#footer" et non "footer"

Nohak_ > et empêcher le dépassement des flottants c'est impossible dans ton monde ? Tu traites tout le monde d'incompétents mais tu dis "te remettre à l'intégration". Tu fais bien. Comprenons-nous bien : tu as raison, les flottants vont sortir du flux, mais on peut les en empêcher.

Au vu de la demande de l'OP, soit on fait deux éléments en display: table-cell, l'un en text-align: left, l'autre en : right ; soit on donne un contexte de formatage au conteneur des dites phrases, le footer.

A lire : http://www.alsacreations.com/article/lire/7-depassement-flottants-css.html

L'OP doit donc utiliser footer et non un div #footer.

Et tu n'as qu'à tester pour les flottants...

footer{
	background : grey;
}

p:first-child{
	float : left;
}

p:last-child{
	float : right;
}

<body>
	<footer>
		<p>Paragraphe n°1</p>
		<p>Paragraphe n°2</p>
	</footer>
</body>

Les paragraphes sont en effet bien alignés sur la même ligne, mais le footer a une hauteur nulle (à cause des floats)...

-
Edité par Nohak_ 23 juillet 2013 à 11:55:43

Mais pourquoi faire changer son code html à l'OP ? (bon, mis à part les p2 et p3 qui n'existent pas) <div id="footer"> ou <footer>, ici c'est pareil.

Non, l'élément HTML5 footer apporte une information sémantique, pas l'utilisation d'un élément div.

Au-delà de cette raison, il y a toute la philosophie du W3C depuis ces dernières années (directement liée à la sémantique) qui incite à donner un maximum de sens, de valeur humaine aux éléments HTML. L'utilisation de l'élément footer à la place de la div #footer est primordial. Sans compter qu'il s'agit-là d'une bonne habitude à prendre.

Sinon, merci pour ton lien, je vais pouvoir relire cet article

-
Edité par Nohak_ 23 juillet 2013 à 11:47:40

A ce moment-là, il faut jouer avec les placements dans le code HTML :

<body>
    <footer>
        <p>Paragraphe n°2</p>
        <p>Paragraphe n°1</p>
    </footer>
</body>

footer{
    background : grey;
}

p:first-child{
    float : right;
}

De ce fait, le footer prend la hauteur du premier paragraphe (le n°1)

Chez moi, ça ne marche pas (j'ai déjà essayé). (retour-chariot)

Edit : au fait, si on utilise deux float, pas besoin d'utiliser du display inline hein.

Bon, voici le code qui marche :

footer{
    background : grey;
    overflow : hidden;
}

p:first-child{
    float : left;
}
 
p:last-child{
    float : right;
}

(L'overflow permet le contexte de formatage et indirectement, l'affichage - hauteur non-nulle - du footer).

<body>
	<footer>
		<p>Paragraphe n°2</p>
		<p>Paragraphe n°1</p>
	</footer>
</body>

@AkaiKen  : puisque tu as pris l'initiative de me lancer un petit pic tout-à-l'heure, je vais en faire tout autant : pourrais-tu m'expliquer pourquoi la hauteur du footer n'est pas nulle en utilisant overflow, qui induit un contexte de formatage et donc un non-dépassement des flottants ? J'ai du mal à voir pourquoi ce non-dépassement permet de donner une hauteur au footer.

Merci

-
Edité par Nohak_ 23 juillet 2013 à 11:55:23

Nohak_ a écrit:

L'OP doit donc utiliser footer et non un div #footer.

footer{
	background : grey;
}

p{
	display : inline;
}

p:first-child{
	float : left;
}

p:last-child{
	float : right;
}

Appliqué un float sur un élément et il devient de type block, alors lui appliquer "inlin" avant et sans intérêt. 

Nohak_ a écrit:

Non, l'élément HTML5 footer apporte une information sémantique, pas l'utilisation d'un élément div.

Ou as-tu vu son doctype ?

Nohak_ a écrit:

Chez moi, ça ne marche pas (j'ai déjà essayé). (retour-chariot)

Edit : au fait, si on utilise deux float, pas besoin d'utiliser du display inline hein.

Bon, voici le code qui marche :

footer{
    background : grey;
    overflow : hidden;
}

p:first-child{
    float : left;
}
 
p:last-child{
    float : right;
}

(L'overflow permet le contexte de formatage et indirectement, l'affichage - hauteur non-nulle - du footer).

<body>
	<footer>
		<p>Paragraphe n°2</p>
		<p>Paragraphe n°1</p>
	</footer>
</body>

@AkaiKen  : puisque tu as pris l'initiative de me lancer un petit pic tout-à-l'heure, je vais en faire tout autant : pourrais-tu m'expliquer pourquoi la hauteur du footer n'est pas nulle en utilisant overflow, qui induit un contexte de formatage et donc un non-dépassement des flottants ? J'ai du mal à voir pourquoi ce non-dépassement permet de donner une hauteur au footer.

Merci

-
Edité par Nohak_ il y a moins de 30s

Tu as du mal a comprendre on dirait, un seul float suffit et qui t'a parlé de overflow hidden ? (c'est auto qu'il faut utiliser.

Le footer avait 0px de hauteur car comme comme tous ses enfants sortaient du flux, il est considéré comme virtuellement vide (essaie de mettre un flottant et un bout de texte dans un élément sans contexte de formatage de bloc, l'élément-père aura bien une hauteur, celle du bout de texte). En empêchant le dépassement des flottants, on les réintègre "à l'intérieur" de leur parent, qui regagne sa hauteur méritée.

Comment le navigateur l'interprète, ça, je ne sais pas, en revanche, cela dépasse mes compétences.

Ensuite, oui, c'est vrai, <footer> a une notion sémantique non négligeable, et oui il est préférable de l'utiliser, mais là, dans le contexte précis de ce problème il n'était pas en cause (d'où mon "ici" qui, trop petit, est passé inaperçu).

rigs > overflow: hidden fonctionne aussi, car ce qu'il faut c'est n'importe quelle valeur d'overflow sauf visible

-
Edité par Lamecarlate 23 juillet 2013 à 12:03:26

Je réponds à vos deux messages distinctement.

rigs

"Appliqué un float sur un élément et il devient de type block, alors lui appliquer "inlin" avant et sans intérêt."

Tu as sans doute fait un lapsus ? Tu voulais dire "un float change le display en inline" (pas en "block" comme tu l'as écrit) non ? Mais je ne pense pas que ce soit le cas (merci de donner ta source). Pour moi, float permet simplement de faire sortir du flux l'élément auquel il est appliqué, ce qui explique l'inutilité du display inline.

"Ou as-tu vu son doctype ?"

Voyons, voyons, pas de petite contradiction pour contredire. Le tutoriel de Mathieu Nebra est un tutoriel sur le HTML5, et l'auteur fait énormément la promotion de ce langage (à juste titre selon moi), comme la grande majorité des informaticiens. La grande mode (même pour les médias), c'est le HTML5. En outre, l'image qui illustre ce forum est le logo du langage HTML5.

Avec tout ça, je pense pouvoir affirmer qu'il est légitime de penser par défaut que le HTML5 a été choisi par les OP qui postent des topics pour qu'on les aide. Si ce n'est pas le cas, c'est à eux de le préciser.

Donc on utilise footer et pas div #footer. Si toutefois l'auteur voulait absolument ne pas utiliser ça parce qu'il code en une autre version du langage, il n'avait qu'à le préciser.

" Tu as du mal a comprendre on dirait, un seul float suffit et qui t'a parlé de overflow hidden ? (c'est auto qu'il faut utiliser."

Un seul float ne suffit pas (au lieu d'insister lourdement, je te prie d'essayer). Moi quand je poste une solution, je teste toujours sous Wamp et ensuite je la publie si elle marche (ou je la publie en montrant ce qui ne va pas si ma solution est bancale).

Le overflow hidden permet le contexte de formatage comme l'a très justement dit AkaiKen. L'utilisation de la valeur "auto" n'est pas obligatoire contrairement à ce que tu penses. Ça marcherait également ceci dit.

AkaiKen

"Ensuite, oui, c'est vrai, <footer> a une notion sémantique non négligeable, et oui il est préférable de l'utiliser, mais là, dans le contexte précis de ce problème il n'était pas en cause (d'où mon "ici" qui, trop petit, est passé inaperçu)."

Autant donner de bonnes habitudes aux OP (ce que tout le monde devrait faire ici).

"En empêchant le dépassement des flottants, on les réintègre "à l'intérieur" de leur parent, qui regagne sa hauteur méritée."

Parce qu'ils sortaient du flux (et donc du footer) non ? Le overflow : hidden ou auto permet de les réintégrer de force dedans ? (juste pour être sûr d'avoir bien compris ).

Merci pour cette explication l'amie

Nohak_ >

Vu ce que tu m'as dit avant-hier dans un autre sujet, non, je ne suis pas ton amie. Mais je suis ravie de partager mes connaissances.

A noter que non, un élément en float ne devient pas inline, bien que sa largeur devienne celle de son contenant. Il devient en fait un "block box" : 

The element generates a block box that is floated to the left (or right).

Mais son display ne change pas.

Un peu de lecture (un poil indigeste, faut l'avouer) : http://www.w3.org/TR/CSS21/visuren.html#floats, http://www.w3.org/TR/CSS21/visuren.html#block-boxes.

Ce que je t'ai dit ? Faut arrêter de remettre la faute sur moi. Vu le ramassis de conneries qu'il y avait, c'était très dur de ne pas perdre son sang-froid. En outre, ce n'est qu'une simple expression pour montrer que je ne suis pas un enfoiré comme tu sembles le penser.

Sinon, alors, est-ce que j'avais bien compris ?

Edit : je t'envoie un MP histoire d'expliquer plus en détails mes propos et de ne pas rester bêtement en froid avec toi.

-
Edité par Nohak_ 23 juillet 2013 à 13:00:35

Oui, tu avais bien compris.

Eh bien merci pour ton explication

Nohak_ a écrit:

Je réponds à vos deux messages distinctement.

rigs

"Ou as-tu vu son doctype ?"

Voyons, voyons, pas de petite contradiction pour contredire. Le tutoriel de Mathieu Nebra est un tutoriel sur le HTML5, et l'auteur fait énormément la promotion de ce langage (à juste titre selon moi), comme la grande majorité des informaticiens. La grande mode (même pour les médias), c'est le HTML5. En outre, l'image qui illustre ce forum est le logo du langage HTML5.

Avec tout ça, je pense pouvoir affirmer qu'il est légitime de penser par défaut que le HTML5 a été choisi par les OP qui postent des topics pour qu'on les aide. Si ce n'est pas le cas, c'est à eux de le préciser.

TU pense ainsi donc Tu viens avec TES réponses et c'est aux autres de s'adapter.

Un seul float ne suffit pas (au lieu d'insister lourdement, je te prie d'essayer). Moi quand je poste une solution, je teste toujours sous Wamp et ensuite je la publie si elle marche (ou je la publie en montrant ce qui ne va pas si ma solution est bancale).

http://jsfiddle.net/rigs/hFrMz/

Et la tu compte combien de float ?

Au lieu d'insister lourdement tu devrais essayer, Car toi quand tu poste une solution tu es incapable de voir ce qui est bancale, tu poste juste un code souvent truffée de faute uniquement pour appuyer tes dires.

rigs, je peux savoir quelles sont les raisons d'un tel acharnement ?

Je ne vais pas tomber dans ton petit jeu.

Je disais qu'un seul float ne suffisait pas pour les solutions qui jusqu'alors avaient été proposées. Alors en effet, avec la solution que tu présentes-là, ça marche.

SAUF QUE, si on se limite à ce que désire obtenir l'OP, tu as recours à de trop nombreux éléments HTML pour ce qu'il faut faire, et c'est redondant. En HTML, il FAUT avoir recours au moins d'éléments possibles. Question de lisibilité, de maintenance, de performance (bon, cet argument est passable je te l'accorde).

Déjà, rien que pour ça, ta solution est moins adaptée que les autres.

Bon sinon, je ne vais pas répondre à tes provocations :

"Au lieu d'insister lourdement tu devrais essayer, Car toi quand tu poste une solution tu es incapable de voir ce qui est bancale, tu poste juste un code souvent truffée de faute uniquement pour appuyer tes dires."

"TU pense ainsi donc Tu viens avec TES réponses et c'est aux autres de s'adapter."

Ah, et ne t'attends pas à ce que je réponde à tes futurs coups de gueules totalement injustifiés et hors de propos dans ce topic. Je te demanderais de me contacter par MP si tu veux me harceler. Merci

-
Edité par Nohak_ 23 juillet 2013 à 22:13:14

De trop nombreux éléments html ? Un conteneur (mettons un div d'id "footer", comme a l'OP), et deux paragraphes, comme a l'OP. Où est la redondance ?