Casse-tête de positionnement

**souviron34** · 21/04/2018, 04h17

Bonjour à tous..

Cela fait plusieurs jours que je tente de trouver une solution à un problème, et je sèche...

Donc je fais appel à vous

J'ai un cas comme celui-ci (enfin, j'aimerais !! ) :

Nom : ex1.gif
Affichages : 189
Taille : 5,7 Ko

La div "jaune" prend 100% en largeur.
La div2 (à droite) 65% de largeur, et dans cette div j'ai du texte (dans la div d'en haut) et un diaporama (div d'en bas)
La div1 (à gauche) prend 35% en largeur, et contient du texte... long... ( texte mais aussi des div... un peu comme si c'était un iframe)

A priori, j'ai mis la div jaune en "display:table" et les div1 et div2 en "display:cell"

Le problème que j'ai est que la div1 à gauche soit grandit jusqu'à ce qu'il n'y ait plus de texte, soit , si je met l'overflow, s'attend à ce que je donne une hauteur max (max-height). Le "texte" qui se met dans cette div est du html (voir plus haut)...

Cependant, les images du diaporama sont en % de la largeur : div2 = 65% du total, diapos = 97% de ça. Du coup, pour garder les proportions, la hauteur des images varient suivant le redimensonnement du navigateur.

Je n'ai donc pas de hauteur fixe en pixels. Je connais par contre le rapport hauteur/largeur des images, et la hauteur entre le haut du diaporama et le haut de div2

MAIS je n'arrive pas à mettre un max-height sur la div1 qui soit consistant..Quand je retaille le navigateur, ça monte ou ça descend, mais ça ne reste pas au niveau du bas du diaporama...

Question:

est-il possible d'avoir comme une ligne d'une table, mais sans que la div (ou cellule) de gauche s'agrandisse en hauteur, et que ça prenne la hauteur de la div de droite, quelle qu'elle soit... et que la boite du texte (pas pur, voir plus haut) prenne toute la hauteur disponible sans avoir à préciser le max-height ?

Ou, formulé autrement, est-il possible d'avoir une ligne de table dont la hauteur soit basée sur la div2 (à droite), et pour laquelle le texte (trop long) à gauche rentre dans un overflow avec ascenceur de LA bonne taille ?

Merci

Invité · 21/04/2018, 08h17

Bonjour,

1- montre-nous au moins la structure HTML de ta page (une base de travail).

2- Les bandes jaunes en haut et en bas servent à quelque chose ?

3- Intéresse-toi aux flexbox : display:flex;

**souviron34** · 21/04/2018, 12h59

Bonjour

Ca va être un peu dur (je lis des fichiers et construit ma page en fonction), mais en gros, pour ce cas-ci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
 
/* Menu "fixed" en haut */
<div header>
<div class=menu>......</div>
</div>
 
/* contenu */
<div class=contenu>
...
</div>
 
/* Copyright et liens prives */
<div class=footer>...</div>
</body>

La classe contenu est 100% en width

C'est dans cette classe-là que ça se passe, exactement comme j'ai décrit :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<div class=contenu>
....
/* La div appellee "div" ci-dessus */
<div class=diaporama>
 
/* La div de gauche */
<div class=text>
...
</div>
 
/* La div de droite */
<div class=zonediapo>
...
</div>
 
/* Fin de la div "div" */
</div>
...
/* Fin contenu */
</div>

Le css j'ai essayé plein de choses, à l'heure actuelle j'ai :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.diaporama1{width:100%;margin: 0 auto;padding:0;margin-top:0}
.textdiaporama1{float:left;max-height:34em;min-height:34em;width:calc(35% - 20px - 5px);text-align:center;overflow:auto;margin-top:0em;margin-left:5px;display:table-cell;vertical-align:middle;border:5px solid blue;overflow-x:hidden}
.zonediapo{float:right;width:65%;margin:0;padding:0}
.slides1{margin:0;padding:0;margin-top:10px;padding-top:2px}
.slidearea{text-align:center;margin:0 auto;padding:0;margin-bottom:10px;padding-bottom:10px;width:100%;position:relative}
.imgsp{display:none;margin:0 auto;cursor:zoom-in;border:0 solid transparent;width:94%}

S tu veux voir un exemple (le site est en construction, en particulier - mais pas que - à cause de ça), tu peux voir : http://tourissimo.ca et sélectionner "Cuba"

Ce qui me pose problème est le cadre bleu à gauche des diapos...

le jaune en haut et en bas c'est des marges
J'ai vu ça, mais c'est assez nouveau, non ? C'est assez largement répandu pour être standard ?

Jean

Invité · 21/04/2018, 13h11

C'est bien ce que je pensais...
Il faut commencer avec de bonnes bases, et une structure HTML(5) valide.

HTML5 : le guide du débutant

**souviron34** · 21/04/2018, 13h17

Envoyé par jreaux62

C'est bien ce que je pensais...
Il faut commencer avec de bonnes bases, et une structure HTML(5) valide.

C'est à dire ? peux-tu préciser ?

Parce que HTML5, oui,mais il y a pleins de trucs qui sont pas encore réellement implantés, ou qui changent....

Et en ce qui concerne la flexbox, c'est assez standard ?

Parce que, de ce que je lis, c'est pas encore vraiment ça...

Et de plus, incompatible avec tous les anciens...

Il doit bien y avoir moyen de le faire avec les div, non ??

Invité · 21/04/2018, 13h25

J'ai ajouté des liens dans mon message précédent...

Pour la compatibilité, voir la doc ("Compatibilité des navigateurs") :

MDN - Utilisation de boîtes flexibles de CSS

Il est encore nécessaire d'utiliser certains préfixes (essentiellement -webkit-).

A savoir qu'on écrira (voir dans la même doc : "Exemples") :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
{
display:-webkit-flex; display:flex; /* (cas particulier) */
 
-webkit-flex-wrap: wrap; flex-wrap: wrap;
-webkit-flex-direction: row; flex-direction: row;
...
}

Invité · 21/04/2018, 13h29

Envoyé par souviron34

...Et de plus, incompatible avec tous les anciens...

Tu parles de toi ?...

Si c'est des navigateurs, c'est sûr qu'on n'utilise plus trop de Minitel...

**souviron34** · 21/04/2018, 13h33

ok...

Je vais regarder..

Mais j'aimerais quand même savoir comment le faire avec des divs.. Ca doit pouvoir se faire... J'ai juste pas encore trouvé la manière....

PS: tout le monde s'est foutu de la gueule de Motif et de XWindow il y a bien des années , mais ils avaient - et ont toujours, pour XWindow avec Linux - un truc absolument génial qui était les atttachements.... D'objet en objet autant qu'en absolu.... Mas pouvoir attacher un objet à n'importe quel côté d'un autre, pour le design c'était genial...

**souviron34** · 21/04/2018, 13h38

Rhôôô... lui, là...

Non, je disais même sans être "dinosauresque", quand on regarde le lien pointé par le tutoriel https://caniuse.com/#search=flex , c'est pas la grande joie en ce qui concerne la prise en charge...

Donc ma question est sérieuse : je ne veux pas faire des sites d'avant-garde,, mais des sites "mainstream" qui marchent partout...

Invité · 21/04/2018, 13h40

A voir (relativement récent) :

Grilles CSS (CSS Grid)
(voir aussi dans la colonne de gauche chaque "propriété", comme grid)

Là, pour la compatibilité, il faut oublier I.E. (aucun support).

**souviron34** · 21/04/2018, 14h48

OK je vais regarder...

Autre point : la scrollbar est pas jolie-jolie sur Firefox sur ordi. Sur tablette c'est joli (ça prend la couleur de la boite et ça apparait/disparait).

J'ai vu qu'il y avait des discussions par rapport à des custom-made scrollbar..

Qu'en penses-tu et quel est l'état réel du consensus ? Pour ou contre ?

PS: pour compatibilité aujourd'hui, pour le problème soulevé, je ne sais pas encore si je vais me tourner vers flexbox ou ajuster le max-height avec les media-rules..

PPS: j'avais essayé de régler le max-height avec un calc() en fonction de la largeur, mais ça n'avait pas l'air de marcher... Mais en dehors de flexbox et grid, il n'y aurait pas de solution avec les divs ????

Invité · 21/04/2018, 15h55

https://codepen.io/jreaux62/pen/WJQbXz (code)
https://codepen.io/jreaux62/full/WJQbXz (full page)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
  <div class="wrapper">
    <nav>
      <h2>navigation avec scroll</h2>
 
      <p>Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris
        contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse.</p>
 
      <h3>Conciderit plaga quoniam in ac</h3>
 
      <p>Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter
        dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.</p>
 
      <h3>Cuius acerbitati uxor grave accesserat incentivum</h3>
 
      <p>Germanitate Augusti turgida supra modum, quam Hannibaliano regi fratris filio antehac Constantinus iunxerat pater, Megaera quaedam mortalis, inflammatrix saevientis adsidua, humani cruoris avida
        nihil mitius quam maritus; qui paulatim eruditiores facti processu temporis ad nocendum per clandestinos versutosque rumigerulos conpertis leviter addere quaedam male suetos falsa et placentia sibi discentes, adfectati regni vel artium nefandarum
        calumnias insontibus adfligebant.</p>
 
      <h3>Veniunt et veniunt Laelium amicissimus</h3>
 
      <p>Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris
        contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse.</p>
 
      <h3>Obsecranti subinde sperabatur victu sed</h3>
 
      <p>Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter
        dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.</p>
 
    </nav>
    <article>
      <h2>article</h2>
      <p>Hac ita persuasione reducti intra moenia bellatores obseratis undique portarum aditibus, propugnaculis insistebant et pinnis, congesta undique saxa telaque habentes in promptu, ut si quis se proripuisset interius, multitudine missilium sterneretur
        et lapidum.</p>
 
      <img src="http://magnolias.m.a.pic.centerblog.net/3b3be72e.jpg" />
 
      <p>Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt; et perissent ad unum ni comes orientis tunc Honoratus
        fixa constantia restitisset.</p>
 
    </article>
 
  </div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
* {
  /* pour maîtriser width et flex-basis */
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html, body {
    /* toute la hauteur du viewport */
    min-height: 100vh;
  }
 
/* -------------------------- */
nav,
article {
  margin: 2vh 0;
}
article img {
  max-width: 100%;
}
 
/* -------------------------- */
/* TABLET - DESKTOP */
/* Responsive (plus de 641px) */
/* -------------------------- */
@media (min-width: 641px) {
  html, body {
    /* toute la hauteur du viewport */
    height: 100vh;
    max-height: 100vh;
  }
 
  .wrapper {
    /* crée un contexte flex pour ses enfants */
    display: -webkit-flex;
    display: flex;
    height: 100vh;
    max-width:1400px; /* limite la largeur (facultatif)*/
    margin:0 auto; /* centrage horizontal du contenu */
  }
  nav {
    width: 35%;
  }
  article {
    /* occupe la largeur restante */
    flex: 1;
  }
  nav,
  article {
    margin: 4vh 0; /* marges */
    max-height: 92vh; /* 100vh - (2 x 4vh) (marges) */
    overflow: auto;
  }
}
/* -------------------------- */
 
/* Decoration */
body {
  margin: 0;
  background: #dd8;
  font-family: arial, sans-serif;
}
 
nav,
article {
  padding: 2em;
}
nav {
  background: orange;
}
article {
  background: lightgrey;
}
 
p {
  margin: 10px 0;
}

Invité · 21/04/2018, 16h04

Concernant la scrollbar personnalisée, j'ai déjà utilisé :

mCustomScrollbar (Nécessite jQuery) - Démo

Cela dit, ça rajoute dynamiquement du code.

**psychadelic** · 21/04/2018, 16h04

au bout du compte tu va finir par me convertir à l'utilisation des FlexBox !

Invité · 21/04/2018, 16h09

**souviron34** · 21/04/2018, 16h22

Envoyé par jreaux62

https://codepen.io/jreaux62/pen/WJQbXz (code)
https://codepen.io/jreaux62/full/WJQbXz (full page)

......

UN GROS MERCI !!!!!!!

Voilà juste ce que souhaitais

Je vais regarder.. .J'ai dû faire à peu près mais oublier un truc essentiel, dans tous mes essais....

mais bon... apres avoir regardé de près.... flex...

Envoyé par jreaux62

Concernant la scrollbar personnalisée, j'ai déjà utilisé :
....

J'avais trouvé ça aussi :

http://ginva.com/2012/08/21-useful-s...ing-tutorials/

et celle qui avait l'air le mieux et avec le plus de compatibilité partout :

http://jamesflorentino.github.io/nanoScrollerJS/

Comme d'hab, ce forum est GRAND !!

Merci

**souviron34** · 21/04/2018, 16h32

Je mets résolu, je te remercie, jreaux62 ...

Je verrais ça lundi...

A plus et bon weekend ....

J'aurais quand même aimé savoir si c'était faisable et comment avec les divs

Invité · 21/04/2018, 18h31

Envoyé par souviron34

J'aurais quand même aimé savoir si c'était faisable et comment avec les divs

Bon... OK...
Voici une solution SANS flexbox

:
Avec display:table/table-cell (simulation du comportement des <table>)

Code CSS à comparer avec l'autre...

On doit ajouter des <div class="scroll"> (en position:absolute) dans <nav> et <article> :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<div class="wrapper">
  <nav>
  <div class="scroll">
   <h2>navigation avec scroll</h2>
 
    <p>Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris
      contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse.</p>
 
    <h3>Conciderit plaga quoniam in ac</h3>
 
    <p>Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter
      dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.</p>
 
    <h3>Cuius acerbitati uxor grave accesserat incentivum</h3>
 
    <p>Germanitate Augusti turgida supra modum, quam Hannibaliano regi fratris filio antehac Constantinus iunxerat pater, Megaera quaedam mortalis, inflammatrix saevientis adsidua, humani cruoris avida nihil mitius quam maritus; qui paulatim eruditiores
      facti processu temporis ad nocendum per clandestinos versutosque rumigerulos conpertis leviter addere quaedam male suetos falsa et placentia sibi discentes, adfectati regni vel artium nefandarum calumnias insontibus adfligebant.</p>
 
    <h3>Veniunt et veniunt Laelium amicissimus</h3>
 
    <p>Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris
      contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse.</p>
 
    <h3>Obsecranti subinde sperabatur victu sed</h3>
 
    <p>Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter
      dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.</p>
 
  </div>
  </nav>
  <article>
  <div class="scroll">
    <h2>article</h2>
    <p>Hac ita persuasione reducti intra moenia bellatores obseratis undique portarum aditibus, propugnaculis insistebant et pinnis, congesta undique saxa telaque habentes in promptu, ut si quis se proripuisset interius, multitudine missilium sterneretur
      et lapidum.</p>
 
    <p>Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt; et perissent ad unum ni comes orientis tunc Honoratus fixa
      constantia restitisset.</p>
 
    <h3>diaporama</h3>
    <div class="diaporama">
      <img src="http://magnolias.m.a.pic.centerblog.net/3b3be72e.jpg" />
    </div>
 
  </div>
  </article>
 
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
* {
  /* pour maîtriser width et flex-basis */
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html,
body {
  /* toute la hauteur du viewport */
  min-height: 100vh;
  overflow:hidden;
}
 
/* -------------------------- */
article img {
  max-width: 100%;
}
 
/* -------------------------- */
/* TABLET - DESKTOP */
/* Responsive (plus de 641px) */
/* -------------------------- */
@media (min-width: 641px) {
  html,
  body {
    /* toute la hauteur du viewport */
    height: 100vh;
    max-height: 100vh;
  }
 
  .wrapper {
    display: table;
    height: 92vh;
    width: 100%;
    max-width: 1400px; /* limite la largeur (facultatif)*/
    margin: 4vh auto; /* centrage horizontal du contenu */
  }
  nav,
  article {
    position: relative;
    display: table-cell;
    margin: 4vh 0; /* marges */
    height: 92vh; /* 100vh - (2 x 4vh) (marges) */
    overflow: auto;
  }
  nav {
    width: 35%;
  }
  article {
    width: 65%;
  }
  .scroll {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
    padding: 2em;
  }
}
/* -------------------------- */
 
/* Decoration */
body {
  margin: 0;
  background: #dd8;
  font-family: arial, sans-serif;
}
 
nav,
article {
  padding: 0;
}
nav {
  background: orange;
}
article {
  background: lightgrey;
}
 
p {
  margin: 10px 0;
}
 
.diaporama {
  padding: 10px 0;
  text-align: center;
}

Remarque importante :

Dans le cas présent, il était facile de remplacer display "flex" par "table".
MAIS ce n'est pas toujours le cas.

ET SURTOUT, les flexbox offrent des possibilités très puissantes (inverser la position des blocs, positionnements/espacements des éléments,....) impossibles à obtenir avec display:table.

**souviron34** · 03/05/2018, 19h05

une petite note de conclusion :

J'ai essayé ton code, jreaux62, et finalement ça ne marchait pas plus, en particulier parce que il y avait des mesures absolues..

Pas grave, ça m'a inspiré

Du coup, un peu dans ton style, mais avec ce que j'avais fait avant, j'ai réussi..

En fait, le truc était de calculer le nombre de lignes représentées par la proportion de l'image plus d'ajouter le nombre de lignes au dessus...

du style :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
.textdiaporama1{
float:left;
width:calc(35% - 25px);
max-height:calc(40vw + 9em + 20px);
min-height:calc(40vw + 9em + 20px);
text-align:center;
margin-top:0em;
margin-left:5px;
vertical-align:middle;
border:10px solid blue;
overflow:auto;overflow-x:hidden}

(40vw = (94% de 65%) * proportion hauteur/largeur des images // 9em = le nombre de lignes de texte hors image (cadre au dessus + ligne en dessous) // 20px = somme des marges)

Donc merci encore, ça m'a quand même permis d'en sortir

Maintenant, j'ai un autre souci - léger - que je vais mettre ailleurs sur le forum, mais je le dis ici aussi : là j'ai fait un site "one-page"... Je me demande si je le fais "multi-pages" (en mettant des href plutot que des toggles de display). Une opinion ?

PS: un des soucis que j'avais eu était que je n'avais pas noté qu'il fallait des espaces autour des opérateurs dans calc....

Casse-tête de positionnement

Positionnement en CSS

Discussions similaires

Partager

Partager