28112 sujets

CSS et mise en forme, CSS3

[Résolu] Encore un problème d'alignement vertical

Désolé de revenir sur un problème connu, pour lequel il y a des tas de textes apparemment très bien faits, mais rien à faire, je n'arrive toujours pas à comprendre comment faire du "vertical-align:middle" quand on n'est pas dans une cellule

Voir http://paralletes.free.fr/tests/tables-index1.html : comment aligner verticalement le texte qui est à droite de chaque image?
Les petits blocs sont des <figure>, l'image est une simple <img>, le texte est dans un <figcaption>.
Je n'arrive pas à styler <figcaption> pour qu'il reste à sa place horizontalement, son contenu reste comme il est mais l'ensemble du <figcaption> soit centré verticalement par rapport à l'image.
Noter que lesdits <figure> sont dans des cellules, ça ne simplifie pas le problème, me semble-t-il.
Compte tenu du contexte les solutions à base de flexbox sont exclues

Merci de votre aide...
Saut PapyJp,
ceci sur Alsac qui est bien expliqué devrait faire ton bonheur :
http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html
où, grâce à {vertical-align:middle} tu dois nécessairement déclarer un sous-conteneur (par exemple texte ou img) de hauteur fixe ... qui s'alignera alors au milieu de la hauteur d'un conteneur global d'une autre hauteur fixe et supérieure (par exemple <p>_</p>).

Il existerait une autre solution dont je crois me souvenir qu'elle appelle {margin:0} dans un sous-conteneur fixe, tout simplement ... dont width et height d'une img seraient quelconques. A vérifier !
Modifié par pictural (04 Sep 2015 - 19:23)
Pas question de passer par des hauteurs fixes, ça détruirait tout le mécanisme d'adaptation à différentes plateformes.
Il s'agit d'un problème simple qu'on traitait il y a 20 ans par des tables. On a défini CSS2 en jetant l'anathème sur lesdites tables (toujours pas compris pourquoi) et 15 ans après on ne sait toujours pas simplement faire cette chose simple?
Et avec {margin:auto} sans height fixe ?

Parlant de 'toute plate-forme', veux-tu parler de son corollaire IE v5.5 <6 ou ... =8 ? C-a-d Windows XP ?
Et que ton client est une entreprise rétive à se up-dater ? Si tel était le cas, ta stratégie de css est peut-être vouée à l'échec.
Modifié par pictural (04 Sep 2015 - 19:55)
margin:auto? C'est normalement fait pour ça, mais je ne l'ai jamais vu fonctionner ça en hauteur.
Ras le bol, je verrai demain....
PapyJP a écrit :
margin:auto? C'est normalement fait pour ça, mais je ne l'ai jamais vu fonctionner ça en hauteur (...)
Ben oui ! je l'ai vu fonctionner : pour l'un de mes diaporamas d'img de dimensions quelconques ; j'avais simplement déclaré le 'conteneur' des img avec les 2 dimensions maximales des img ... Lequel diaporama fonctionnait bien sous XP (c-a-d avec IE depuis v.5.5 jusque v.8, et bien évidemment v.supérieure qui considère css3).

Mais nous ne parlons peut-être pas d'un même et seul problème.
Modifié par pictural (04 Sep 2015 - 20:41)
Merci, je regarderai demain comment tu as fait.
Je suppose que c'est le "!important" qui importe?
a écrit :
Pour rappel float et l'alignement vertical freres sont incompatible.

Je suppose qu'il doit y avoir une bonne raison pour ça?
Des millions de personnes dans le monde se grattent la tête pour essayer de faire des chose apparemment simples. Apparemment "ease if use" ne fait pas partie du vocabulaire de certains, ni " ce qui se conçoit bien s'exprime simplement"....
Modifié par PapyJP (04 Sep 2015 - 21:35)
Effectivement PapyJP, tu as toujours la possibilité d'afficher des éléments comme des <table> avec le display:table sur le parent et display: table-cell pour l'enfant et tu retrouves du coup le comportement des tableaux.
Sinon, une solution sans display:table avec du position: absolute, du top: 50% et du transform: translateY(-50%) : http://codepen.io/korell/pen/RWNxmB?editors=110
Administrateur
PapyJP a écrit :
Pas question de passer par des hauteurs fixes, ça détruirait tout le mécanisme d'adaptation à différentes plateformes.
Il s'agit d'un problème simple qu'on traitait il y a 20 ans par des tables. On a défini CSS2 en jetant l'anathème sur lesdites tables (toujours pas compris pourquoi) et 15 ans après on ne sait toujours pas simplement faire cette chose simple?

Bonjour.

Je suis d'accord avec toi, on a bien trop rapidement diabolisé les tableaux sans avoir de vraies solutions pour des positionnements simples.
Le but de flexbox est justement de remédier à cela.

En attendant, et vu ton contexte, pourquoi n'utilises-tu pas des <table> / <td> tout simplement?
Peur de t'attirer les foudres des bien pensants ? Smiley smile

