1485 sujets

Web Mobile et responsive web design

[Résolu] Trois <p> à widht: 30% sur une même ligne non responsiv

Bonjour à tous,
Je vous soumets un petit cas car je n'arrive pas à comprendre ce qui ne va pas.

Trois petits paragraphes que je souhaiterais responsive sur toute la largeur de l'écran.

Premièrement, j'y arrive en mettant pour chacun une valeur de 33% upload/1548345501-74154-600px.png
et par contre ça ne fonctionne pas avec des valeurs 30%- 40%-30%.

Deuxièmement, si je diminue la taille de l'écran, les trois <p> s'ajustent bien à la taille de l'écran. Par contre, sous 597px de large, le "coté" droit passe à la ligne automatiquement upload/1548345656-74154-596px.png
Testé sous opera et Firefox.

Ps: les cadres ne sont là que pour la visualisation

Je ne vois pas ce qui cloche.

Je vous remercie par avance pour votre précieuse aide.
Bien à vous.

<body>
    <p id="cote">Gauche<p>
    <p id="titre">Titre</p>
    <p id="cote">Droite<p>
  </body>



#titre {
border-style: solid ;
border-color: #850303;
border-width: thin;
float:left;
width:33%;
}

#tour{
border-style: solid ;
border-color: #850303;
border-width: thin;
float:left;
width: 33%;
}
Modérateur
Coucou,


Je mise tout sur les espaces insécables : https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html ET sur le soucis du border qui rajoute 2 px aux 33% (voir le box-sizing : https://www.w3schools.com/cssref/css3_pr_box-sizing.asp )

Au passage plutot que d'utiliser float utilise inline-block

Toujours au passage le CSS que tu as collé est WTF. Aucun raport avec le HTML.

Toujours au passage : le HTML est aussi en vrac, tu ne fermes pas correctement tes balises p

HOP -> https://jsfiddle.net/undless/9rLgn25e/5/

Bonne soirée
Modifié par _laurent (24 Jan 2019 - 17:16)
Merci Laurent pour votre précieuse aide.

J'avais effectivement omis le / dans la balise <p> de fermeture Smiley confused ...mais ça n'avait aucun impact sur le résultat.

Ma version fonctionne, en float, si j'avais mis mes trois <p> dans un div. Visiblement j'ai fait le mauvais choix pour le float vs inline-block

Par contre, n'aimant pas ne pas comprendre j'ai deux questions subsidiaires...si vous avez le temps :
- J'ai pas tout compris pour l'histoire des "espaces insécables" car je n'avais pas c'est espaces dans les deux images que j'avais jointes sauf si mon problème ne venait que du float ou de l'absence de <div>
- "le CSS que tu as collé est WTF. Aucun raport avec le HTML." : bah alors là je sais même pas ce qu'est le WTF !!! Smiley confus

En tous les cas je comprendrais si vous n'aviez pas le temps et merci encore pour votre car ça fonctionne parfaitement;
Bien à vous
Modérateur
Salut,


Désolé PascalitoDelParis j'étais pas dispo ce weekend.



PascalitoDelParis a écrit :
J'avais effectivement omis le / dans la balise &lt;p&gt; de fermeture Smiley confused ...mais ça n'avait aucun impact sur le résultat.

Ca devait être un coup de chance parce-que ca peut vraiment TOUT changer vu que c'est ton navigateur qui les ferme automatiquement.

PascalitoDelParis a écrit :
Ma version fonctionne, en float, si j'avais mis mes trois &lt;p&gt; dans un div. Visiblement j'ai fait le mauvais choix pour le float vs inline-block

Pas forcément le mauvais choix mais j'ai tendance a éviter d'utilise float. Seulement dans des cas très spécifiques. Float fait sortir les éléments de leurs flux naturels et ça peut être gênant.

PascalitoDelParis a écrit :
- J'ai pas tout compris pour l'histoire des "espaces insécables" car je n'avais pas c'est espaces dans les deux images que j'avais jointes sauf si mon problème ne venait que du float ou de l'absence de &lt;div&gt;

Rien a voir avec les espaces insécable ici effectivement. Les float n'ont pas ce problème. Ici le seul soucis que tu avais c'était mon deuxième point : le "box-sizing".
En gros tes 3 block faisaient 33%. Ca fait 99% au total. Il reste donc 1% de vide.
Tes 3 block on chacun 2 coté (droite et gauche) avec un border de 1px (non compris dans les 33%). Ce qui fait au total 6px. DONC en fonction de la taille de l'écran, quand 1% de la largeur est inférieur à 6px, il n'y a plus la place d'afficher tout les block cotes a cotes et ça tombe.
Le propriété "box-sizing:border-box" fait en sorte que le border soit pris en compte dans la width définie. Duc oup le simple ajout de "box-sizing:border-box" aurait fixé ton soucis (modulo le passage de float à inline-block)

PascalitoDelParis a écrit :
- "le CSS que tu as collé est WTF. Aucun raport avec le HTML." : bah alors là je sais même pas ce qu'est le WTF !!! Smiley confus

WTF pour "what the fuck" juste pour dire que ton CSS était incohérent avec ton code.

Dans le HTML tu as 2 id : "cote" et "titre".
Dans ton CSS tu as 2 id : "titre" et "tour".

Donc l'id "cote" n'est jamais défini dans le CSS, et le CSS pour "tour" n'est jamais appliqué.
Tu n'as pas non plus de CSS s'applicant aux 3 block en meme temps (sans compter que tu ne peux pas mettre 2 id similaire dans le HTML comme le souligne AffairesLance -> il faut utiliser les classes).

Bref ton code avait besoin d'être nettoyé avant ! Smiley cligne

Bonne journée
Bonsoir,
Ne serait-il pas plus simple et fiable d’utiliser Flexbox ? Par exemple :
body {
display: flex;
}

sous-entendu
body {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}

D’après ce que j’ai rapidement testé, ça forme trois paragraphes de la même largeur, côte-à-côte et qui prennent en tout 100% du conteneur.
Sujet clos
Aller à