IPB

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> casse tête - mise en page CSS
Options
toluol
posté 28 Dec 2017, 00:00
Message #1


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 755
Inscrit : 14 Nov 2003
Lieu : Genève
Membre no 11 656



Bonsoir !

j'ai un petit casse tête que j'essaie de résoudre en CSS (en évitant le JS)

Voici la tête basique du truc :
Fichier joint  Capture_d_____cran_2017_12_27____22.51.21.png ( 30.65 Ko ) Nombre de téléchargements : 10


Les contraintes :
- avoir une colonne sur la gauche qui prenne toute la hauteur de l'écran
- dans cette colonne, une partie haute qui peut varier en hauteur* (en bleu, et nommé "contenu" sur mon exemple)
- Et juste en dessous, une partie composée d'une liste d'éléments qui dépassera forcément la hauteur restante et donc un scroll sera utilisé

*Il faut voir la partie bleue comme un tiroir qui se "déplie" (avec un onclick) et ne sera pas toujours dans cet état.

Voici ce que j'ai actuellement comme code (un peu brut de décoffrage, pas de ul/li et une redondance de div, mais bon, c'est pour tester !)
Code
<!doctype html>
<html lang="fr">
<head>
    <style>
        #bkg{position:absolute;top:0;left:0;right:0;bottom:0;background:green;}
        #pan_left{position:absolute;top:0;width:20%;left:0;bottom:0;background:rgba(255,255,255,0.5);}
            #bloc_variable{width:100%;background:blue;color:#fff;}
            #list{width:100%;height:100%;overflow:auto}
                a.line{display:block;width:100%;height:1.5em;line-height:1.5em;border-top:1px solid rgba(0,0,0,0.5)}
        #pan_right{position:absolute;top:0;width:80%;right:0;bottom:0;background:rgba(0,0,0,0.5);}

    </style>
</head>

<body>
    <div id="bkg">
    </div>
    <div id="pan_left">
        <div id="bloc_variable">
            <br/>contenu<br/><br/><br/><br/><br/><br/><br/>
        </div>
        <div id="list">
        <?php
            for ($i = 1; $i <= 50; $i++) {
                echo'<a href="#" class="line">liste</a>';
            }
        ?>
        </div>
    </div>
    <div id="pan_right">
    </div>
</body>
</html>


Le problème que j'ai avec cette solution, c'est que la hauteur du contenu bleu me chasse ma liste en dehors de la page (du coup un scroll complet de ma page apparaît). Je peux mettre #pan_left en position:fixed; et cela règle mon ascenseur général, mais ma liste continue toujours plus bas et ne règle pas tout le problème. J'ai essayé des float pour le bloc "contenu", mais... cela ne fonctionne pas non plus. En changeant ma structure, peut-être ?

Je pourrais y arriver en JS, mais j'aimerais d'abord faire mon possible en CSS... ^^

Ce message a été modifié par toluol - 28 Dec 2017, 00:04.
Go to the top of the page
 
+Quote Post
toluol
posté 28 Dec 2017, 11:22
Message #2


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 755
Inscrit : 14 Nov 2003
Lieu : Genève
Membre no 11 656



J'en suis arrivé à cette solution, même si j'ai dû avoir recours au javascript (de toute façon, j'en ai besoin pour "ouvrir" mon panneau).
Merci de me dire si vous voyez une solution plus élégante...

Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <style>
        body {padding:0;margin:0;}
        *, *:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
        #header {height:80px;width:100%;background:grey;}
        #sidebar {position:absolute;left:0;bottom:0;width:200px;background:grey;
            top:80px;  /* same value as height of header */
        }
        #sidebar_top {height:30px;position:absolute;top:0px;left:0;width:100%;background:blue;cursor:pointer;}
        #sidebar_bottom {position:absolute;left:0;bottom:0;width:100%;overflow:auto;background:lime;
            top:30px; /* same value as height of sidebar_top */
        }
            a.list{display:block;width:100%;height:1.5em;line-height:1.5em;border-top:1px solid rgba(0,0,0,0.5)}
    </style>
