28106 sujets

CSS et mise en forme, CSS3

Bonjour,
je bidouille du css sans trop en comprendre les arcanes... mais je bosse et cherche. Le w3c css a validé mon code mais ce n'est pas pour cela que tout roule...
Le modèle de boite de l'inspecteur firefox m'explique naïvement l'imbrication de mes div et me permet de comprendre pourquoi je ne vois pas ce que je devrais voir (image) : "ma div fait -40x-40..."

j'ai enlevé deux bordures expérimentales de 10 px et je me retrouve à juste titre je pense avec -20x-20.

Voici le css
.diapo {  /* la div externe. S'affiche normalement
	position: relative;
	border: 1px solid orange;
	min-height: 550px;
	font-size: 1.1em;
	font-family: cursive;
	font-style: italic;
	max-width: 90%;
	margin: 0 auto;
	-webkit-border-radius: 10px 0;
	border-radius: 25px 100px;
	padding: 15px;
}
/* cette div contient un paquet flex qui rassemble 2 éléments */

.paquet {
	display: flex;
 	justify-content: space-around;
}

		.intro {
			width: 30%;
			float: left;
			font-family: cursive;
			font-size: 0.8em;
			line-height: 1.5em;

		}
		.slide {
			width: 60%;
			height: 550px;
			float: right;
			margin: 0 auto;
			text-align: center;
			background-color: #808080;
			border-radius: 30px;
			overflow: hidden;
			border: dashed red;
	
		}
/* .slide s'affiche correctement. Dans ce slide il y a un diaporama tout en css (qui fonctionne sur une autre page sans tout le fourbi ci-dessus....  le diaporama est basé sur une liste avec bouton radio qui identifie l'image en cours d'affichage */
l'UL a une identification 
#corps3 {
    left: 50%;
    width: 550px;
    height: 550px;
    display: block;
    position: absolute;
    margin-left: -138px;
	top:50px;
}

..., #corps2, #corps3, #corps4 * {  /* j'ai plusieurs diaporama possible dans la page dont je différencie les idées avec des variables dynamiques */
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

#corps0, #corps1, #corps2, #corps3 input, #corps4 input { display: none; } /* pour l'imput donc qui ne dois pas être visible */

/* et voici id afficheuse de l'image, celle qui se retrouve à -20x-20
#img-inner0, #img-inner1, #img-inner2, #img-inner3, #img-inner4 {
    top: 0;
    opacity: 1;
    width: 550px;
    height: 550px;
    display: block;
    position: absolute;
	    
    transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    
    transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
	
}
.img-container {
    width: 100%;
    height: 100%;
    padding: 0;
}
#img-inner0, #img-inner1, #img-inner2, #img-inner4 img {
    width: 100%;
    height: 100%;
}


Voici l'html

<div id="Al" class="oModal">
	<div class="omodal-dialog" style="overflow-y: scroll; max-height:85%;  margin-top: 40px; margin-bottom:50px;" >
	
		<div class = "diapo" style ="background-color:#A9D0F5;">
                       <div class= "paquet">
		             <div class = "intro">
			blabala
		          </div>
		
		         <div class = "slide">
			<ul id="corps3">
                            <input type="radio" name="radio-btn" id="img-1" checked  />
                                <li class="img-container">
                                   <div id="img-inner3">
                                         <img src="/images/..." width = 500 >
                                  </div>
                                 <label for="img-2" class="sb-bignav" title="Next">Suivante</label>
                             </li>
.................
.................
.................
                            <input type="radio" name="radio-btn" id="img-9"  />
                                <li class="img-container">
                                   <div id="img-inner3">
                                         <img src="/images/..." width = 500 >
                                  </div>
                                 <label for="img-1" class="sb-bignav" title="Previous">Précédente</label>
                                  </li>
                          </ul>
		</div> /* fin class slide */
	</div> /* fin class paquet*/
     </div> /* fin class diapo*/
</div> /* fin class modal-dialog*/
</div> /* fin id Al class modal */


Voilà ma question : pourquoi le résultat de l'affichage image est-il -20x-20 ? Il doit y avoir un truc qui coince mais je capitule dans la recherche solitaire...