Allez, pour la route : http://www.google.fr/url?q=https://speakerdeck.com/goetter/vive-les-tableaux-de-mise-en-page Smiley smile
Modifié par Raphael (05 Sep 2015 - 08:43)
Merci à tous

La solution est bien de jouer sur les display:table et table-cell, ce que j'avais tenté de faire avant d'appeler au secours, mais je m'étais melangé les pinceaux.
J'ai fini par faire un truc qui marche à partir du code de gc-nomade mais il va falloir que je me plonge dedans à tête reposée pour comprendre COMMENT il marche, sinon je devrai en permanence faire appel à votre expertise, ce qui est très gentil de votre part mais n'est pas le but de l'opération.
Je reviendrai éventuellement sur les points obscurs.
Raphael a écrit :

En attendant, et vu ton contexte, pourquoi n'utilises-tu pas des <table> / <td> tout simplement?
Peur de t'attirer les foudres des bien pensants ? Smiley smile

Allez, pour la route : http://www.google.fr/url?q=https://speakerdeck.com/goetter/vive-les-tableaux-de-mise-en-page Smiley smile

Bonjour Raphaël
Le problème pour lequel j'évite les <table> et autres balises de la famille, c'est un autre aspect du contexte dont je n'ai effectivement pas parlé:
Sur ce site, je suis en assistance à un webmaster qui écrit tout en HTML, par opposition aux sites que je gère directement ou je n'écris pratiquement rien en HTML (c'est du HTML généré par PHP à partir de fichiers XML).
J'essaie de lui apprendre à travailler en terme d'objets simples sans se préoccuper de leur présentation, par opposition avec ce qu'il fait actuellement qui consiste à multiplier les appels aux snippets par Dreamweaver et a pour conséquence un code très difficile à maintenir, surtout si on veut changer le look.
Il faut savoir que ce site comprend des centaines de pages écrites sur ce modèle et des milliers de photos. Tout ce qu'on veut c'est relooker un peu l'existant et faire des modèles pour les nouvelles pages qui soient plus faciles à manipuler et relooker plus tard, en utilisant certaines possibilités actuellement offertes, mais pas toutes à cause de la compatibilité nécessaire avec des navigateurs un peu anciens pour ne pas décourager le public de visiteurs réguliers (quelques milliers, des individuels sur l'ensemble du globe).
J'ai écrit pas mal de JS pour modifier dynamiquement les pages au chargement en jouant sur le DOM, mais pour le "nouveau style" de pages que nous sommes en train de définir j'essaie de garder autant que possible la séparation des données et de la présentation.
Dès l'instant où les données sont directement dans le HTML, j'évite de mettre des <table> dont le rôle ne serait que de faire de la présentation (par opposition aux "vraies tables")

Et quand je n'y arrive pas, par exemple pour éviter les flex-box insuffisamment supportées par les navigateurs de notre fond de commerce, je fais du JS pour générer lesdites balises tabulaires.
Voir http://forum.alsacreations.com/topic-4-76763-1-Tablesdindex.html

En fait, si je n'avais pas trouvé de solution satisfaisante par CSS j'aurais fini par faire un tel script JS, et j'avais commencé à le faire après avoir lancé mon SOS.

Désolé d'avoir été un peu long...
Un peu tard, mais...

... avec ça... :

<body>
<main>
<h1>Les schtroumpfs</h1>

<figure>
<img src="smurfs_fichiers/schtroumpf_farceur.jpg">
<figcaption>
<h2>Lorem Elsass ipsum Gal !</h2>
<p>senectus merci vielmols flammekueche ch’ai schnaps nüdle dui ullamcorper</p>
</figcaption>
</figure>

<figure>
<img src="smurfs_fichiers/schtroumpfette.jpg">
<figcaption>
<h2>vulputate id suspendisse mollis blottkopf, non turpis quam</h2>
<p>habitant libero, libero, hopla ante aliquam hop Gal.</p>
</figcaption>
</figure>

<figure>
<img src="smurfs_fichiers/grand_schtroumpf.jpg">
<figcaption>
<h2>schneck Salu bissame</h2>
<p>elit Hans météor messti de Bischheim sagittis elementum</p>
</figcaption>
</figure>

<figure>
<img src="smurfs_fichiers/schtroumpf_coquet.jpg">
<figcaption>
<h2>Carola Oberschaeffolsheim</h2>
<p>dignissim varius libero. Spätzle baeckeoffe placerat</p>
</figcaption>
</figure>

<figure>
<img src="smurfs_fichiers/schtroumpf_moralisateur.jpg">
<figcaption>
<h2>hopla Chulien bredele auctor</h2>
<p>chambon Kabinetpapier quam</p>
</figcaption>
</figure>
</main>
</body>
</html>


... et ça... :

* {
	padding: 0;
	margin: 0;
}

body {
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
}