</head>
<body>
    <div id="header">
    </div>
    <div id="sidebar">
        <div id="sidebar_top"></div>
        <div id="sidebar_bottom">
            <?php
                for ($i = 1; $i <= 50; $i++) {
                    echo'<a href="#" class="list">liste</a>';
                }
            ?>
        </div>
    </div>
    <script>
        jQuery(function($){
            $(document).ready(function() {
                var sidebar_top = $('#sidebar_top');
                var sidebar_bottom = $('#sidebar_bottom');
                var sidebar_top_orig = sidebar_top.height();
                $(document).on('click','#sidebar_top',function(){
                    if(sidebar_top.height()==sidebar_top_orig){
                        sidebar_top.animate({'height': 200}, 300);
                        sidebar_bottom.animate({'top': 200}, 300);
                    }
                    else{
                        sidebar_top.animate({'height': sidebar_top_orig}, 300);
                        sidebar_bottom.animate({'top': sidebar_top_orig}, 300);    
                    }
                });
            }); //end doc ready
        }); //end jquery
    </script>
</body>
</html>
Go to the top of the page
 
+Quote Post
Sgt.Pepper
posté 28 Dec 2017, 12:50
Message #3


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 2 954
Inscrit : 10 Feb 2011
Membre no 164 526



Hello,

Solution > pseudo-frames. smile.gif

Jette un œil ici
Go to the top of the page
 
+Quote Post
No6
posté 28 Dec 2017, 19:12
Message #4


Oui ?
*****

Groupe : Membres
Messages : 3 835
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224



heu, c'est pas tout à fait clair comme question, qu'est ce qui se passe pour la partie vert foncée, si elle contient du texte, suivant le fait que le carré bleu soit déplié ou non ?
cela chasserai le texte du carré vert, vers la droite, ou sera-t'il masqué sur cette partie gauche ?


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
toluol
posté 29 Dec 2017, 04:47
Message #5


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 755
Inscrit : 14 Nov 2003
Lieu : Genève
Membre no 11 656



Alors pour mieux expliquer :

il faut imaginer que la partie verte foncée est un très long menu et qu’il modifie la partie de droite. (Donc, en aucun cas, cette sorte de menu viendra à droite)

Si vous testez mon dernier code, on peut dire que le comportement des éléments me conviennent. La partie bleue est un module qui se déplie pour filtrer ce long menu (en ajax).

