Menu

Resize 2 div sans modifications [Résolu]

Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
-
bonjour,

je suis bloqué sur un soucis assez particulier.
pouvez-vous m'expliquer comment faire en sorte de découper ma fenêtre en 2 parties qui grâce a leurs bordures commune peuvent être non pas redimensionné mais plus ou moins visible.

j'ai actuellement divisé horizontalement ma fenêtre en 2 div.
je désire que la bar mobile entre les 2 div me permette de définir qu'elle Div sera au dessus de l'autre selon comment l'utilisateur la déplace.

dans mon code fournie plus bas je vous montre cela grâce a des background différents sur chaque div .
si vous parvenez a bouger la bar centrale sans modifier la taille des backgrounds c'est tout bon, malheureusement ce n'est pas le cas actuellement. Et si par miracle vous pouvez également en profiter pour me montrer comment faire cela non plus avec des backgrounds mais avec du contenue dans la div c'est encore mieux.

PS1: je cherche également un moyen de pouvoir attraper ma barre centrale pour la bouger, actuellement seul le coin en bas a droite de la div de gauche permet de la rendre mobile.

PS2: Si quelqu'un sait comment afficher une page web dans une div sans être confronter a un soucis de "X-Frame-option same origine" je suis preneur. (avec tout ça vous aurez probablement deviner ce que je cherche a dev ^^)


Voici mon code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/master.css">

  <title>mon site beaucoup trop bien</title>
</head>

<body>
  <div class="param">

  </div>

  <div class="Left-Side">
    <div class="Left-Window">

    </div>
  </div>
  <div class="Right-Side">
    <div class="Right-Window">
      
    </div>
  </div>

</body>
</html>



et le css qui va avec :

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
}

.param {
  background-color: black;
  position: fixed;
  transition: 1.5s;
  opacity: 0;
  width: 100%;
  height: 5%;
  top: 0;
}
.param:hover {
  opacity: 1;
}

.Left-Side {
  background-image: url("https://elobservadorenlinea.com/wp-content/uploads/2018/08/woman-1807533_960_720.jpg");
  border-right: dashed;
  resize: horizontal;
}
.Right-Side {
  order: 1;
  border-left: dashed;
  background-image: url("https://images.pexels.com/photos/1386602/pexels-photo-1386602.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
}
.Left-Side, .Right-Side {
  width: 50%;
  height: 100%;
  overflow: auto;
  border-color: red;
  background-size: cover;
}

.Left-Window {

}
.Right-Window {

}

.Left-Window, .Right-Window {

}

.pic {
  height: 550px;
}



j’espère beaucoup votre aide car ce projet me tiens a cœur .
merci les gens !!
Afficher la suite 

Votre réponse

3 réponses

Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
3
0
Merci
petit UP du weekend.

j’espère pouvoir avancer convenablement sur ce projet perso durant ce weekend pluvieux ....

merci a vous d'avance.
Commenter la réponse de astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
3
0
Merci


voici un aperçu de ce que j'ai actuellement.
ici on voie bien que j'ai 2 website différents.

a la limite le faite que les page web s'adapte a a taille des mes 2 div c'est pas bien grave mais ce qui me dérange c'est cette barre centrale qui refuse a présent de bouger ....
Commenter la réponse de astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
3
0
Merci
j'ai fini par trouver ce qu'il me faut.
si cela peut aider certain, moi je me suis inspiré de ca : http://jsfiddle.net/T4St6/82/
Commenter la réponse de astrocurieux