Avec tous mes remerciements...
Modérateur
Salut,

Ici le conteneur de ton image fait 0x0 du coup avec scale(0).
A mon avis tu comprends mal un truc. Ce n'est pas possible à ma connaissance d'avoir une taille négative. T'es sur que c'est pas sa position ? Est-ce que tu peux nous faire un screenshot de Firefox avec ce -40p x -40px ?

Est-ce que ton code est en ligne quelque part ?


Au passage, les commentaires dans le HTML c'est
<!-- commentaire -->

et dans le CSS c'est :
/* commentaire */

Il faut bien penser a les refermer parceque sinon ca commente tout le code
Et pense a indenter correctement ton code c'est plus lisible pour tout le monde, parce que là déjà faut essayer de comprendre mais en plus on doit se taper du ménage de code pour voir quelque chose Smiley sweatdrop
Modifié par _laurent (07 Mar 2022 - 15:54)
upload/1646684133-84300-modeleboiteslide.jpg Bonsoir et merci _laurent pour ces commentaires sympathiques.

En fichier joint le code de l'inspecteur avec le modèle de boite comme demandé.

Je reprends maintenant tes thèmes de commentaires (en gras) pour y répondre :

1) Le scale(0) fonctionne sur un autre slide installé en page d'accueil (même structure). J'ignore pourquoi il y a ce scale(0) (j'ai bien dit que je bidouille le css bien plus que je ne le comprends, ce code css n'est donc pas de moi qui reste bien trop près des pâquerettes sur ce sujet). Bref.
La dimension -20x-20 est bien celle de l'intérieur du cadre, tu pourras le voir par toi-même. (Je ne sors pas du CSS - Collège St Syr m'a-t-on expliqué un jour - mais pas besoin de ça pour en arriver à l'évidence). C'est donc possible au moins en tant qu'affichage sur la base des mesures extérieures. (Moi aussi j'aime bien voir ce qu'il me faut croire, mais mon boulot m'invite en général à accepter les trucs qui ne se passent pas comme prévu... et donc en venir à fournir une tentative de compréhension plus qu'une explication Smiley cligne .)
Le code n'est en ligne. Il le sera quand les images s'afficheront selon mes attentes. J'ai tenté plusieurs modèles de slide mais ils sont souvent inutilement lourd pour ce que je veux en faire : je clique et ça avance, d'autres portent un peu de JS mais là, mes compétences sont même moindres qu'en CSS, bref.

2) Les commentaires... oui, je sais je m'en suis aperçu trop tard. Le code est celui du source affiché et les commentaires n'en font pas partie donc le code fonctionne partout aileurs que dans ce fichu cadre #img-inner... ils sont là juste pour détailler un peu les choses. Et comme je code surtout en php pour bd les commentaires html se font rares pour moi. <!-- Je suis absolument désolé d'avoir fait cette erreur. --> D'ailleurs je pense qu'ils sont tous fermés.

3) L'indentation... elle ne me paraissait pas optimum mais il y a bien pire, je me rassure en me disant cela... (d'autant que ce n'était pas une question pour moi) et aussi qu'elle est quand même pratiquable sans trop d'effort (mais peut-être que je me trompe, désolé _laurent).

J'espère avoir fourni de quoi lever le mystère de cette dimension rocambolesque parce que j'ai cherché jusqu'aux moindres "," et autre" ";" sans parler des "<" et des ">". Pourtant il y a un truc peut-être aveuglant qui coince quelque part !!! J'ai essayé de renommer les .class et les #id, ou encore de remplacer les #id par des .class, cela ne fait que générer d'autres problèmes.
Modifié par Patrick30 (07 Mar 2022 - 21:15)
Modérateur
Saluit Patrick30 !

Merci pour le screenshot. Dans le code que tu nous a donné il manquait :
div {
    padding: 10px;
}

Sans lui le -20 -20 n'apparaissait pas sous FF.