Normalement, il n’y a aucune raison que la partie bleue vienne plus bas que l’écran (et si c’est le cas, en cas de minuscules écrans par exemple, cela cacherait effectivement ce long menu... (que je limite toutefois à une centaines d’éléments tant qu’on a pas mieux filtré la recherche) Mais cela est sans souci car cette partie bleue n’est qu’un système de filtre. Si, un jour, il y a trop d’options, je le ferai en 2 volets accordéon (dont un qui se ferme quand on ouvre l’autre)

par contre, j’ai essayé un bout de code plus loin (avec une utilisation mobile où les éléments s’empilent différemment) et c’est vrai que ça ajoute beaucoup de javascript...

Mais j’ai peur qu’il n’y ait que cette solution (le JS) pour optimiser la place des éléments tel que je le souhaite.
A noter que tout ceci est pour une webapp personnelle. 😃

Ce message a été modifié par toluol - 29 Dec 2017, 04:49.
Go to the top of the page
 
+Quote Post
No6
posté 29 Dec 2017, 16:05
Message #6


Oui ?
*****

Groupe : Membres
Messages : 3 835
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224



J'ai fait un truc comme ça quelque part,, il faut que je retrouve...

Sinon, c'est vrai, en css, ce n'est pas vraiment possible de gerer proprement un division verticale, parce qu'à la base il n'existe pas de limitation en hauteur d'une page, le browser se chargeant de mettre à la suite verticalement les données de la page, en joutant un scroll vertical si besoin.

d’ailleurs ça doit porter un nom ce type de concept, c'est un peu dans la même idée des anciens rouleaux de parchemin que l'on déroule sur une table de lecture, sauf que la, ça se passe de manière horizontale.

J'ai cru lire que c'était un truc qu'on allait faire pour le css 4 ou 5 ?
ou en tout cas un truc du genre : height = 100% - 80px; /* ce qui n'est pas permis d'écrire */


Sinon pour rester dans du css pur, il doit y avoir le moyen de mettre le body à height = 100%, afin de bloquer toute velléité de scroll, puis ensuite pour la partie gauche limitée en largeur d'y placer les éléments 1 à 1, sauf que bien sur le scroll se fera sur toute la hauteur.
dans ce cas mettre le carré bleu en position fixe, et placer dessous ton accordéon vert clair, avec une marge top égale à la hauteur du carré bleu.
bien sur tu te retrouvera toujours avec une barre de scroll sur toute la hauteur et il n'y a pas de ruses que je connaisse contre ça...

Pour le coté Javascript, j'ai pas vraiment eu le temps de me pencher sur ton code, mais il me semble que tu à oublié de gérer le resize de l'écran, et il doit y avoir moyen de faire un code beaucoup plus concis, amha.


Bref, je regarderai ça un peu plus tard wink.gif


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
toluol
posté 29 Dec 2017, 18:53
Message #7


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 755
Inscrit : 14 Nov 2003
Lieu : Genève
Membre no 11 656



Merci pour ta réponse.

Je suis hélas dans l’impossibilité de mettre mon dernier essai de code, où justement j’étais allé plus loin avec des medias queries, mais mon code est encore long pour ce seul besoin de mise en page !

Effectivement, un 100%-80px serait exactement ce qui me faut ... Et je suis aussi arrivé à une solution d’ascenseur sur toute la hauteur... Mais dans ce cas, je préfère une solution longuette en javascript...

Je me demandais encore si on ne pouvait pas faire cela avec une table inscrite dans un div fixe sur toute la hauteur...
Go to the top of the page
 
+Quote Post
No6
posté 29 Dec 2017, 19:34
Message #8


Oui ?
*****

Groupe : Membres
Messages : 3 835
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224



ben voila, finalement je l'ai refait, c'était moins long que de rechercher...
CODE
<!doctype html>
<html lang="fr">

<head>
<meta charset="UTF-8">
<style>
body {
margin: 0 0 0 200px;
padding: 20px 30px;
}

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
aside {
margin: 0;
}
aside#BlueSquare {
background-color: blue;
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 30px;
}
aside#BigList {
background-color: blanchedalmond;
position: fixed;
top: 200px;
left: 0;
width: 200px;
height: 300px;
overflow: auto;
}
aside#BigList a {
float: left;
clear: left;
}
</style>
<title>essai 1</title>
</head>

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


<aside id="BlueSquare">
</aside>
<aside id="BigList">
<a href="#" class="line"> Premier élément</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">dernier élément</a>
</aside>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function () {

function CalcBigList_Pos_Height(xPos) {
$('#BigList').animate({ 'top': xPos, 'height': ($(window).height() - xPos) }, 300);
}

CalcBigList_Pos_Height($('#BlueSquare').outerHeight()); // passage au premier tour...

$('#BlueSquare').click(function () {
var new_Height = ($(this).outerHeight() > 30) ? 30 : 200;
$(this).animate({ 'height': new_Height }, 300);
CalcBigList_Pos_Height(new_Height);
});

$(window).resize(function () {
CalcBigList_Pos_Height($('#BlueSquare').outerHeight());
});

}); // $(document).ready(
</script>
</body>
</html>


une grosse douzaine de lignes de code en JavaScript, et inutile de mettre un
Code
html { height :100% }
sauf à vouloir mettre une image de fond qui reste fixe. wink.gif

Ce message a été modifié par No6 - 29 Dec 2017, 19:58.


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
toluol
posté 30 Dec 2017, 17:17
Message #9


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 755
Inscrit : 14 Nov 2003
Lieu : Genève
Membre no 11 656



Woa Merci No6 !

Je ne vois ton code que sur mon iphone pour l’instant et je ne peux pas l’essayer aujourd’hui, mais j’imagine que ça fonctionne! :-))

Il faudra que je trouve encore une solution pour voir ces données sur mobile... Mettre le contenu de la page (Lorem ipsum) sous la liste qui aurait une max-height : Je ne sais pas si c’est une bonne idée... ?

Sinon, qu’on ait d’abord la liste (avec les options) et losqu’on choisit la liste part sur la gauche et le contenu arrive depuis la droite et une flèche permet de faire une nouvelle recherche ! (et de revenir à l’état de base) Sur jquerymobile, il y a peut-être des facilités pour ce genre de choses, non ?
Go to the top of the page
 