main {
	width: 996px;
	padding: 30px;
	border: 2px solid red;
	border-radius: 10px;
	margin: 20px auto;
}

h1 {
	text-align: center;
	margin-bottom: 30px;
}

figure {
	display: table;
	width: 448px;
	padding: 15px;
	border: 2px solid red;
	border-radius: 10px;
	margin-bottom: 30px;
}

figure:nth-of-type(odd) {
	float: left;
}

figure:nth-of-type(even) {
	float: right;
}

figure:last-of-type {
	float: none;
	margin-bottom: 0;
}

img, figcaption {
	display: table-cell;
	vertical-align: middle;
}

img {
	height: 208px;
	margin-right: 15px;
}


... j'obtiens ça :

upload/208-smurfs.png

Bon, c'est juste un proof of concept, c'est en pixels, c'est pas adaptatif.

C'est en tout cas OK sous Chrome et Firefox... mais bordélique sous IE11. Pourtant, si c'est du HTML5, côté CSS, ce n'est que du bon vieux CSS 2.1.

Il y a aussi la solution du multicolonnage avec saut de colonne, mais apparemment, c'est pas très bien supporté (ou j'ai rien compris) Smiley decu
Modifié par thierry (15 Sep 2015 - 15:00)
thierry a écrit :
Un peu tard, mais...

figure {
	display: table;
	width: 448px;
	padding: 15px;
	border: 2px solid red;
	border-radius: 10px;
	margin-bottom: 30px;
}

....


avec display:inline-table; , pas besoin de faire du float en plus Smiley smile
http://codepen.io/anon/pen/MaYZmN
figure {
  display: inline-table;
  width: 45%;
  padding: 15px;
  border: 2px solid red;
  border-radius: 10px;
  margin-bottom: 30px;
  text-align:left;
}

Modifié par gc-nomade (05 Sep 2015 - 17:04)
Merci, inline-table, je ne connaissais pas Smiley smile

edit

Dans mon exemple, ça ne marche pas sous IE (version 11) parce que celui-ci ne connait pas la balise <main>.

Pour le inline-table, je suis partagé. Certes, il ne faut pas utiliser de float, mais il faut définir un margin: left/right pour les éléments de de droite ou de gauche, margin qu'il faut redéfinir en cas de modification de la largeur du conteneur ou des contenus, tandis qu'avec le float: left et float right, non.

Par contre, le dernier élément ne doit pas être en float, sinon, évidemment, tout déborde vers le bas hors du conteneur.
Modifié par thierry (15 Sep 2015 - 15:07)
Cher PapyJp,
en code web il y va comme en construction de bâtiments : c'est judicieux de dresser les plans d'une bâtisse finie, puis de la dé-construire pour en comprendre que sous la tuile ou l'ardoise se placent des tasseaux de bois qui reposent sur des chevrons qui reposent sur des bastaings ou des madriers qui reposent sur d'autres assises qui reposent sur des murs ...qui reposent sur des fondations.

Bon ! je ne t'apprendrai rien de la sorte, cependant les différents posts qui te sont livrés intelligemment te répondent en ce sens ...

Non ?

Maintenant en matière de ruine du 17è, j'ai eu à pourfendre derechef quelques planchers pourris, au printemps dernier ... parce j'avions de la franche autorité.
Modifié par pictural (06 Sep 2015 - 00:11)
pictural a écrit :
Cher PapyJp,
en code web il y va comme en construction de bâtiments...

Tout à fait, et pas seulement en code web, mais c'est valable pour toutes les activités humaines!

Maintenant il y a des concepts clairs sur lesquels on peut facilement échafauder des constructions, et des bidules plus ou moins bien structurés avec lesquels il faut se dépatouiller.

On pourrait espérer que ce qui sort de l'esprit humain soit structuré, mais quand on travaille en comité la logique disparaît s'il n'y a pas un bon coordinateur. Et comme un comité de normalisation est fait de représentants d'entreprises concurrentes, la coordination est extrêmement difficile à faire. Et quand on a un bon coordinateur, les entreprises participantes lui scient la branche et vont jusqu'à renier les travaux de leurs propres représentants.
Ayant eu le plaisir de servir de coordinateur ans ce genre de situation, je sais de quoi au sujet de....
Bonsoir PapyJp,
malgré ton topique résolu, j'ai mis la main sur mon bout de code qui règle d'emblée le positionnement par exemple d'img en pseudo vertical-align:middle ; autrement mais que tu pourras modifier à façon, c-a-d par l'inverse qui comprend <a> pour du texte à la suite d'une img

La page est en ligne ici qui fonctionne bien (pour repère visuel j'ai convenu d'un fond gris pour l'évidence et des dimensions d'img quelconques) : http://sentrais.eu/test-position-img/diaporama.htm

L'astuce réside en le style #conteneur img{/*et les déclarations*/}

Cela pourrait intéresser plus d'un d'entre nous ...
Modifié par pictural (08 Sep 2015 - 10:55)
Sujet clos
Aller à