Quand on rentre une valeur négative elle n'est pas prise en compte. Et ici si on survole le bloc il s'affiche bien a 0x0 sur l'écran. Sur Chrome il reste à 0x0 en tout cas. Ce doit donc juste être un calcul avec le scale(0) qui donne un résultat étrange sous FF.

Voila une fois extrait on peut observer ce comportement : https://jsfiddle.net/undless/ot45qLfp/
j'ai rajouté un poil de JS pour afficher la taille du bloc mais il la sort bien à 0x0 aussi, donc je pense que c'est juste le modele de boite de l'inspecteur de FF qui se foire.
upload/1646729658-42161-size.jpg


Patrick30 a écrit :
pour ces commentaires sympathiques.

Si il y a bien une pointe de sarcasme comme je crois le déceler, je suis désolé à mon tour si je t'embête avec ça. C'était juste des conseil pour faciliter le taff de ceux qui passent sur le sujet et donc maximiser tes chances de te faire aider. Quand tu postes du code sur un forum, si en plus du soucis de base il faut qu'on nettoie le code avant de voir un truc je t'assure que tu perds au moins 50% des gens.

Patrick30 a écrit :
La dimension -20x-20 est bien celle de l'intérieur du cadre, tu pourras le voir par toi-même. (Je ne sors pas du CSS - Collège St Syr m'a-t-on expliqué un jour - mais pas besoin de ça pour en arriver à l'évidence). C'est donc possible au moins en tant qu'affichage sur la base des mesures extérieures. (Moi aussi j'aime bien voir ce qu'il me faut croire, mais mon boulot m'invite en général à accepter les trucs qui ne se passent pas comme prévu... et donc en venir à fournir une tentative de compréhension plus qu'une explication Smiley cligne .)

Pas besoin de sortir de St Cyr effectivement pour voir qu'il y a marqué -20 dans l'inspecteur, de là a affirmer que c'est possible "en tant qu'affichage"... Comme vu au dessus, c'est un bug au moment du calcul du modèle de boite dans l'inspecteur je pense (cf survol, aspect, Js; valeurs de l'inspecteur) un affichage négatif n'a pas de sens et n'est pas interprété.

Patrick30 a écrit :
2) Les commentaires... oui, je sais je m'en suis aperçu trop tard.

Pas de soucis. Au passage, tu peux éditer tes commentaire à tout moment si jamais tu te loupes un jour.

Patrick30 a écrit :
D'ailleurs je pense qu'ils sont tous fermés.

Tous fermé oui mais en mode CSS et pas HTML c'est pour ca que je me suis permis de le préciser, encore une fois pour t'aider.

Patrick30 a écrit :
L'indentation... elle ne me paraissait pas optimum mais il y a bien pire, je me rassure en me disant cela... (d'autant que ce n'était pas une question pour moi) et aussi qu'elle est quand même pratiquable sans trop d'effort (mais peut-être que je me trompe, désolé _laurent).

Continuer à faire mal parce qu'il y a pire ailleurs n'est jamais une bonne solution a mon sens Smiley lol Aucun soucis si tu ne veux pas le faire, mais d'expérience, je peux ta garantir qu'un bonne indentation va t'éviter quelques soucis, surtout si tu débutes. Voir clairement d'un coup d'œil qui est dans quoi et si toutes les balises sont bien fermées c'est, pour moi, indispensable. Et ca améliore la lecture du code pour ceux qui viennent aider etc. Si ca t'ennuie il y a des outils qui le font très bien en 1 clic, sinon tu peux tout laisser comme ca. Ce sont des conseil, pas des ordres.

Patrick30 a écrit :
J'espère avoir fourni de quoi lever le mystère de cette dimension rocambolesque parce que j'ai cherché jusqu'aux moindres "," et autre" ";" sans parler des "&lt;" et des "&gt;". Pourtant il y a un truc peut-être aveuglant qui coince quelque part !!! J'ai essayé de renommer les .class et les #id, ou encore de remplacer les #id par des .class, cela ne fait que générer d'autres problèmes.

J'espère qu'on est allé assez loin dans l'investigation pour répondre à ta curiosité.

Bonne journée
Bonjour _laurent et merci, je vais voir tout ça d'ici demain soir, donc pas d'inquiétude si je ne me manifeste pas.