+Quote Post
No6
posté 30 Dec 2017, 20:04
Message #10


Oui ?
*****

Groupe : Membres
Messages : 3 835
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224



pour les petits écran de smartphones, cette mise en page , n' est pas vraiment la meilleure qui soit.

En général pour ce genre de format on à juste le contenu principal affichée. et un menu latéral (<nav> ) est appellé par un icone "hamburger" exemple : https://tympanus.net/codrops/2015/11/12/ani...u-icon-segment/ )

J'ai mis un lorem ipsum sur le body de la page, pour montrer l'utilisation d'un margin-left = 200px, que tu peux remettre à zéro si tu escamote ta "sidebar"
mais ce pourrait être toutes sorte d'autre choses, comme un systeme HTML5 (section / articles) ou classiquement des divs...


Sinon, je crois que ce doit être faisable en css uniquement en utilisant la Flexbox, mais je ne maitrise pas vraiment, et cette techno css n'est pas encore partout implémentée...

Ce message a été modifié par No6 - 30 Dec 2017, 20:08.


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
scoch
posté 3 Jan 2018, 11:53
Message #11


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 336
Inscrit : 1 Jul 2010
Membre no 156 073



Citation (No6 @ 29 Dec 2017, 16:05) *
J'ai cru lire que c'était un truc qu'on allait faire pour le css 4 ou 5 ?
ou en tout cas un truc du genre : height = 100% - 80px; /* ce qui n'est pas permis d'écrire */

La fonction calc de CSS3 est ton amie, et elle est assez bien supportée.
Code
height: calc(100% - 80px);



--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post
No6
posté 3 Jan 2018, 16:49
Message #12


Oui ?
*****

Groupe : Membres
Messages : 3 835
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224



Citation (scoch @ 3 Jan 2018, 11:53) *
La fonction calc de CSS3 est ton amie, et elle est assez bien supportée.
Code
height: calc(100% - 80px);


Mince, effectivement j'ai raté ce truc.... !

Du coup, version pure css :
CODE
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0 0 0 200px;
padding: 20px 30px;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
aside {
margin: 0;
}
aside#BlueSquare {
background-color: blue;
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 30px;
transition: height 0.3s linear;
}
aside#BigList {
background-color: blanchedalmond;
position: fixed;
top: 30px;
left: 0;
width: 200px;
height: calc(100% - 30px);
overflow: auto;
transition: transform, height 0.3s linear;
}
aside#BlueSquare.grandir {
height: 200px;
}
aside#BlueSquare.grandir+aside#BigList {
transform: translateY(170px); /* = 200 - 30 */
height: calc(100% - 200px);
}
aside#BigList a {
float: left;
clear: left;
}
</style>
<title>essai 1</title>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<aside id="BlueSquare">
</aside>
<aside id="BigList">
<a href="#" class="line"> Premier élément</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">liste</a>
<a href="#" class="line">dernier élément</a>
</aside>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function () {

$('#BlueSquare').click(function () {
$(this).toggleClass('grandir');
});

}); // $(document).ready(
</script>
</body>
</html>


le seul truc qui me chagrine ! j'ai essayé de mettre les deux blocs Aside dans un même contenant :
Code
    <aside
        <div> id="BlueSquare"> </div>
        <div> id="BigList"> </div>
    </aside>

mais pour une raison que j'ignore le calcul de la hauteur du "BigList" ne fonctionne pas (sur FF)
Code
height: calc(100% - 30px); /* !! */


Ce message a été modifié par No6 - 3 Jan 2018, 17:00.


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
toluol
posté 11 Jan 2018, 02:02
Message #13


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 755
Inscrit : 14 Nov 2003
Lieu : Genève
Membre no 11 656



Citation (scoch @ 3 Jan 2018, 11:53) *
Citation (No6 @ 29 Dec 2017, 16:05) *
J'ai cru lire que c'était un truc qu'on allait faire pour le css 4 ou 5 ?
ou en tout cas un truc du genre : height = 100% - 80px; /* ce qui n'est pas permis d'écrire */

La fonction calc de CSS3 est ton amie, et elle est assez bien supportée.
Code
height: calc(100% - 80px);



waouw... C'est vrai que ça a l'air vraiment bien ça !

Zut, de mon côté, j'étais parti sur du javascript... En même temps, je me suis découvert d'autres besoins : Comme le besoin que cette slidebar puisse se "rétracter, puis se bloquer et se débloquer" via un bouton, si vraiment j'en ai envie...

Je ne peux pas mettre ma version la plus élaborée ici car c'est au milieu d'une tonne de code à présent... ! Je vous mets ci dessous une version intermédiaire.
Toutefois, ma version la plus élaboré comporte un souci. La partie que tu (No6) avais nommée aside#bluesquare (et moi aside#SlidebarOptions) devrait idéalement être extensible car j'ai un sélecteur à champs multiple dans cette zone d'options et ce selecteur s'agrandit, évidemment !

Du coup, va falloir que je revoit encore ma copie... ! ^^

En attendant, voilà mon essai intermédiaire :
CODE
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
body{margin:0;padding:80px 0 0 0;}
*, *:before, *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
header#header{position:fixed;top:0;height:80px;width:100%;background:green;}
aside{margin:0;}
section#Slidebar{position:fixed;width:340px;top:80px;left:-300px;bottom:0;background:rgba(255,0,0,0.3);}
aside#SlidebarOptions{top:80px;left:0;width:300px;height:30px;background-color:blue;}
aside#SlidebarList{top:200px;left:0;width:300px;height:300px;overflow:auto;backg
round-color:blanchedalmond;}
aside#SlidebarList a{float:left;clear:left;border-bottom:1px solid #ccc;display:block;text-align:center;height:30px;width:100%;}
section#Page{padding-left:40px}
</style>
</head>

<body>
<header id="header"></header>



<section id="Slidebar">
<aside id="SlidebarOptions">
</aside>

<aside id="SlidebarList">
<?php
for ($i = 1; $i <= 50; $i++) {
echo'<a href="#" class="line">liste</a>';
}
?>
</aside>
</section>
<section id="Page">
<?php
for ($i = 1; $i <= 20; $i++) {
echo'<p>Hit, ant unda quis quatur maion porit ullabor ernatur alitati […] que expliqu iducilla de earum faceat.
Cium re nonsequ asimus ea consed et eatem cusanduntur?
Otam ium rem facia dis sequatinte sitatiosti blabo.
Nequiae doluptus solesequi sit audis que sit eaquis sum que dolo imporepra voluptatiis […] Mi, et por acerum ea qui am hariant.</p>';
}
?>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function(){

var slidebar_section = $('section#Slidebar');
$(document).on({
mouseenter: function () {
$('section#Slidebar').stop().animate({'left':0}, 300);
$('section#Page').stop().animate({'padding-left':340}, 300);
},
mouseleave: function () {
$('section#Slidebar').stop().animate({'left':-300}, 300);
$('section#Page').stop().animate({'padding-left':40}, 300);
}
}, "section#Slidebar");


var header_h = $('#header').outerHeight();
function CalcList_h(yPos){
$('#SlidebarList').stop().animate({'top':yPos+header_h, 'height': ($(window).height()- yPos - header_h) }, 300);
}
CalcList_h($('#SlidebarOptions').outerHeight());

$('#SlidebarOptions').click(function(){
var new_Height = ($(this).outerHeight()>30) ? 30 : 200;
$(this).animate({'height':new_Height},300);
CalcList_h(new_Height);
});

$(window).resize(function(){
CalcList_h($('#SlidebarOptions').outerHeight());
});//fin on resize

}); //fin doc ready

</script>

</body>
</html>


note : par ailleurs, pour cet effet de Sliderbar, j'ai ensuite opté pour différentes classes (une "slidebarOpen" et ""slidebarClosed") avec des transitions css et une détermination des classes par jQuery. On ne peut évidemment pas faire tout en CSS, mais si on peut évider au maximum le JS, je trouve toujours mieux...

Ce message a été modifié par baron - 11 Jan 2018, 04:14.
Raison de l'édition : Ajout de balises CODEBOX (+ alinéas)
Go to the top of the page
 
+Quote Post
No6
posté 11 Jan 2018, 06:41
Message #14