Ma pointe de sarcasme un peu amer remonte à un aspect que je trouve souvent sur ses forums techniques, ici ou ailleurs où je passe silencieusement. Et ainsi je viens de faire l'essai de ce genre de leçon dont tu m'as gratifié. Rassure-toi don, rien de personnel : on ne se connait pas ! Mais je trouve souvent, tout en le comprenant, que les réponses des pro sont un peu violentes face à la naïveté du quidam qui ose poser une question. Par exemple, pour ma part j'ai donné plus d'importance au fond qu'à la forme, et toc, je me fais saper sur la forme où je reconnais n'avoir pas été très scrupuleux même si j'ai fait un effort. Smiley lol

Bon, ce n'est pas grave, cette leçon, elle vaut bien... non, pas un fromage:!... disons ma gratitude pour m'avoir fait touché du doigt une faiblesse des systèmes propriétaires qui nous observent du coin de l’œil et nous offrent un service qu'on croit nickel.

Et je me répète mais je comprends tout à fait ton point de vue _laurent.
Je vais travailler la question et fouiller davantage le css pour comprendre ta suggestion.

Je validerai quand j'aurai testée ta solution. Mais quoi qu'il advienne de notre avenir, je te remercie.
kerlutinoec a écrit :
Euh, y'a écrit 'position' au dessus de ton rectangle vert-caca-d'oie