Oui ?
*****

Groupe : Membres
Messages : 3 835
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224



même version 99% css (transitions inclues) ==> le jQuery se résume à un unique toggleClass
sauf pour la partie cosmétique, vu que tu prefere mettre des bocles en php, j'ai mis leur équivalent en javascript (ecma 6).
CODE
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
* {
margin: 0;
padding: 0;
border:0;
}
header#header {
position: fixed;
top: 0;
height: 80px;
width: 100%;
background: #00800091;
overflow: hidden;
}
#Slidebar {
position: fixed;
top: 80px;
left: -300px;
width: 340px;
height: calc(100% - 80px);
background: rgba(255, 0, 0, 0.3);
transition: transform 0.3s linear;
}
#Slidebar:hover {
transform: translateX(300px); /* = 200 - 30 */
}
#SlidebarOptions {
position: relative;
top: 0;
left: 0;
width: 300px;
height: 30px;
background-color: blue;
transition: height 0.3s linear;
}
#SlidebarList {
position: relative;
bottom: 0;
left: 0;
width: 300px;
height: calc(100% - 30px);
overflow-y: auto;
background-color: blanchedalmond;
transition: height 0.3s linear;
}
#SlidebarOptions.grandir {
height: 200px;
}
#SlidebarOptions.grandir + #SlidebarList {
height: calc(100% - 200px);
}
main#Page {
position: fixed;
top: 80px;
left: 0;
height: calc(100% - 80px);
margin-left:40px;
padding: 20px;
overflow-y: auto;
transition: margin 0.3s linear;
}
#Slidebar:hover + main#Page {
margin-left: 340px;
}
#Page p {
padding: 5px;
}
#SlidebarList a {
float: left;
clear: left;
border-bottom: 1px solid #ccc;
display: block;
text-align: center;
height: 30px;
width: 100%;
line-height: 30px;
}
#SlidebarList a:hover { background-color: aqua; }
</style>
<title>essai 2</title>
</head>
<body>
<header id="header"><h1>header</h1></header>

<aside id="Slidebar">
<div id="SlidebarOptions"><h4>_Options_</h4></div>
<div id="SlidebarList"></div>
</aside>

<main id="Page">
</main>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function () {

$('#SlidebarOptions').click(function () {
$(this).toggleClass('grandir');
});


/*----------------------------*\
| cosmétique de présentation |
\*----------------------------*/

for (let i = 1; i < 51; i++) { // remplissage pour test
$('#SlidebarList').append(`<a href="#${i}" class="line">list item ${i}</a>\n`);
}

let page_elem = "<p>Hit, ant unda quis quatur maion porit ullabor ernatur alitati orruptam as ratur sam inctur mi,\n";
page_elem += " sequam sit aut quat renimi, imus, ne core namus, exerenisti sin preiunt explam et faccus eum quatur\n";
page_elem += " am nullit facepudis everum es ea sed ut et et perum, con etur aditibus, sinvenia cor as dolupta spienim incipitio.\n";
page_elem += " Uciti beatia que omnihicid quisint officiet quasim que expliqu iducilla de earum faceat.\n";
page_elem += " Cium re nonsequ asimus ea consed et eatem cusanduntur? Otam ium rem facia dis sequatinte\n";
page_elem += " sitatiosti blabo. Nequiae doluptus solesequi sit audis que sit eaquis sum que dolo imporepra\n";
page_elem += " voluptatiis magnim alibus consequi corem quia nusciatqui occum quid min nimus quiaspe doluptas\n";
page_elem += " sin cullab id ea abo. Nam, sequis nemolup tatios etur serferitae. Gitaspedit incia si inus, quis\n";
page_elem += " velesti oriasperem landamus accullab inihil is ut quaspere, tendae nus aut velibus, ut expel mi,\n";
page_elem += " experiorem. Nemporum qui occabo. Mi, et por acerum ea qui am hariant.</p>\n";

for (let i = 0; i < 4; i++) { // remplissage pour test
$('#Page').append(page_elem);
}

}); /// $(document).ready(
</script>
</body>
</html>


Ce message a été modifié par No6 - 11 Jan 2018, 15:11.


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



Nous sommes le : 18th January 2018 - 04:39