oui, j'ai vu. Pour moi cela aurait tendance à signifier que le cadre central fait -20x-20 comme écrit.
Rien à voir avec une "position" selon cette image où 80 = 54 (width) + 2x13 et 51 = 17 (height) + 2x7
(tiré de https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/UI_Tour#computed_view )
Merci quand même kerlutinoec.
Modifié par Patrick30 (08 Mar 2022 - 19:06)
Modérateur
Patrick30 a écrit :
Et ainsi je viens de faire l'essai de ce genre de leçon dont tu m'as gratifié. Rassure-toi don, rien de personnel : on ne se connait pas ! Mais je trouve souvent, tout en le comprenant, que les réponses des pro sont un peu violentes face à la naïveté du quidam qui ose poser une question. Par exemple, pour ma part j'ai donné plus d'importance au fond qu'à la forme, et toc, je me fais saper sur la forme où je reconnais n'avoir pas été très scrupuleux même si j'ai fait un effort. Smiley lol

Bon, ce n'est pas grave, cette leçon, elle vaut bien... non, pas un fromage:!... disons ma gratitude pour m'avoir fait touché du doigt une faiblesse des systèmes propriétaires qui nous observent du coin de l’œil et nous offrent un service qu'on croit nickel.

Je vais également me répéter alors, ce n'était en aucun cas une leçon mais un conseil en tout amitié ! Et je m'excuse si ma première réponse n'était pas assez amicale pour que tu la perçoives ainsi. Loin de moi l'idée de faire une réponse violente, ou de faire preuve de condescendance, nous sommes justement là pour aider et soutenir les débutants, nous l'avons tous été ! Smiley smile

Si ca peut t'aider dans ta réflexion j'ai fait quelques tests ca m'a rendu curieux :

Situation de base : height 50px et padding 20px (donc 90px de haut)
- Avec un scale a 0.5 la visualisation des taille de l'inspecteur de firefox montre une height de 5px et un padding de 20px (45px de haut).
- Avec un scale a 0.2 on a une height a -22px et toujours les padding a 20px (18px de haut).

Le scale va agir sur la hauteur totale de l'élément (90px / 2 = 45px) mais FF retranche a cette hauteur les padding initiaux pour afficher la hauteur de la boite. Je ne sais pas si c'est voulu ou si c'est une erreur due au scale. On pourrait s'attendre à avoir 2 padding de 10px et une height de 45px - 10px - 10px soit 25px (donc les 50px initiaux / 2) plutôt, mais en y réfléchissant c'est peut etre pas ce qui suis le mieux le calcul du moteur... mes connaissances sur le rendu des navigateurs se sont arrêtés un peu plus haut donc je laisse la main.

Bonne soirée


kerlutinoec a écrit :
Euh, y'a écrit 'position' au dessus de ton rectangle vert-caca-d'oie

@kerlutinoec : le titre "Position" est la pour les chiffres dans le noir* autour de la boite, tout comme "margin" pour les chiffre dans le jaune*, "border" le gris* et "padding" le violet*. Dans le bleu* au milieu c'est la taille de la boite.

(* couleurs non contractuelles dépendantes du navigateur et du thème)
Patrick30 a écrit :
Le modèle de boite de l'inspecteur firefox m'explique naïvement l'imbrication de mes div et me permet de comprendre pourquoi je ne vois pas ce que je devrais voir (image) : "ma div fait -40x-40..."

Je me cite, c'est plus simple !

En fait je ne fiche un peu de savoir comment augmenter l'espace où je voudrais voir une image : je veux voir mon image rien que ça. Mais si je mets du padding, je ne vois pas plus d'image que sans padding puisque le padding crée de l'espace rempli... de vide, non ?!
Alors je reformule ma question:
Comment créer l'espace img-inner pour voir une image dedans ?
Ou/Et qu'est-ce qui coince dans mon code pour que ça coince à l'affichage ?

Donc désolé _laurent, je n'ai pas la culture css pour faire plus... Smiley sweatdrop
Modérateur
Patrick30 a écrit :
En fait je ne fiche un peu de savoir comment augmenter l'espace où je voudrais voir une image : je veux voir mon image rien que ça. Mais si je mets du padding, je ne vois pas plus d'image que sans padding puisque le padding crée de l'espace rempli... de vide, non ?!
Alors je reformule ma question:
Comment créer l'espace img-inner pour voir une image dedans ?
Ou/Et qu'est-ce qui coince dans mon code pour que ça coince à l'affichage ?


Mmmmm je ne suis pas sur de comprendre du coup. La propriété "scale" est une mise a l'échelle et un scale(0) réduit à 0 ton bloc. Donc padding ou pas, meme avec une height immense de base tu ne verras rien de toute façon vu que ton élément est réduit a 0.

Il faut virer le scale(0) si tu veux voir ton image ou mettre une valeure plus grande que 0. Je t'avoue que j'ai pas bien saisi la finalité de ton code, le pourquoi un scale(0) etc.

Bonne soirée
Tout fonctionne après fermeture des autres modal en réserve sur la page pour ouverture différée sur clic. Le problème est là, donc chez moi, pas dans le code que je vous ai confié.

POUR INFO : la div en question est toujours affichée à -20x-20. Le mystère reste entier à ce niveau-là mais c'est bien le cadet de mes soucis.

Je relancerai les sujet si ça coince non pas à nouveau mais d'une autre manière. J'ai été bien reçu, ça crée des liens Smiley smile .... MERCI !

Si jamais vous avez le sentiment que je vous ai fait perdre votre temps, j'en suis désolé, mais dans le cas contraire j'espère que vous aurez eu du plaisir à chercher le pourquoi du comment de la div au dimensions négatives. Smiley smile
Modifié par Patrick30 (10 Mar 2022 - 08:56)
Modérateur
Patrick30 a écrit :
Si jamais vous avez le sentiment que je vous ai fait perdre votre temps

Non non jamais. Sinon on répond pas. Et on ne serait même pas là a trainer sur le forum pour aider ! Smiley lol Ne te sent pas gêné et ne t'excuses pas pour tout ! On est là pour ça Smiley smile (y'en a qui ne font vraiment aucun effort et demande du taff gratos sans même un bonjour ni une réponse apres donc là pour le coup t'es irréprochable)

Bonne journée l'ami ! Smiley smile
hello,
le secret du scale(0).
c'est un diaporama. la première photo, checkée, est affichée. quand on passe à la suivante celle-ci passe de 0 à 1 en terme d'échelle, tandis que la premère rejoint son oubliette.
si on scale plus grand que zéro, les images sont visibles selon l'échelle donnée.

cela ne m'explique pas implicitement les dim négatives données parle calcul chez firefox, mais je n'ai plus cherché.
bon vent à vous